Love 8-bits? Bring your Pixel Art to life

In case you haven't noticed our Pixel Kit is made of individual LED lights called pixels. Each of these can be controlled through code but we thought that some of you might want to control them with the joystick and the buttons the Pixel Kit comes with.

So here's the Pixel Art editor project for the Pixel Kit. You can draw your own creations, change colors, erase and draw it again. The project is available on Kano Code and you can inspect the full code here.

You control a little blinking cursor that can be moved with the joystick, you can use the A button (the one to the left) to paint and the B button to change color. Paint over an already lit pixel to delete it.

Let's have a quick overview of the code.

Set the colors

As with every pixel kit project, get yourself some colors, define them on a list for later. We're calling the list just colors. This is the list of colors that you'll be able to use to paint once the project is finished. Get wild here!

Know your variables

When you start your app, you want to save some numbers on what we call variables. This is the name we give to values that can change over time. In our case we define a bunch of them, including the position of the painting cursor (cursorx & cursory), the size of the pixel board (board__width & board__height) plus another one to switch through the list of colors in order (colorindex). Then we calculate the number of pixels on the board, 128, and save that on another variable (boardsize).

The key here is that we will think of the board as a very long line of 128 pixels, rather than as a grid of 8x16, when it comes to drawing pixels on it. For this reason we now define 2 other list variables (pixel_status & pixel_colors) of 128 elements long that will keep information about whether or not a pixel is on (the lists keeps an 1 or a 0), and if it's on, which color it should have.

Clean it up!

We have set up our variables, so we are ready to start painting. One key part of the drawing process is to clean up the trail of the cursor, so once you move it you can see where it's going, but not where it's coming from. For this reason we clean up ALL the lights in the board every 500 miliseconds.

You can adjust this value to your liking, so the flickering of the LEDs diminishes.

Loop loop loop

The part of the app where we draw the lights is the meaty one. We have a loop that repeats itself every 500 milliseconds (you want to keep this on par with the previous clean timing). Every time it goes through the entire board of 128 lights, checks whether or not each of the lights is on, if it's on it checks the color and decides if it that light needs to be turned on or off.

The very long blue and yellow line is how we access the pixels on the grid by thinking of them as a very long, consecutive, strip of 128 lights. We use the row number of each light to shift to the right on this strip and the column to identify the precise light.

Interactivity ahead!

Using the other events we can control from the board, we define that whenever the D-pad is pressed on any direction, the cursor will move (adjust it's x and y position on the grid, accordingly). We also make sure the cursor doesn't go out of bounds!

Then we do the same for the A button. When we press it, we want the lists to be updated, saving a 1 or a 0 on the pixel__status and the current color on the pixel__color lists, respectively.

Finally, once you press the B button, we want to change the current color to the next in the list of colors. If we've reached the end of the list, let's go back to the first one again.

And that's it, enjoy creating your own pixel art!

More from David Ortiz