# Adam He – Project 03 – Dynamic Drawing

``````/* 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.