I am currently trying to create a grid of tiles in PROCESSING.... and I want each tile to appear after the other. (First row, left to right, second row, left to right and so on).... I get it to make each row of tiles appear one by one by a combination of frameCount and modulo in the nested loop.... but how to let each tile appear after another? I've tried using the same method on the x-axis loop - this makes the grid appear from LEFT/UP to RIGHT/DOWN.... I tried changing the frameCount by multiplying times 10.... but this doesn't seem to be the correct maths.... do I need to use a conditional statement on one of the loops? Like if tiles is equal times round second row, third and so on? This is what I came up with so far:
void setup() {
size(500, 500);
}
void draw() {
background(255);
rectMode(CENTER);
float tiles = 10;
float tileSize = width/tiles;
translate(tileSize/2, tileSize/2);
for (int x = 0; x < tiles; x++) {
for (int y = 0; y < frameCount/tiles % tiles; y++) {
fill(0, 255, 0);
rect(x*tileSize, y*tileSize, tileSize, tileSize);
}
}
}
Thank you for any kind of help or hint!
My Processing is broken for some reason, you can past the following code to the p5js online editor
Is this what you want?
function setup() {
createCanvas(400, 400);
}
function draw() {
background(220);
let tiles = 10;
let tileSize = width/tiles;
for(let y = 0; y < tiles; y++){
for(let x = 0; x < tiles; x++){
if(x + 10*y < frameCount)
rect(x*tileSize, y*tileSize, tileSize, tileSize)
}
}
}