Processing Evolved

    let angle = 0;
let distance = 100;
let distanceIncrement = 0.5;

function setup() {
    let canvas = createCanvas(600, 600, WEBGL);
    canvas.parent('animation-holder');
    resizeAnimation();
}

function draw() {
    background(150);
    
    // Red square
    fill(255, 0, 0);
    square(-50, -50, 100);
    
    // Green circle 1
    fill(0, 255, 0);
    let green1X = cos(angle) * distance;
    let green1Y = sin(angle) * distance;
    translate(green1X, green1Y);
    circle(0, 0, 100);
    
    // Green circle 2
    fill(0, 255, 0);
    let green2X = cos(angle + 2*PI/3) * distance;
    let green2Y = sin(angle + 2*PI/3) * distance;
    translate(green2X, green2Y);
    circle(0, 0, 100);
    
    // Green circle 3
    fill(0, 255, 0);
    let green3X = cos(angle + 4*PI/3) * distance;
    let green3Y = sin(angle + 4*PI/3) * distance;
    translate(green3X, green3Y);
    circle(0, 0, 100);
    
    // Blue circle
    fill(0, 0, 255);
    let blueX = cos(angle + PI) * distance;
    let blueY = sin(angle + PI) * distance;
    translate(blueX, blueY);
    circle(0, 0, 100);
    
    angle += 0.03;
    distance += distanceIncrement;
}