Now your hardware is ready! Let's try it out.
Once you see your controller, try turning on your LEDs. We'll start with 50% brightness, since full brightness is extremely bright!
- If you don't still have fcserver running from earlier, start it.
- Plug power into your LEDs
- Plug the Fadecandy Controller into your computer with a Micro USB cable
- Open your web browser to http://localhost:7890
Once you see your controller, try turning on your LEDs. We'll start with 50% brightness, since full brightness is extremely bright!
At this point, you should see your LEDs quickly fade on. Hurray. Now for something more interactive:
- Open Processing
- File -> Open
- Navigate to the processing folder inside the examples folder from the Fadecandy package.
- Open grid8x8_dot.pde, inside the grid8x8_dot folder.
- Press the Run button, in the top-left of the window.
The large orange glowing dot follows your mouse. Each of the tiny single-pixel dots represents one of your 64 LEDs. With Fadecandy's Processing library, it's easy to create effects that draw to the screen and sample specific on-screen pixels for each LED.
As you move your mouse around the window, the dot follows along on your NeoMatrix.
As you move your mouse around the window, the dot follows along on your NeoMatrix.
You can see the code for this example in the Processing window:
OPC opc;
PImage dot;
void setup()
{
size(640, 360);
// Load a sample image
dot = loadImage("dot.png");
// Connect to the local instance of fcserver
opc = new OPC(this, "127.0.0.1", 7890);
// Map an 8x8 grid of LEDs to the center of the window
opc.ledGrid8x8(0, width/2, height/2, height / 12.0, 0, false);
}
void draw()
{
background(0);
// Draw the image, centered at the mouse location
float dotSize = height * 0.7;
image(dot, mouseX - dotSize/2, mouseY - dotSize/2, dotSize, dotSize);
}
If you need a refresher on Processing syntax, be sure to keep the reference handy. The OPC object we're using is the Open Pixel Control client that comes with Fadecandy. There's a reference for OPC.pde in Fadecandy's documentation.
If you've never used Processing, this may be a good time to work through some of the Processing Tutorials. When you're ready, try modifying this example. Can you make the dot change size? Can you make it move on its own?
When you're done with grid8x8_dot, load the grid8x8_orbits example. We'll be needing it in the next section.
If you've never used Processing, this may be a good time to work through some of the Processing Tutorials. When you're ready, try modifying this example. Can you make the dot change size? Can you make it move on its own?
When you're done with grid8x8_dot, load the grid8x8_orbits example. We'll be needing it in the next section.
This example also uses images, but this time it uses two of them blended together. The vertical position of the mouse in the window changes the size of the orbiting dots, and they spin on their own at a fixed rate.
