I’ve built my grid by creating for loops which works fine if I wanted it to be static, but if I should animate each rectangle within a grid like this (see below) I think there must be another way to achieve this - I just don’t know where to start? Any help would be greatly appreciated!
let colNb = 8;
let rowNb = 6;
function setup() {
createCanvas(windowWidth, windowHeight);
}
function draw() {
background(0);
for (let i = 0; i < rowNb; i++) {
drawRow(i);
}
}
function drawRow(lvl) {
let patternNb = pow(2, lvl);
let w = width / patternNb;
let h = height / patternNb;
for (let i = 0; i < patternNb; i++) {
drawGradient(w, h, i);
}
}
function drawGradient(w, h, idx) {
let colWidth = w / colNb;
let gradStep = 255 / colNb + 8;
for (let i = 0; i < colNb; i++) {
fill(255 - i * gradStep);
noStroke();
rect(idx * w + i * colWidth, height - h, colWidth, h);
}
}
function windowResized() {
resizeCanvas(windowWidth,windowHeight);
}
Haha, yeah… Couldn’t really get it to work the way I wanted So I just wanted to see if there were any other options to achieve this way of animating the grid.
I’m fairly new here so I didn’t know if it was best to just continue in the other thread or start a new one?
I think you should use the recursive approach in order to animate this. Last time I tried to do an animation with the code I wrote and it worked well (I can’t find it anymore )
Basically if you change the width of one pattern, then the child patterns need to split that width in half and etc… with the recursive approach, you pass the width to another function call so it’s “inheriting” that value.
On the other side, with an iterating approach you need to determine the depth of the pattern and then position it accordingly which can be cumbersome
function setup() {
createCanvas(800, 800);
}
function draw() {
background(0);
let move = noise(frameCount * 0.004) * 25;
function gradient(x, y, w, h, nBands, depth) {
// If we are at the end, stop
if (depth === 0) return;
const bandWidth = w / nBands;
// Draw rectangles with gradient
for (let i = 0; i < nBands; i++) {
// Compute x position and color
const rectX = x + i * bandWidth;
const col = color(map(i, 0, nBands - 1, 255, 0));
// Display the rectangle
fill(col);
noStroke();
rect(rectX, y, bandWidth, h);
}
// Recursive call to next gradients
const nextHeight = h * 0.7;
gradient(x, y + h, w / 2, nextHeight, nBands, depth - 1);
gradient(x + w / 2, y + h, w / 2, nextHeight, nBands, depth - 1);
}
// Recursively draw gradients with a depth of 7
gradient(0, 0, width, height / 3 + move * 2, 8 + move/2, 7);
}
But if I wanted to animate the height of each band separately how would I go about this?
Somehow let each height of each rectangle change with a sin() function (see website | tutorials | trigonometry). The angle changes over time. Angle must be different for each rect.
So I just wanted to see if there were any other options to achieve this way of animating the grid.
)
: