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.


Avatar for Gordon @Gordon started