This project is directed towards the quest to solve the problem that some designers are currently facing, consisting in little or no understanding of the processes needed for writting a program. This fact is causing them conflict between programming and their profession, which now requires greater skills in this regard. Designers are having problems understanding the processes needed to program, so it is very difficult for them to write code. I chose to work with this issue after applying a series of surveys and interviews to designers, which also served to determine the programming language with which to work: javascript.

js.bit is a system consisting of a set of 28 physical blocks that represents syntactic parts of JavaScript and an iPad application. Each block represents a part of a computer program, for example, a variable. When these blocks are connected to the main block or to each other, a program is created. The code of the program can be seen and analyzed in real time, the code can also be executed outputing physical actions such as lighting an LED or moving a motor. The system recognizes the block array and outputs in a display the information about the blocks.

js.bit was tested with the targeted designers, and it showed that they were able to improve their understanding of the concepts shown during the test. They were also motivated to keep on studying and it gave them more confident. js.bit was tested with designers, keeping in mind designers needs, but really it can be used by everyone.

How to use?

To use, the blocks must be placed and connected on to the display of an iPad. The iPad application interface is divided into two spaces: block space and source code space. A block appears in the block space, and the source code corresponding to that block appears on the source code space of the application. A line that is colored depending on the type of block is drawn from the block to the corresponding line in the source code indicating the correct grammar and how the block should act if it was real JavaScript.


There are two sizes of blocks: small blocks and large blocks. Small blocks have in their interior an ATTiny85 microprocessor with a capacity one input or output. In its top they can have a connector to send their value to other blocks, that is the case of the variable block (block types are described below). These connectors can also be used to receive values such in the case of the motorbox extension. They also can have a connector that supplies power and one input or output on their right side. Large blocks use an Atmega 328 microprocessor with the Arduino software installed. Since these blocks are using a large microprocessor, they can handle several inputs and outputs. They can also have powered connectors on their right side, and inputs in their top. There are cases that this block also has a potentiometer to set values on their top. These blocks are used to communicate to other components such as the lightbox or the motorbox.

All the blocks have a 6 pin male connector on its back and a 6 pin female connector on its front. These pins are used to connect the blocks between them, to transmit electricity and to send digital data between the blocks. Other blocks have male or female connectors that enable them to connect to special blocks or to share information directly with other blocks.

The blocks are made of two-millimeter medium-density fiberboard and covered with colored paper to give them finishing and to protect the display from scratches. The color of the paper indicates the type of block or the type of action it performs. The blocks are separated in to two categories: logic blocks and output blocks.


Logic blocks

Logic blocks are used to create the program’s logic, some of them are the value block, the variable block and the conditional block.

value block The value block is used to represent numbers that range from 0 to 9. The number is selected by turning a knob.
variable block The variable block holds the value that is connected on its right face. It can send its value or modify it by connecting to other blocks with a cable using the connectors on its top face.
conditional block The conditional block represents an if statement. It compares the value of two blocks and use it as a condition to make something happen. The condition can be selected by turning the knob located in its top face
operator block The operator block is used to perform additions, substractions, multiplications and divisions. It uses a value block to set the operation value and performs the operation on the block connected on its top face.
loop block The loop block is used to repeat the same code a defined number of times. The number of times the code is repeated is selected by turning the knob on its top face.
free input block The free input block can run any code. The code the code is written using an keyboard of the tablet.

Output blocks

Output blocks are used to make the program output something as a result, for example the rgb lightbox block or the motorbox block.

lightbox The lightbox block has an rgb lamp. It can be lit on any color. On it's top face it has tree connectors, one for red, one for green and one for green. It needs to be connected to a variable to get the value for each color.
motorbox The motorbox block has a motor that can turn in to any angle from 0 to 180 degrees. It's angle is set using the connector on its top face.
logbox The logbox block has a display that can output numbers ranging from 0 to 9. The number it outputs its defined using the connector on its top face.

js.bit is supported by

Institute of Advanced Media Arts and Sciences

Special thanks to:

Suzuki Nobuya, Nakamura Shinya, Yamaguchi Aina

Ichino Masahiro, Osawa Satoru,

Miyano Yuji, Tanaka Shougo

For helping in the making of the 2nd run of js.bit devices.

Also thanks to Miyatake Takayuki for taking the photos and Tania Cortes for illustrating the blocks.


February, 2015

Japan, Mexico