const startOfHeartX = 0;

const startOfHeartY = 30;

​

//the red dot

//the blue dot is just this but with a negative x value

const ctrlPoint1X = 30;

const ctrlPoint1Y = 0;

​

//the yellow dot

//the green dot is just this but with a negative x value

const ctrlPoint2X = 50;

const ctrlPoint2Y = 45;

​

//the magenta dot

const bottomOfHeartX = 0;

const bottomOfHeartY = 75;

​

function setup() {

  createCanvas(400, 400);

  background(150);

  /* first we move the origin over 

   * to the center and then offset a tiny bit so 

   * that the heart itself is mostly centered

   */

  translate(width/2, height/2);

  translate(0, -2 * bottomOfHeartY/3);

  //now we start drawing the shape

  beginShape();

  //starting point

  vertex(startOfHeartX, startOfHeartY);

  //right half of the heart

  bezierVertex(ctrlPoint1X, ctrlPoint1Y, 

               ctrlPoint2X, ctrlPoint2Y, 

               bottomOfHeartX, bottomOfHeartY);

  //left half of the heart

  bezierVertex(-1 * ctrlPoint2X, ctrlPoint2Y,

               -1 * ctrlPoint1X, ctrlPoint1Y, 

               startOfHeartX, startOfHeartY);

  endShape();

  stroke("white");

  //this is where the start of the shape is

  fill("purple");

  circle(startOfHeartX, startOfHeartY, 8);

  //this is where the first "control point" is

  fill("red");

  line(startOfHeartX, startOfHeartY, ctrlPoint1X, ctrlPoint1Y);

  circle(ctrlPoint1X, ctrlPoint1Y, 8);

  //this is where the second control point is

  fill("yellow")

  line(bottomOfHeartX, bottomOfHeartY, ctrlPoint2X, ctrlPoint2Y);

  circle(ctrlPoint2X, ctrlPoint2Y, 8);

  //this is where the bottom of the heart is

  fill("magenta");

  circle(bottomOfHeartX, bottomOfHeartY, 8);

  //this is the second control point, but mirrored across the X axis 

  //for drawing the left side of the heart

  fill("green")

  line(bottomOfHeartX, bottomOfHeartY, -1 * ctrlPoint2X, ctrlPoint2Y);

  circle(-1 * ctrlPoint2X, ctrlPoint2Y, 8);

  //and finally we return to the first control point

  //which is also mirrored accross the X axis for the left side

  fill("blue")

  line(-1 * ctrlPoint1X, ctrlPoint1Y, startOfHeartX, startOfHeartY);

  circle(-1 * ctrlPoint1X, ctrlPoint1Y, 8);

}

​

function draw() {

}