Angela Lee – Project – 03

angela-dynamic-drawing

/*
 * Angela Lee
 * Section E
 * ahl2@andrew.cmu.edu
 * Assignment-03
 */

// variables for x & y position of circle following cursor
var x = 300;
var y = 300;
var diffx = 0;
var diffy = 0;


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

function draw(){
    // defining variable for distance from mouse position to center
    mouseDist = dist(mouseX, mouseY, width/2, height/2);
    // width and height of the circles
    circle = 80 + mouseDist/6;
	background(0);
    noStroke();

    // small white circle following the mouse
    diffx = mouseX - x;
    diffy = mouseY - y;
    x = x + 0.2 * diffx;
    y = y + 0.2 * diffy;
    fill ("white");
    ellipse(x, y, 20, 20);

    // middle square
    push();
    translate(320, 240);
    rectMode (CENTER);
    rotate(radians(mouseDist));
    fill(mouseX, mouseY, 100);
    rect(0, 0, 15, 15);
    pop();

    // TOP CIRCLE
    // red, yellow values change based on mouse's x and y position
    fill(mouseX, mouseY, 150);
    // ellipse goes top based on mouse's distance from center
    ellipse(320, 114 - mouseDist/2, circle,
     circle);

    // RIGHT CIRCLE
    // green, blue values change based on mouse's x and y position
    fill(242, mouseX, mouseY);
    // ellipse goes right based on mouse's distance from center
    // ellipse gets bigger as mouseDist gets bigger
    ellipse(445 + mouseDist/2, 240, circle,
     circle);

    // LOWER CIRCLE
    // red, green values change based on mouse's x and y position
    fill(mouseX, mouseY, 40);
    // ellipse goes bottom based on mouse's distance from center
    // ellipse gets bigger as mouseDist gets bigger
    ellipse(320, 365 + mouseDist/2, circle,
     circle);

    // LEFT CIRCLE
    // red value changes based on mouse's x position
    fill(mouseX, 13, 174);
    // ellipse goes left based on mouse's distance from center
    // ellipse gets bigger as mouseDist gets bigger
    ellipse(195 - mouseDist/2, 240, circle,
     circle);

    // TOP RIGHT SQUARE
    push();
    // translate origin to where the square is, based on mouseDist
    translate(407.5 + mouseDist/5, 151 - mouseDist/5);
    // rotate the square from its center as it moves
    rectMode(CENTER);
    rotate(radians(mouseDist));
    fill(23, 250, 255);
    rect(0, 0, 50, 50);
    pop();

    // BOTTOM RIGHT SQUARE
    push();
    // translate origin to where the square is, based on mouseDist
    translate(407.5 + mouseDist/5, 328.5 + mouseDist/5);
    // rotate the square from its center as it moves
    rectMode(CENTER);
    rotate(radians(-mouseDist));
    fill(141, 29, 221);
    rect(0, 0, 50, 50);
    pop();

    // BOTTOM LEFT SQUARE
    push();
    // translate origin to where the square is, based on mouseDist
    translate(231 - mouseDist/5, 328.5 + mouseDist/5);
    // rotate the square from its center as it moves
    rectMode(CENTER);
    rotate(radians(mouseDist));
    fill(255, 169, 210);
    rect(0, 0, 50, 50);
    pop();

    // TOP LEFT SQUARE
    push();
    // translate origin to where the square is, based on mouseDist
    translate(231 - mouseDist/5, 151 - mouseDist/5);
    // rotate the square from its center as it moves
    rectMode(CENTER);
    rotate(radians(-mouseDist));
    fill(7, 57, 239);
    rect(0, 0, 50, 50);
    pop();
}

   

This project helped me really understand the mechanisms of push, pop, and translation in the context of rotation. I think it was tricky to figure out how to make things rotate a certain place (e.g. rotate on its center while the position of the object changed places depending on the user). I also think that proportion was especially important for me in this exercise. While most of my user interaction was based on how far the cursor was from the center of the canvas, determining how fast something was moving or big something got depended on a fraction of that distance.