Sewon Park – PO – 03

sketch

//Sewon Park
//sewonp@andrew.cmu.edu
//Section B
//Project-03



var angle = 10 // used for rotation of squares later
function setup () {
createCanvas(640,480)

}

function draw () {
background(dist(320,240,mouseX,mouseY)); //background color dependent on mouse location from center



//Ellipse that moves with center at mouse location (Main Ellipse)
fill(mouseX,0,mouseY); // color dependent on mouse movement
stroke(0);
ellipse(mouseX,mouseY,mouseX/2,mouseY/2) // position and size dependent on mouse movement

 //Ellipse2 moves diagnally from main ellipse with mouse movement away from center. 
var x = width - mouseX
var y = height - mouseY 
fill(mouseX,0,mouseY) // color dependent on mouse movement
stroke(0);
ellipse(x,y,mouseX/2,mouseY/2)
x = x - 3
y = y - 3  

//Ellipse3 moves vertically from main ellipse from mouse movement away from center.
var x2 = 0 + mouseX
var y2 = height - mouseY
fill(0,mouseX,0) // color dependent on mouse movement
stroke(0);
ellipse(x2,y2,mouseX/2,mouseY/2)
x2 = x2 - 3
y2 = y2 + 3

//Ellipse4 moves horizontally from main ellipse from mouse movement away from center.
var x3 = width - mouseX
var y3 = 0 + mouseY
fill(0,mouseX,0) // color dependent on mouse movement
stroke(0);
ellipse(x3,y3,mouseX/2,mouseY/2)
x3 = x3 - 3
y3 = y3 + 3

//Square1 spins with its corner respect to main ellipse's center
fill(0,mouseY,mouseX); //color dependent on mouse movement
stroke(0);
push();
translate(mouseX, mouseY);
rotate(angle);
rectMode(CORNER); 
rect(0, 0, 50, 50);
pop();
angle = (angle+dist(320,240,mouseX,mouseY))*0.5; // rotation speed dependent on mouse movement

//Square2 spins with its corner respect to ellipse 2's center
fill(0,mouseY,mouseX);  //color dependent on mouse movement
stroke(0);
push();
translate(x, y);
rotate(angle);
rectMode(CORNER); 
rect(0, 0, 50, 50);
pop();
angle = (angle+dist(320,240,mouseX,mouseY))*0.5; // rotation speed dependent on mouse movement

//Square3 spins with its corner respect to ellipse 3's center
fill(0,mouseY,mouseX);  //color dependent on mouse movement
stroke(0);
push();
translate(x2, y2);
rotate(angle);
rectMode(CORNER); 
rect(0, 0, 50, 50);
pop();
angle = (angle+dist(320,240,mouseX,mouseY))*0.5; // rotation speed dependent on mouse movement

//Square4 spins with its corner respect to ellipse 4's center
fill(0,mouseY,mouseX);  //color dependent on mouse movement
stroke(0);
push();
translate(x3, y3);
rotate(angle);
rectMode(CORNER); 
rect(0, 0, 50, 50);
pop();
angle = (angle+dist(320,240,mouseX,mouseY))*0.5; // rotation speed dependent on mouse movement

}

This project was probably the toughest yet as coordinating movements to your mouse movements is no easy task. I tried to incorporate two different types of movements through altering position and rotation in respect to change in cursor position.