createCanvas(800, 800);

  background(110);

  noStroke();

  heartDraw(width/2,height/2);

}

​

​

​

​

// 実装参考：

// https://editor.p5js.org/makio135/sketches/AUy_cG-d4

// https://qiita.com/QUANON/items/672588719b178291f351

// http://blog.livedoor.jp/reona396/archives/54891368.html

const heartDraw = (tx,ty) => {

  const R = 20;

  let n = 700; 

  let startX = 0;

  let startY = 0;

  // ベクトルの終点

  let endX = tx;

  let endY = ty;

  // ベクトルの成分を求める

  let dx = endX - startX;

  let dy = endY - startY;

  // ベクトルの角度を求める

  let angle = atan2(dy, dx);

  push();

  translate(tx, ty);

  //rotate(angle);

  beginShape();

  for (let i = 0; i < n; i++) {

    let x = xHeart(TAU * i / n,R);

    let y = yHeart(TAU * i / n,R);

    vertex(x, y);

  }

  endShape(CLOSE);

  pop();

}

​

const xHeart = (angle, radius) => {

  const x = radius　/ 15.0 * 16 * Math.pow(Math.sin(angle), 3);

  return x;

} 

​

const yHeart = (p, radius) => {

  const y = radius / 15.0 * (-13 * Math.cos(p) + 5 * Math.cos(2 * p) + 2 * Math.cos(3 * p) + Math.cos(4 * p));

  return y;

}

​

const water = () => {

  const A = 1;

  const R = 320;

  push();

  translate(width/2, height/2);

  rotate(radians(-90));

  for (let t = 0; t < TWO_PI+0.07; t += 0.07) {

    r = 1 / (A * sin(t/2)+1);

    heartDraw(R * r * cos(t), R * r * sin(t));

    //circle(R * r * cos(t), R * r * sin(t),10);

  }

  pop();

}

​

const fillWater = () => {

  const A = 1;

  const R = 320;

  push();

  translate(width/2, height/2);

  rotate(radians(-90));

  beginShape();

  for (let t = 0; t < TWO_PI+0.07; t += 0.07) {

    r = 1 / (A * sin(t/2)+1);

    vertex((R+18) * r * cos(t), (R+18) * r * sin(t));

  }

  endShape(CLOSE);

  pop();

}

​