Sharon Yang Project 07 Curves

Project

/*Sharon Yang
Section C
junginny
Project-07
*/

var nPoints = 100;

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

function draw() {
  background(254, 200, 200);
  push();
  translate(width/2, height/2);
  rotate(PI); //rotating the shape 180 degrees
  drawHeart(); //call the function to draw the shape
  pop();
}

function drawHeart() { //function to create the heart shape
  noStroke();
  if (mouseX <= 240 & mouseY <= 240) { //the mouse X and Y determines the color of the shape
    fill(255, 0, 0); //red
  }
  else {
    fill(200, 25, 60); //burgundy
  }
  beginShape(); //create the heart shape
  for (var i = 0; i < nPoints; i++) {
    var t = map (i, 0, nPoints, 0, TWO_PI);
    var consMouseX = constrain(mouseX,0,width/2);
    var consMouseY = constrain(mouseY,0,height/2.2);//constrain to stay within the canvas border 
    x = 16 * pow(sin(t), 3);
    y = 13 * cos(t) - 5 * cos(2 * t) - 2 * cos(3 * t) - cos(4 * t); //formula for the shape
    x = map(x,0,16,0,consMouseX);
    y = map(y,0,16,0,consMouseY);
    vertex (x, y)
  }
  endShape(CLOSE);
}

This project was particularly difficult to start as a mathematical equation also had to be incorporated for the geometric shape. However, once making the shape with begin and end shape, it was quite straightforward to make the shape increase and decrease in size and make the color change with mouse X and Y. The following are the screenshots of the varying image with different mouse X and Y.