f3.js | Form Follows Function()

This page shows a bit outdated content - see our latest top page!

Create Internet of Things Purely by Code

Write a piece of code

Laser cut panels

Assemble and run the app.

During the development of physical computing devices, physical object models and programs for microcontrollers are usually created with separate tools with distinct files. Forms are defined by CAD software and functions are defined by IDEs. As a result, the developer needs to learn the usage of both tools. The software cannot directly access hardware metrics. Designing hardware interface cannot benefit from the source code information either.

f3.js stands for Form Follows Function() for JavaScript and allows to do both in an IDE, simultaneously. The developer only needs to learn the JavaScript programming language and f3.js API. The API is provided as Node.js modules. The developer can specify which hardware modules to use (e.g. var Camera = require('jscam'); var c = new Camera()), how they behave (e.g. c.takePicture()), and where they are placed on laser-cut interfaces by code (e.g. var f3js = require('fff-print'); f3js.add(c, 75, 35) opening holes for wires and screws to hold the module).

Live Programming of Laser-cut Interfaces

The laser-cut interfaces are three-dimensional physical objects, constructed from a set of laser-cut planes connected to each other through dovetails. The f3.js API helps to create such planes. For instance, by drawing a rectangle (e.g. var rect = f3js.drawDovetailRectangle(5, 5, 105, 65)) and extruding it (e.g. var planes = rect.extrude(40)), the developer gets an array of rectangles representing the rest five faces of a box object. With the presented example code, a 100x60x40 mm box can be assembled with a camera module placed on the top face.

The print preview is dynamically rendered by executing the source code with the sandboxed f3.js JavaScript interpreter on the browser. When a change is made to the source code, the system instantly evaluates the code and updates the preview.

The code generates a PDF file that can be directly sent to a laser cutter. The same code can be transferred to microcontrollers to control their behaviors. Every aspect of the IoT application is specified by the single code base.

Example Applications

We are conducting private workshops to iterate the development process of f3.js. Here are several examples created in such attempts. Please note that the entire IoT applications including the software and enclosures are implemented by writing code on f3.js.

DON'T Surprise Me

QuadBuzzer

Songle Physical Widget

Run & Jump

Visitor Counter

Got Interested?

We are working hard to make the f3.js IDE publicly available. For the latest updates, please follow @f3jsorg.

Specifications

Supported microcontrollers:	Intel Edison, Tessel.io (probably), Arduino Yun + Node.js (perhaps)
Supported platforms:	Windows 7/8/8.1/10, Mac OS X, some Linux distributions (perhaps)
Supported sensors and actuators:	Grove sensors, actuators, and other modules will be also supported with your contributions. (We are planning to open a GitHub repository.)

Publications

This work has been introduced in the following non-archival publication.

Jun Kato and Masataka Goto, "Form Follows Function(): An IDE to Create Laser-cut Interfaces and Microcontroller Programs from Single Code Base", In Proc. of UIST'15 Adjunct Proceedings. PDF

Tweets by @f3jsorg