Miranda Luong-Project-03-Dynamic Drawing

sketch

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