# Miranda Luong-Project-03-Dynamic Drawing

``````/* Miranda Luong
Section E
mluong@andrew.cmu.edu
Project-03-Dynamic Drawing
*/

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

function draw() {
background(170, 190, 200);
noStroke();

// Translate the origin point to the center of the screen
translate(width/2, height/2);

// Size of circles
var size = 60
//position of circles
var pos = 1
//color of all shapes
var color = 0

// Restrict mouseX and mouse Y within a 400 x 400 square
// positioned at center of canvas
var mX = max(min(mouseX, 520), 120);
var mY = max(min(mouseY, 440),40);

// Change attributes of circles according to distance
// of mouse from center
size = dist(320,240,mX,mY) * 60/200;
pos = dist(320,240,mX,mY) / 250;
color = dist(320,240,mX,mY);

// North circle
var northY= -150*pos;

fill(color,100,100);
ellipse(0,-150*pos,size,size);

// Northeast circle

var northeastX = 150/sqrt(2)*pos;
var northeastY = -150/sqrt(2)*pos;

fill(color,100,100);
ellipse(northeastX,northeastY,size,size);

// East circle

var eastX = 150*pos;

fill(color,100,100);
ellipse(eastX,0,size,size);

// Southeast circle
var southeastX = 150/sqrt(2)*pos;
var southeastY = 150/sqrt(2)*pos;

fill(color,100,100);
ellipse(southeastX,southeastY,size,size);

// South circle

var southY = 150*pos;

fill(color,100,100);
ellipse(0,southY,size,size);

// Southwest circle

var southwestX = -150/sqrt(2)*pos;
var southwestY = 150/sqrt(2)*pos;

fill(color,100,100);
ellipse(southwestX,southwestY,size,size);

// West circle

var westX = -150*pos;

fill(color,100,100);
ellipse(westX,0,size,size);

// Northwest circle

var northwestX = -(150/sqrt(2))*pos;
var northwestY = -(150/sqrt(2))*pos;

fill(color,100,100);
ellipse(northwestX,northwestY,size,size);

// Center square

// Change angle of square's rotation according to distance
// of mouse from center
angle = dist(320,240,mX,mY)*.01;

// Use cosine to get a smooth CW and CCW motion
var c = cos(angle);

fill(color,100,100);
rectMode(CENTER);
rotate(c);
rect(0,0,60,60);

}
``````

I tried to challenge myself but coding movements that radiated from the center. After changing the origin of the canvas to the center, I wonder if it’s possible to set the canvas to a normal cartesian grid. I also wonder as to why mouseX and mouseY do not follow my new grid system even after I changed the origin.