Fadecandy + Node.js = LED Art with JavaScript

Nodebots Hack Night {2015-002}

Hi, I'm Amy.

Twitter: @am3thyst

Email: amy (at) amycheng.info

The Arduino Way

Initialize NeoPixel library

...map LED to pin

...turn pin on and off

The Fadecandy way

Start Fadecandy Server

...start open pixel server

...map LED(s) to pixels

...draw to pixels

..either using Processing, Node.js, C++ and more

Fadecandy Pros

• multiple languages supported
• control LOTS of LEDS with minimal code
• hardware magic

Fadecandy Cons

• can't run code on the Fadecandy itself

More technical info:

http://www.misc.name/easier-and-tastier-led-art-with-fadecandy/

Let's get started

1. Get a Fadecandy and some WS2812 LEDS (aka NeoPixels)
2. Download the Fadecandy library: https://github.com/scanlime/fadecandy
3. Run the server
4. Write some code!

Fadecandy with Node.js

Mapping Pixels

Use models

Do it (manually)

Visual model versus a mental/abstract model

Example: setting pixels "manually"

This example is included in the Fadecandy git repo

#!/usr/bin/env node

// Simple red/blue fade with Node and opc.js

var OPC = new require('./opc')
var client = new OPC('localhost', 7890);

function draw() {
	var millis = new Date().getTime();

	for (var pixel = 0; pixel < 512; pixel++)
	{
		var t = pixel * 0.2 + millis * 0.002;
		var red = 128 + 96 * Math.sin(t);
		var green = 128 + 96 * Math.sin(t + 0.1);
		var blue = 128 + 96 * Math.sin(t + 0.3);

		client.setPixel(pixel, red, green, blue);
	}
	client.writePixels();
}

setInterval(draw, 30);


			

Example: using an abstract model

This example can be found in the Fadecandy git repo.

				
					#!/usr/bin/env node

// Simple particle system example with Node and opc.js
// Specify a layout file on the command line, or use the default (grid32x16z)

var OPC = new require('./opc');
var model = OPC.loadModel(process.argv[2] || '../layouts/grid32x16z.json');
var client = new OPC('localhost', 7890);

function draw() {

    var time = 0.009 * new Date().getTime();
    var numParticles = 200;
    var particles = [];

    for (var i = 0; i < numParticles; i++) {
        var s = i / numParticles;

        var radius = 0.2 + 1.5 * s;
        var theta = time + 0.04 * i;
        var x = radius * Math.cos(theta);
        var y = radius * Math.sin(theta + 10.0 * Math.sin(theta * 0.15));
        var hue = time * 0.01 + s * 0.2;

        particles[i] = {
            point: [x, 0, y],
            intensity: 0.2 * s,
            falloff: 60,
            color: OPC.hsv(hue, 0.5, 0.8)
        };
    }

    client.mapParticles(particles, model);
}

setInterval(draw, 10);

				
			

Let's get hacking!!!

Amy Cheng

@am3thyst

amy@amycheng.info