Processing Evolved

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

    function draw() {
        background(150);
        translate(0, 0, -100);
        rotateX(frameCount * -0.01);
        rotateY(frameCount * -0.01);
        rotateZ(frameCount * 0.01); // Spin the cube along its z axis
        push();
        fill(255);
        let boxSize = 100 + 50 * sin(frameCount * 0.05);
        box(boxSize);
        textSize(50);
        textAlign(CENTER, CENTER);
        fill(0);
        text(char(floor(random(65, 91))), 0, 0, 0);
        pop();
        for (let i = 0; i < 24; i++) {
            push();
            rotateY(i * TWO_PI / 24);
            translate(200 * cos(frameCount * 0.05 + i * 0.5), 200 * sin(frameCount * 0.05 + i * 0.5), 0);
            fill(color(map(sin(frameCount * 0.1 + i * 0.5 + PI/3), -1, 1, 0, 255), map(cos(frameCount * 0.1 + i * 0.5 + PI/6), -1, 1, 0, 255), map(sin(frameCount * 0.1 + i * 0.5 + PI), -1, 1, 0, 255)));
            let radius = 12.5 + 5 * sin(frameCount * 0.1 + i * 0.5);
            star(0, 0, radius, radius, 5);
            pop();
        }
    }

    function star(x, y, radius1, radius2, npoints) {
        let angle = TWO_PI / npoints;
        let halfAngle = angle / 2.0;
        beginShape();
        for (let a = 0; a < TWO_PI; a += angle) {
            let sx = x + cos(a) * radius2;
            let sy = y + sin(a) * radius2;
            vertex(sx, sy);
            sx = x + cos(a + halfAngle) * radius1;
            sy = y + sin(a + halfAngle) * radius1;
            vertex(sx, sy);
        }
        endShape(CLOSE);
    }

Cosmic Kaleidoscope

→

Cosmic Kaleidoscope

Enter your instructions here or read below on how this works:

The idea of this project is to evolve animations using AI. You can enter in the input field below how you want to change the animation that you currently see. The AI will then generate a new animation based on your input. If you don't like the result, you can just press the back button in your browser and try again. If you do like the result, you can enter another prompt to further evolve the animation.

The animation you see is derived from a parent animation. You can see the parent animation by clicking on the thumbnail image to the left. The current animation evolved from the parent using these instructions: spin the cube along its z axis.

Now it is your turn. Enter your instructions. For example, add more objects, change colors or change how things move. The AI will try to generate a new animation based on your input.