Creating visual iterations using nested arrays in Processing can produce intriguing results. In this experiment, I generated a grid of evenly spaced circles that increase in size and change color based on the mouse cursor’s position along the X-axis—producing visually appealing and dynamic effects with just a few lines of code.

Also with the help of GeminiAI managed use the gif library to export as a .gif, although its is worth mentioning that the resource consumption of CPU increases a lot.

import gifAnimation.*;

GifMaker gifExport;

int totalFrames = 60;
int currentFrame = 0;

void setup() {
size(800, 800);
noStroke();
gifExport = new GifMaker(this, “out.gif”);
gifExport.setRepeat(0);
gifExport.setQuality(10);
gifExport.setDelay(33);
}

void draw() {
background(0, 0, 0);
float time = currentFrame * 0.05;
for (int x = 0; x < width; x += 20) {
for (int y = 0; y < height; y += 20) {
float offsetX = sin(time + x * 0.05) * 10;
float offsetY = cos(time + y * 0.05) * 10;
float sizeVariation = 30 + 5 * sin(time * 2 + (x + y) * 0.01);
float r = 200 + 55 * sin(time + x * 0.01);
float g = 200 + 55 * sin(time + y * 0.01 + PI / 3);
float b = 200 + 55 * sin(time + (x + y) * 0.01 + PI / 2);
fill(r, g, b, 180);
ellipse(x + offsetX, y + offsetY, sizeVariation, sizeVariation);
}
}

gifExport.addFrame();
currentFrame++;
if (currentFrame >= totalFrames) {
gifExport.finish();
println(“GIF saved!”);
noLoop();
}
}