Addressable RGB LED Art Project

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.