Animating image tiles from the top to the bottom

Processing Coding Questions
1

Hi all,
I am new to Processing. I would like to implement an animation, in which an image is built from the bottom tile by tile.
I have a 1920x1080 pixels input image and I divided it in tiles (20 tiles per row and 20 tiles per column). Now, I would like to implement an animation in which, starting from most-bottom row, each tile with (x,y) coordinates in input image is shown moving from (x,0) to (x,y).
I wrote a Tile class in which i provide start and destination coordinates, the speed and the function to update the coordinates. Then, I created a Tile matrix in which every element is an instance of Tile and I tried to draw the animation. However, things did not go as I expected. Firstly, because tiles are shown from the first row to the last one; moreover, the output image is not built tile by tile, but row by row. Could anyone help me?
Thanks so much.

Here is the code.

class Tile { 
  int xPos, yPos, xD, yD; 
  int pW, pH;
  float speed;
  Tile (int startX, int startY, int dstX, int dstY, float s, int width, int height) {  
    xPos = startX;
    yPos = startY;
    
    xD = dstX;
    yD = dstY;
    
    pW = width;
    pH = height;
    
    speed = s; 
  } 
  void update() { 
    yPos += speed; 
    if (yPos > yD) { 
      yPos = yD; 
    } 
  }
  void display(){
    //print("xD=",xD, " yD=",yD,"\n");
    PImage onePiece = img.get(xD,yD, pieceW, pieceH);

    image(onePiece, xPos, yPos);
    
  }
} 

int w=1920, h=1080;
int nRows = 20, nCols = 20;
int currentPixelRow = h, currentPixelCol = 0;
int thisRow=0, thisCol=0;
int pieceW = 96, pieceH = 54;

int previousDisplayTime, deltaTime;
int drawX=0,drawY=h-pieceH;
  
PImage img,back;
PImage[][] segments = new PImage[nRows][nCols];

Tile[][] pieces;
 
void setup(){  

  pieces = getPieces();
  
  size(1920, 1080);
  frameRate(30);

  previousDisplayTime = 0;
  deltaTime = 1000;
}

void draw() {
  background(0);

  for(int i=0; i<nRows-1; i++){
    for(int j=0; j<nCols; j++){
      //print("i=",i," j=",j,"\n");

        pieces[i][j].update(); 
        pieces[i][j].display();              
    }
  }
} 

Tile[][] getPieces(){
  int lastRow=0, lastCol=0;
  int flag = 0;
  
  int i=0,j=0;

  pieces = new Tile[nRows][nCols];
  img  = loadImage("/home/dmc/Desktop/SMCV/res/models/anfi.png");
  
  for(i=0; i<nRows; i++){
       currentPixelRow = currentPixelRow-pieceH;
       currentPixelCol = 0;
       
       if(flag == 1){
         flag = 0;
         j=0;
       }
       
       while(j<nCols && flag==0){         
         lastCol = currentPixelCol+pieceW;
         if(lastCol >= w){
           lastCol = w;
           flag = 1;           
         }

         if(currentPixelRow <= 0){
           currentPixelRow = 0;
           flag = 2;           
         }

         print(" i=", i);
         print(" j=", j);
         print(" currentPixelCol=", currentPixelCol);
         print(" currentPixelRow=", currentPixelRow);
              
         print("\n");

         pieces[i][j] = new Tile(currentPixelCol, 0, currentPixelCol, currentPixelRow, 2.5, pieceW, pieceH);
             
         currentPixelCol = lastCol;
         j++;
     }
     print("\n");
   }
   return pieces;
}
1 Like
2

When you do this in a nested for loop (for... for...) you need to have for y... before for x....

3

here…

I put the class at the end of the sketch (just a convention)

I put as many variables in the function getTiles() as possible (instead of having them globally before setup())

also I made tilesLocal as an array within the function getTiles(), because otherwise you would change the global 2D array.

fixed some minor glitches

made start y position and speed both random

I marked some interesting spots with ???

Chrisir

// https://discourse.processing.org/t/animating-image-tiles-from-the-top-to-the-bottom/14375

int nRows = 20, nCols = 20;

Tile[][] pieces;

//------------------------------------------------------------------------------

void setup() {
  size(920, 680); // 1920 and 1080 // ???????????????????????????????
  pieces = getPieces();
  frameRate(30);
}

void draw() {
  background(0);

  for (int j=0; j<nCols; j++) {
    for (int i=0; i<nRows; i++) {
      pieces[i][j].update(); 
      pieces[i][j].display();
    }
  }
} 

//----------------------------------------------------------------------------

Tile[][] getPieces() {

  // make 2D array 

  int currentPixelRow, currentPixelCol;// we overwrite this !!!!!!!!!!!!!!!!!!!!!!!!!!!!!!! ????????????????????????????????????????????????

  int pieceW = 96, pieceH = 54;// we overwrite this !!!!!!!!!!!!!!!!!!!!!!!!!!!!!!! ????????????????????????????????????????????????

  PImage img;

  Tile[][] piecesLocal; // !!!!!!!!!!!!!!!!!!!!!!!!!!????????????????????????????????? 

  int lastCol=0;

  int  w=width;
  int  h=height; 

  pieceW = w / nCols;
  pieceH = h / nRows;

  piecesLocal = new Tile[nRows][nCols];

  img  = loadImage("IMG_3002.JPG");   // ??????????????????????????????????????????????????
  img.resize(width, height);          // ??????????????????????????????????????????????????

  currentPixelRow = 0; 

  for (int i=0; i<nRows; i++) {

    currentPixelCol = 0;
    lastCol = 0;

    for (int j=0; j<nCols; j++) {

      lastCol = currentPixelCol+pieceW;

      print(" i=", i);
      print(" j=", j);
      print(" currentPixelCol=", currentPixelCol);
      print(" currentPixelRow=", currentPixelRow);

      print("\n");

      piecesLocal[i][j] = new Tile(currentPixelCol, int(random(-84, -33)), // random(-84.... is new 
        currentPixelCol, currentPixelRow, 
        random( 2.5, 9.6), // !!!?????
        pieceW, pieceH, 
        img);//????? !!!!!

      currentPixelCol = lastCol;
    }
    currentPixelRow += pieceH;

    print("\n");
  }
  //
  return piecesLocal;
}

//=====================================================================================================

class Tile { 

  int xPos, yPos, // pos start 
    xD, yD;    // pos target
  int pW, pH;   // size 
  float speed;

  PImage onePiece ;

  // constr 
  Tile (int startX, int startY, 
    int dstX, int dstY, 
    float s1, 
    int width1, int height1, 
    PImage img) {  
    // constr 
    xPos = startX;
    yPos = startY;

    xD = dstX;
    yD = dstY;

    pW = width1;
    pH = height1;

    speed = s1;

    onePiece= img.get(xD, yD, pW, pH);// !!!! ????????????????????
  }// constr  

  void update() { 
    // move 
    yPos += speed; 
    if (yPos > yD) { 
      yPos = yD;
    }
  }

  void display() {
    image(onePiece, xPos, yPos);
  }
} 
//
1 Like
4

Welcome to the forum! Great to have you here.

When posting code: Please select code section and click </> in the small command bar.

(something went wrong in your post, you have > in front of each line)