Jenna Kim (Jeeyoon Kim)- Project 3- Dynamic Drawing

jennakim03

/* Jenna Kim (Jeeyoon Kim)
Section E
jeeyoonk@andrew.cmu.edu
Project 03
*/

var xpan = 200;
var ypan = 130;
var panWidth = 145;
var panHeight = 83;
var xhandle = 44;
var yhandle = 120;
var handleWidth = 84;
var handleHeight = 12;

var xegg = 200;
var yegg = 87;
var eggWidth = 71;
var eggHeight = 100;

var xnewpan = 456; 
var ynewpan = 324;
var newpanWidth = 277;
var newpanHeight = 161;
var newxhandle = 155;
var newyhandle = 320;
var newhandleWidth = 164;
var newhandleHeight = 24;

var angle1 = 6;
var distance = 0.1;

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


function draw() {
	//background color "change" when you move the cursor
	background(234, 210, 249);
	colorMode(RGB);
	R = (mouseX / width) * 255;
	G = (mouseY / width) * 255;
	var c = color(R, G, 200);
	background(c);

  //egg rotating around mouse
  noStroke(0);
  fill(255); //
  stroke(0);
  push();
  translate(mouseX, mouseY);
  rotate(radians(angle1));
  ellipse(50, 50, eggWidth, eggHeight);
  pop();
  angle1 = angle1 + 6;
  distance = distance + 0.1;

//when you drag to the right, the egg size increase!!
if (mouseX > 420) {
    eggWidth += 0.5;
    eggHeight +=0.5
}

	//if mouse is Pressed, Fried Egg appears (size change/position change)
if (mouseIsPressed) {
	//new pan drawing
	noStroke(0);
  	fill(114, 114, 114);
  	ellipse(xnewpan, ynewpan, newpanWidth, newpanHeight);
  	fill(94, 94, 94);
  	ellipse(xnewpan, ynewpan - 10, newpanWidth, newpanHeight);
  	rect(newxhandle, newyhandle, newhandleWidth, newhandleHeight);

  	//Fried Egg
  noStroke(0);
  	fill(256);
  	ellipse(456, 316, 160, 110);
  	fill(249, 183, 65);
  	ellipse(447, 306, 71, 42);
  } else {
	push();
  	//pan drawing
  	fill(114, 114, 114);
  	ellipse(xpan, ypan, panWidth, panHeight);
  	fill(94, 94, 94);
  	ellipse(xpan, ypan - 10, panWidth, panHeight);
  	rect(xhandle, yhandle, handleWidth, handleHeight);
  	pop();
}
  print(mouseIsPressed);

  textSize(17);
  fill(50);
  text('dancing egg', mouseX + 5, mouseY, 100, 100);

}

“DON’T FORGET TO PRESS THE CANVAS”

For this project, I put five interactions in total; swinging of the egg, egg transforming to another position, and size of the pan changing when mouse is clicked, egg size increasing slowly as the mouse moves to the right, and color change of the background when mouse is moved around the canvas. Through this project, I learned that there are so many different interactions you can do just by moving, dragging, clicking the mouse.