› › ›

Arrays and tile based animations

GlugalumpGlugalump
edited October 2013 in Questions about Code

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);
    }
  }
}
Tagged:

Answers

  • koogskoogs

    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)

  • GlugalumpGlugalump

    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!

  • GlugalumpGlugalump
    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);
}
  • GlugalumpGlugalump

    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.