function setup() {
let canvas = createCanvas(600, 600, WEBGL);
canvas.parent('animation-holder');
resizeAnimation();
}
let cubes = [];
let circles = [];
let gridResolution = 5;
function mouseClicked() {
gridResolution = floor(random(2, 11));
}
function draw() {
background(255, 204, 0, 255);
strokeWeight(5);
translate(-300, -300);
for (let i = 0; i < gridResolution * gridResolution; i++) {
let x = (i % gridResolution) * (600 / gridResolution);
let y = Math.floor(i / gridResolution) * (600 / gridResolution);
let z = noise(frameCount * 0.01 + i * 0.1) * 200 - 100;
let displacement = noise(frameCount * 0.01 + i * 0.2) * 100 - 50;
let rotationX = noise(frameCount * 0.01 + i * 0.3) * TWO_PI;
let rotationY = noise(frameCount * 0.01 + i * 0.4) * TWO_PI;
let rotationZ = noise(frameCount * 0.01 + i * 0.5) * TWO_PI;
push();
translate(x + displacement, y + displacement, z + displacement);
rotateX(rotationX);
rotateY(rotationY);
rotateZ(rotationZ);
let colorValue = sin(frameCount * 0.05 + i * 0.1) * 127 + 128;
fill(255, colorValue * 0.8, 0, 255);
let boxSize = 35 + noise(frameCount * 0.01 + i * 0.2) * 15 + sin(frameCount * 0.05 + i * 0.1) * 15;
box(-boxSize / 2, -boxSize / 2, boxSize * 2);
push();
fill(255, 0, 0, 255);
ellipse(0, 0, 10 + noise(frameCount * 0.01 + i * 0.1) * 20 + sin(frameCount * 0.02 + i * 0.2) * 10);
pop();
pop();
}
for (let i = 0; i < 20; i++) {
let circleX = noise(frameCount * 0.01 + i * 0.2) * 400 - 200;
let circleY = noise(frameCount * 0.01 + i * 0.3) * 400 - 200;
let circleZ = noise(frameCount * 0.01 + i * 0.4) * 400 - 200;
push();
translate(circleX, circleY, circleZ);
stroke(0, 255);
fill(255, 255);
ellipse(0, 0, 25 + noise(frameCount * 0.01 + i * 0.1) * 50 + sin(frameCount * 0.02 + i * 0.3) * 25);
pop();
}
}