//speed
let nFrames = 200;
//how connected the lines look
let nPoints = 300;
//loops, has to be whole number or fix the pos of the second circle
let delay = 3.0;

function setup() {
  createCanvas(800, 400);
  background(50);
}

function draw() {
  background(50);
  let timing = frameCount / nFrames;
  //diameter of the circles, could be changed to creatures head and tail
  let diameter = 10;

  let xTwo = width / 3 + 100 * cos(TWO_PI * timing);
  let yTwo = height / 2 + 100 * sin(TWO_PI * timing);

  let xOne = width / 2 + 30 * cos(TWO_PI * timing);
  let yOne = height / 2 + 20 * sin(TWO_PI * timing);

  let xThree = width / 1.4 - 100 * cos(TWO_PI * timing);
  let yThree = height / 2 + 100 * sin(TWO_PI * timing);

  yFour = sin(frameCount * 0.031) * 100 + 100;

  xFive = height/1.1 + 50 + sin(frameCount * 0.03) * 100
 
  line(xOne, yOne, xTwo, yTwo);
  line(xOne, yOne, xThree, yThree);
  line(xTwo, yTwo, 50, yFour);
  line(xThree, yThree, 750, yFour);
  line(xOne, yOne, xFive, 300);

  fill(255);

  circle(xThree, yThree, diameter);
  circle(xTwo, yTwo, diameter);
  circle(xOne, yOne, diameter);
  circle(xFive, 300, diameter);

  for (let counter = 0; counter < nPoints; counter += 1) {
    let percentage = counter / nPoints;
    let delayedTiming = timing - delay * percentage;

    let xTwoDelayed = (3 * width) / 4 + 200 * cos(TWO_PI * delayedTiming);
    let yTwoDelayed = height / 2 + 100 * sin(TWO_PI * delayedTiming);
  }

  //heart
  fill(255, 0, 0);
  heart(xOne + 5, yOne + 10, abs(sin(frameCount*0.06)*12));

  function heart(x, y, size) {
 
    beginShape();
    vertex(x, y);
    bezierVertex(
      x - size / 2,
      y - size / 2,
      x - size,
      y + size / 3,
      x,
      y + size
    );
    bezierVertex(x + size, y + size / 3, x + size / 2, y - size / 2, x, y);
    endShape(CLOSE);
  }
}