Adam He – Project 03 – Dynamic Drawing

sketch

/* Adam He
Section A
xiaotiah@andrew.cmu.edu
Project-03 */

function setup() {
    createCanvas(640, 480);
}

function draw() {
    // background color changes based on mouse position
    var bckX = mouseX / width * 150;
    var bckY = mouseY / height * 150;
    background(bckX, 0, bckY);
    noStroke();

    var sqSize = 80;
    var sqPosX = 20;
    fill(255);

    // bigger circle, bigger, clockwise
    push();
    translate(width / 2, height / 2);
    rotate(mouseX / 400);
    rect(sqPosX + 20, sqPosX + 20, mouseX + 20, mouseX + 20);
    pop();

    // smaller square, bigger, counter-clockwise
    push();
    translate(width / 2, height / 2);
    rotate(mouseX / -400);
    rect(sqPosX - 20, sqPosX + 20, mouseX + 10, mouseX + 10);
    pop();

    // circle appears in the middle
    push();
    translate(width / 2, height / 2);
    ellipse(sqPosX - 20, sqPosX - 20, mouseX / 5, mouseX / 5);
    pop();

    // black circlr appears in the circle
    push();
    fill(0);
    translate(width / 2, height / 2);
    ellipse(sqPosX - 20, sqPosX - 20, mouseX / 40, mouseX / 40);
    pop();

    // non-rotating enlarging rect
    var move = max(min(mouseX, 700), 0);
    var big = move * 4;
    fill(200, bckY, bckX);
    rect(300 + move, 180 + move, big, big);
}

I was randomly playing with the rotation and translations of simple geometries. I found out that it would be really interesting if I played around with the depth and perspective in this animation. I programmed the colors and sizes of the shapes to transform so to achieve the dynamic and interactive animation that I wanted to make.