let canvasSize = 500;

let half = canvasSize / 2;

let fori = {x: 0, y: -50};

let fo = {x: 0, y: -75};

let fp = {x: -20, y: 0};

let fpori = {x: -20, y: 0};

let pts = [];

function setup() {

  createCanvas(canvasSize, canvasSize - 100);

  stroke(0);

  // noLoop();

}

​

function draw() {

  background(255);

  translate(0, -200);

  let fr = 240;

  let inc = TWO_PI / fr;

  let osc = sin(count % TWO_PI) * 200;

  count += inc;

  fp.x = fo.x + osc;

  // fo.y = fori.y - (abs(cos(count % TWO_PI) * frameCount * 1e-1) * 1);

  // fo.y = fo.y + osc * 0.125;

  // fp.y = fpori.y + sin(count % TWO_PI) * frameCount * 1e-1;

  translate(half, half);

  scale(1, -1);

  // scale(1, -1);

  // rotate(frameCount * 1e-2);

  stroke(0, 25);

  line(-half, -0, half, 0);

  // line(0, -half, -0, half);

  noStroke();

  fill(255, 0, 0);

  ellipse(fo.x, fo.y, 10);

  ellipse(fp.x, fp.y, 10);

  let a0 = Math.atan2(fo.y - fp.y, fo.x - fp.x);

  let a1 = (Math.PI / 2) - abs(a0);

  let a2 = Math.PI / 2;

  let a3 = Math.PI - a1 - a2;

  // console.log(a1);

  // console.log(a2);

  // console.log(a3);

  // console.log(a1 + a2 + a3);

  let x = fp.x + cos(a0) * 45;

  let y = fp.y + sin(a0) * 45;

  // ellipse(x, y, 10);

  let d = dist(fo.x, fo.y, fp.x, fp.y);

  // console.log(d);

  let opp = d * 0.5;

  let soh = sin(a3);

  // console.log(soh);

  // sin(a3) = opp / hyp;

  // sin(a3) / 1 = opp / hyp;

  // 1 / sin(a3) = hyp / opp;

  //(1 / sin(a3)) * opp = hyp;

  let hyp = (1 / sin(a3)) * opp;

  // console.log(hyp);

  stroke(0);

  line(fp.x, fp.y, fp.x, fp.y - hyp);

  // stroke(255, 0, 0);

  line(fo.x, fo.y, fp.x, fp.y - hyp);

  line(fo.x, fo.y, fp.x, fp.y);

  let ddx = lerp(fo.x, fp.x, 0.5);

  let ddy = lerp(fo.y, fp.y, 0.5);

  line(ddx, ddy, fp.x, fp.y - hyp);

  ellipse(fp.x, fp.y - hyp, 2);

  // let newP = {x: lerp(fp.x, fp.x, 0.5), 

              // y: lerp(fp.y

  if (pts.length < fr) {

    pts.push({x: fp.x, y: fp.y - hyp});

  }

  noStroke();

  for (let i = 0; i < pts.length; i++) {

    ellipse(pts[i].x, pts[i].y, 2);

  }

}