Make Every Week: JavaScript + Arduino

JavaScript is the code that drives bells and whistles you see on almost any web page.

This week I used it to drive lights and motors on a table. And it was surprisingly easy.

Hello, Johnny

The key ingredient is a bushel of code called Johnny-Five, which pairs Arduino with the node.js flavor of JavaScript.

Johnny-Five was built by Rick Waldron at the great coding/design shop Bocoup. I was fortunate to attend a hands-on workshop taught by Waldron and Francis Gulotta this week and finally played with Johnny-Five. Their slides are here, and include install instructions, beginner’s code and wiring diagrams. There’s also great documentation here.

I followed along and was quickly lighting LEDs, running servos and taking sensor readings. (My code is here.)

Clarifying Code

The promise was clear and true: If you understand even basic JavaScript – I’m still a beginner – Johnny-Five makes physical computing crazy-easy. There’s a deep library of functions to help you do physical things like flash a light, move a motor and read a temperature sensor.

Consider the instructions behind the video at the top of this post:

  • When a button is pushed, turn the LED on.
  • If someone holds the button down, flash the LED.
  • When the button is released, turn the LED off.

I’ve struggled to write Arduino code to do just this – in one case, to put the Monthly Mood Cube into “set” mode. And by struggle, I mean a whole-afternoon of trial and error.

Here’s how you do it with JavaScript, using Johnny-Five:

Even if you don’t understand a lick of JavaScript, you can see what's going on. And this is faaaar easier than what I tried to pull off.

Getting Started

So, to get started playing with Johnny-Five, here’s what I did:

  • I already have node.js installed on my Mac; I would have had to install it if not.
  • In the Terminal program, I made a new directory and moved into it: 
    mkdir nodebot
cd nodebot

  • Installed Johnny-Five 
    npm install johnny-five --save
  • Connected my Arduino Uno to my laptop with a USB cable
  • Fired up the Arduino software on my laptop
  • Opened the “StandardFirmata” sketch, which comes with the Arduino software under File > Examples > Firmata > StandardFirmata
  • Sent that sketch to the board, using the arrow button at the top of the sketch window
  • On my Arduino, I stuck an LED to GND and Digital 11 (short leg goes into Ground)
  • Back in Terminal, I wrote the following code using my text editor (I use Textmate) …

  • … and saved it as blink.js
  • In the Terminal, I ran it like this: 
    node blink.js
  • And the LED blinked!
  • (You stop the process in the Terminal by pressing CTRL-C twice)
  • Again, there are many more functions and examples here.

Unexpected Discovery #1: The Leash

With Arduino code, I write it on my laptop, push it over to the Arduino and it runs over there, in the Arduino’s brain. This is nice because I can disconnect the Arduino from the computer, power it with a battery, and it’ll keep working – handy if you want to make, say, a portable sensor.

But Johnny-Five code runs in your computer’s brain and sends “do this” and “do that” commands to the Arduino. The Arduino does no thinking of its own, so it must remain tethered to the computer. The Arduino runs only a sketch, called “Standard Firmata,” that responds to commands from the mother ship.

Running the code on the computer makes Johnny-Five super powerful, not limited by the Arduino’s tiny brain. But it also seems unfortunate to tie a robot or sensor to a computer.

Fortunately, there are now JavaScript-capable computers like Raspberry Pi and, soon, Tessel 2 that fit in the palm of your hand. Once I'm ready to take Johnny-Five on the road, I’ll be checking those out.

Unexpected Discovery 2: I Get It

Friend Liza Stark says she learns to code best when she’s coding physical things. That just happened to me.

As a kid, I learned how to code in a very sequential, step-by-step way:

10 DO SOMETHING
20 WHEN THAT'S DONE DO SOMETHING ELSE
30 COOL, NOW IF X IS TRUE, BE AWESOME

And sometimes, loop that. 

40 GOTO 10

Arduino code is like this. For the most part, it's sequential and just loops forever.

JavaScript doesn't run that way. Pretty much everything happens at the same time, all the time, and it's always sitting there listening for changes. More like:

Keep Doing Something while you also Do Something Else and if X happens to be true at any given moment, then Be Awesome in response.

I understand this conceptually, but never really get it.

While watching JavaScript essentially listen to physical buttons and dials and then respond so quickly, either on the screen or on the Arduino ... it just clicked.

And for me, it clicked more convincingly than pushing a button on a website.


#MakeEveryWeek is a challenge to myself to do just that for all of 2015. The original post on the idea is here, and the running list of projects is here.