Processing Evolved

    let angle = 0;
let distance = 100;
let greenSize = 100;
let greenGrowth = 1;
let balls = [];

function setup() {
    let canvas = createCanvas(600, 600, WEBGL);
    canvas.parent('animation-holder');
    resizeAnimation();
    resizeAnimation();
    for (let i = 0; i < 50; i++) {
        balls.push({
            x: random(-width/2, width/2),
            y: random(-height/2, height/2),
            z: random(-200, 200),
            size: random(10, 50),
            color: color(random(255), random(255), random(255))
        });
    }
}

function draw() {
    background(150);
    
    // Red square
    fill(255, 0, 0);
    square(-50, -50, 100);
    
    // Green circle
    let greenColor = color(0, 255 * (1 - greenSize / 200), 0);
    fill(greenColor);
    let greenX = cos(angle) * distance;
    let greenY = sin(angle) * distance;
    translate(greenX, greenY);
    sphere(greenSize);
    greenSize += greenGrowth;
    if (greenSize > 200 || greenSize < 100) {
        greenGrowth *= -1;
    }
    
    // Blue circle
    fill(0, 0, 255);
    let blueX = cos(angle + PI) * distance;
    let blueY = sin(angle + PI) * distance;
    translate(blueX, blueY);
    sphere(100);
    
    // Additional balls
    for (let i = 0; i < balls.length; i++) {
        let ball = balls[i];
        push();
        translate(ball.x, ball.y, ball.z);
        fill(ball.color);
        sphere(ball.size);
        pop();
    }
    
    angle += 0.03;
}