# Addressable RGB LED Art Project

You are reading a single comment by @Gordon and its replies. Click here to read the full conversation.
• Not sure if this helps, but the array `rgb` is 75 elements - 25 LEDs, each of which need R, G and B... So it's like `R0,G0,B0,R1,G1,B1,R2,B2,G2,etc`

When you do `for (var i=0;i<rgb.length;i+=3)` you're saying:

• Start `i` off at 0
• Stop the loop when `i` is bigger than 75
• Each time around the loop, make `i` 3 bigger (R, G and B)

As you're controlling a grid of LEDs you might want to do something like this (assuming you have 5 LEDs down by 6 LEDs across):

``````var rgb = new Uint8Array(5*6*3);

function getPattern() {
var x,y,i = 0;
for (y=0;y<5;y++) {
for (x=0;x<6;x++) {
rgb[i++] = x*10;
rgb[i++] = y*10;
rgb[i++] = 0;
}
}
``````

That's a bit different, but the principle is the same. What happens is it loops over all the LEDs, but assumes they're in a grid, so you get X and Y coordinates. There's no `+3` because we now call `i++` (which adds 1 to `i`) 3 times each iteration.

@Loop's suggestion of using the graphics library is good though. There's another simple example for the RGB123 module, which is a pre-made grid of LEDs.

The two methods (Array vs Graphics Lib) are good at different things. Basically:

Array: Useful where you want to change the state of all LEDs at once - and specifically if you want to make the value of lights dependent on some mathematical function (like maybe a sine wave).

Graphics Lib: Where you want to draw bitmaps, rectangles, lines, and text. You can still access pixels individually, but it's not as fast.

@Gordon started