Arrays and tile based animations

Curious as to how this might be done using Processing: learn.adafruit.com/trinket-slash-gemma-space-invader-pendant?view=all

I am capable of defining the array and generating the drawing but can't figure out how to "animate" within the array. If I was doing this with the Arduino I'd set a delay and then the next grouping of 8 rows within the array... ideas as to where I could look for answers? Thanks!—this is just a for fun project.

int tile = 25;

color[] crayon = {
  color(0, 0, 0), 
  color(255, 255, 255)
};

int[][] tileArray =  {
  {0, 0, 1, 1, 1, 1, 0, 0}, 
  {0, 1, 0, 0, 0, 0, 1, 0}, 
  {1, 0, 1, 0, 0, 1, 0, 1}, 
  {1, 0, 0, 0, 0, 0, 0, 1}, 
  {1, 0, 1, 0, 0, 1, 0, 1}, 
  {1, 0, 0, 1, 1, 0, 0, 1}, 
  {0, 1, 0, 0, 0, 0, 1, 0}, 
  {0, 0, 1, 1, 1, 1, 0, 0}
};

void setup() {
  size(tileArray.length * tile, tileArray.length * tile);
}

void draw() {

  //this nested for loop will build and color each "LED"
  for (int rows = 0; rows < 8; rows++) {
    for (int cols = 0; cols < 8; cols++) {

      if (tileArray[cols][rows] == 0) {
        fill(crayon[0]);
      }
      else {
        fill(crayon[1]);
      }

      rect(rows * tile, cols * tile, tile, tile);
    }
  }
}

Answers

  • use two (or more) arrays, swap between them. would mean a 3d array where first index is the animation frame to display.

    (i'd define the pixels as bits rather than ints - it's a bit trickier to get to individual pixels but would mean i could remove a dimension from the arrays)

  • Having a 3d array makes sense... I'll give that a go!

    I'll also look into using bits and report back.

    Thank you for the suggestion!

  • edited October 2013

    Thanks for the suggestions, koogs!

    I've eliminated the for loops and gone with a series of if statements. I also modified the array so that I might not need to use a 3d array. As is, draw cycles thought the array showing each 2d array.

    Issues... 1. I want to find a way to not show the drawing of each rect but instead process and then display... ideas?

    1. I am not dynamically defining the number of frames.. kept getting a out of bounds when referring to the 2d array length.

    2. On this line: else if (tileY < (7 * tileSize)) { The value 7 should refer to the number of tileCols but 8 tosses an error.. I think I can resolve this one.

      int tileSize = 25;
      int tileX = 0;
      int tileY= 0;
      int tileCols = 8;
      int currentTile = 0;
      int frame = 0;
      int currentFrame = 0;
      int numFrames = 2;
      int cols = 0;
      
      color[] crayon = {
        color(0, 0, 0), 
        color(255, 255, 255)
      };
      
      byte[][] tileArray = {
        {
          0, 0, 1, 1, 1, 1, 0, 0, 
          0, 1, 0, 0, 0, 0, 1, 0, 
          1, 0, 1, 0, 0, 1, 0, 1, 
          1, 0, 0, 0, 0, 0, 0, 1, 
          1, 0, 1, 0, 0, 1, 0, 1, 
          1, 0, 0, 1, 1, 0, 0, 1, 
          0, 1, 0, 0, 0, 0, 1, 0, 
          0, 0, 1, 1, 1, 1, 0, 0
        }
        , 
      
        {
          0, 0, 1, 1, 1, 1, 0, 0, 
          0, 1, 0, 0, 0, 0, 1, 0, 
          1, 0, 1, 0, 0, 1, 0, 1, 
          1, 0, 0, 0, 0, 0, 0, 1, 
          1, 0, 0, 1, 1, 0, 0, 1, 
          1, 0, 1, 0, 0, 1, 0, 1, 
          0, 1, 0, 0, 0, 0, 1, 0, 
          0, 0, 1, 1, 1, 1, 0, 0
        }
        , 
        {
          0, 0, 1, 1, 1, 1, 0, 0, 
          0, 1, 0, 0, 0, 0, 1, 0, 
          1, 0, 1, 0, 0, 1, 0, 1, 
          1, 0, 0, 0, 0, 0, 0, 1, 
          1, 0, 1, 1, 1, 1, 0, 1, 
          1, 0, 0, 1, 1, 0, 0, 1, 
          0, 1, 0, 0, 0, 0, 1, 0, 
          0, 0, 1, 1, 1, 1, 0, 0
        }
      };
      
      void setup() {
        // size(tileArray[0].length/8 * tile, tileArray[0].length/8 * tile);
        size(500, 500);
        frameRate(30);
      }
      
      void draw() {
      
        if (cols < tileCols) {
          tileX = currentTile * tileSize;
          currentTile++;
      
          switch(tileArray[currentFrame][cols]) {
          case 0 :
            fill(crayon[0]);
            break;
          case 1 :
            fill(crayon[1]);
            break;
          }
      
          cols++;
        }
        else if (tileY < (7 * tileSize)) {
          tileX = 0; 
          tileY = tileY + tileSize;
          tileCols += 8;
          currentTile = 0;
        } 
        else {
          tileX = 0 - tileSize;
          tileY = 0;
          cols = 0;
          tileCols = 8;
          currentTile = 0;
      
          currentFrame++;
      
          if (currentFrame > numFrames) {
            currentFrame = 0;
          }
        }
      
        rect(tileX, tileY, tileSize, tileSize);
      }
      
  • Update!

    I wrapped everything in a for loop and now have the squares building all at once vs. each square showing until all 64 are drawn.

    Todo: 1. build in a delay. frameRate lets me slow down the animation but a delay would be ideal.. also, similar to the Arduino.

    1. make the piece more dynamic so that larger images can be processed

    Here is the updated code:

    int tileSize = 25;
    int margin = 5;
    int tileX = 0;
    int tileY= 0;
    int tileCols = 8;
    int currentTile = 0;
    int frame = 0;
    int currentFrame = 0;
    int numFrames = 2;
    int cols = 0;
    
    color[] crayon = {
      color(0, 0, 0), 
      color(255, 255, 255)
    };
    
    byte[][] tileArray = {
      {
        0, 0, 1, 1, 1, 1, 0, 0, 
        0, 1, 0, 0, 0, 0, 1, 0, 
        1, 0, 1, 0, 0, 1, 0, 1, 
        1, 0, 0, 0, 0, 0, 0, 1, 
        1, 0, 1, 0, 0, 1, 0, 1, 
        1, 0, 0, 1, 1, 0, 0, 1, 
        0, 1, 0, 0, 0, 0, 1, 0, 
        0, 0, 1, 1, 1, 1, 0, 0
      }
      , 
    
      {
        0, 0, 1, 1, 1, 1, 0, 0, 
        0, 1, 0, 0, 0, 0, 1, 0, 
        1, 0, 1, 0, 0, 1, 0, 1, 
        1, 0, 0, 0, 0, 0, 0, 1, 
        1, 0, 0, 1, 1, 0, 0, 1, 
        1, 0, 1, 0, 0, 1, 0, 1, 
        0, 1, 0, 0, 0, 0, 1, 0, 
        0, 0, 1, 1, 1, 1, 0, 0
      }
      , 
      {
        0, 0, 1, 1, 1, 1, 0, 0, 
        0, 1, 0, 0, 0, 0, 1, 0, 
        1, 0, 1, 0, 0, 1, 0, 1, 
        1, 0, 0, 0, 0, 0, 0, 1, 
        1, 0, 1, 1, 1, 1, 0, 1, 
        1, 0, 0, 1, 1, 0, 0, 1, 
        0, 1, 0, 0, 0, 0, 1, 0, 
        0, 0, 1, 1, 1, 1, 0, 0
      }
    };
    
    void setup() {
      // size(tileArray[0].length/8 * tile, tileArray[0].length/8 * tile);
      size(500, 500);
      frameRate(12);
    }
    
    void draw() {  
      translate(width/2 - (tileSize * 8) / 2, height/2  - (tileSize * 8) / 2);
    
      stroke(255, 0, 0);
      line(-width, 0, width, 0);
      line(0, -height, 0, height);
    
      // noStroke();
      stroke(0);
    
      for (int i = 0; i < tileCols; i++) {
    
        if (cols < tileCols) {
          tileX = currentTile * tileSize;
          currentTile++;
    
          switch(tileArray[currentFrame][cols]) {
          case 0 :
            fill(crayon[0]);
            break;
          case 1 :
            fill(crayon[1]);
            break;
          }
    
          cols++;
        }
        else if (tileY < (7 * tileSize)) {
          tileX = 0; 
          tileY = tileY + tileSize;
          tileCols += 8;
          currentTile = 0;
        } 
        else {
          tileX = 0;
          tileY = 0;
          cols = 0;
          tileCols = 8;
          currentTile = 0;
    
          currentFrame++;
    
          if (currentFrame > numFrames) {
            currentFrame = 0;
          }
        }
    
        rect(tileX, tileY, tileSize, tileSize);
      }
    }
    
Sign In or Register to comment.