Getting Bitwise with JavaScript

00000001 // 1 — truthy, so LED 7 is ON

Throw in the iteration from 0 to 255, a timeout, and some Johnny Five code, and we end up with this:

Part 2: Learning to Write

If all we wanted to do was count from 0 to 255 in blinking lights, then the best we can say about bitwise operators is that they save us a few lines. A few days after I got the LEDs blinking, I saw this code for making a two-line liquid crystal display (LCD) work with Johnny Five.

This code was using an array-based approach for sending bits, but from my experience with the LEDs and the shift register, I thought that a bitwise approach might make more sense. Over the course of a few days of working with Andreas Haugstrup and Rick to develop a full API for LCDs in Johnny Five, I got to understand bitwise operations a whole lot better.

As you can imagine, an LCD is a lot more complex than an LED. Instead of simply turning it on or off, you tell it what to do — which character to display next, whether to show the cursor, whether to blink the cursor, where to write the next character — by sending a number between 0 and 255 as eight bits of data. Sound familiar?

Indeed, we already know from the LED example how to send a number between 0 and 255 as eight bits of data. The standard set of ASCII characters take up the numbers 32-127, but that leaves us the numbers 0-31 and 128-255 for commands.

Some of the commands we need to send to our LCD are actually combinations of instructions. For example, if we want to position the cursor somewhere on the LCD, we need to send a single command that says both “we want to position the cursor” and “this is where we want to put it.” Unlike in JavaScript, we can only send a single argument: a number between 0 and 255. The bitwise OR operator, |, provides a way to send several pieces of information in that single number.

Let’s look at the Johnny Five method that sets the cursor position:

LCD.prototype.setCursor = function( col, row ) {
  var rowOffsets = [ 0x00, 0x40, 0x14, 0x54 ];
  this.command( LCD.SETDDRAMADDR | ( rowOffsets[ row ] + col ) );

  return this;
};

(If you need a refresher on hexadecimal numbers like 0x00, you’re probably not alone.)

The bitwise OR operator looks at the binary representation of two numbers and returns a number that represents the bits that are “on” in either of the two numbers.

For example, consider again the numbers 9 and 128. If you look at the setCursor method above, the value 9 is what we’d end up with for rowOffsets[ row ] + col if we wanted to position the cursor in the first row (0x00) at the 10th column. The value of LCD.SETDDRAMADDR happens to be 0x80, which is 128. In binary, these two numbers look like this:

When we combine these two values using |, we arrive at a single number that we can send as a command to the LCD to tell it to put the cursor in the tenth column of the first row:

  10000000  // 128 (LCD.SETDDRAMADDR)
| 00001001  // 9 (row 0 + col 9, eg. 0x00 + 9)
__________________
  10001001  // 137

We can send other numbers to put the cursor elsewhere, to make the cursor blink, to turn the LCD on and off, and, most importantly, to write characters to the screen. Understanding and using bitwise operators makes all of it quite straightforward — much moreso than with an array-based approach — and after a few days of work, Johnny Five now supports the same LCD features as the C-based API.

More Bitwise Fun

The Mozilla Developer Network has incredible documentation about all of the bitwise operators, and more discussion and examples of how they can be used.

If you’ve ever wondered why you can do ~myArray.indexOf(targetVal) and get a useful boolean, pay special attention to the discussion of the bitwise NOT operator ~, which flips the bits of the binary representation of a number, and to the discussion of signed 32-bit integers, where you’ll learn that -1 is represented in binary as 32 1’s in a row. Flipping the binary bits of -1 (the value returned by indexOf when an item is not found in an array) returns 0, a falsy value. Flipping the bits of any value that indicates an item was found in an array will return a truthy value.

Want to learn more about how LCDs work? Read all about LCD addressing — that is, how the chip that controls an LCD interprets the binary commands it receives.

Finally, I’ve put together a JSBin that simulates the fun you can have with LEDs and bitwise operators. It’s a fun way to see some of what we’ve covered in this post without having to wire up an Arduino:

JS Bin

That said: if you like JavaScript, you should get an Arduino, and you should build things with Johnny Five. Rick said it best with his initial encouragement to me: as people who make things on computer screens all day, it’s incredibly cool the first time you make an LED light up in the real world. I haven’t had this much fun with JavaScript — or poked in so many of its nooks and crannies — in a long time.