var prevs = [];

var nexts = [];

var theta = 0;

var delta = 0.000005;

​

function setup() {

  createCanvas(400, 400);

  frameRate(60);

  init();

}

​

function init(){

  spider = createVector(random(0, width), random(0, height));

  hero = createVector(random(0, width), random(0, height));

​

  spiderTrajectory = createVector(random(0, width), random(0, height));

  spiderSpeed = random(5, 10);

  heroMaxSpeed = random(spiderSpeed + 1, spiderSpeed * 3);

  heroReach = random(15, 35);

  spiderTrajectory.setMag(spiderSpeed);

  prevs = [spider.copy(), hero.copy(), spiderTrajectory.copy()];

  newNexts()

}

​

function newNexts(){ 

  nexts = [

    createVector(random(0, width), random(0, height)),

    createVector(random(0, width), random(0, height)),

    createVector(random(0, width), random(0, height)),

    random(5, 10),

    random(spiderSpeed + 1, spiderSpeed * 3),

    random(15, 35),

  ];}

​

function updateStuff() {

  // todo instead of lerp between two static vectors,

  // keep lerping the lerped vector

  hero.lerp(nexts[0], theta);

  spider.lerp(nexts[1], theta);

  spiderTrajectory.lerp(nexts[2], theta)

  // hero = p5.Vector.lerp(prevs[0], nexts[0], theta)

  // spider = p5.Vector.lerp(prevs[1], nexts[1], theta)

  // spiderTrajectory= p5.Vector.lerp(prevs[2], nexts[2], theta)

  // commented because this isn't necessary at all

  // spiderSpeed = nexts[3]

  // heroMaxSpeed = nexts[4]

  // heroReach = nexts[5]

  spiderTrajectory.setMag(spiderSpeed);

  theta+=delta;

  if (theta > 0.03) { reset ()}

​

​

}

​

function reset() {

  spider = nexts[0]

  hero = nexts[1]

​

  spiderTrajectory = nexts[2]

  spiderSpeed = nexts[3]

  heroMaxSpeed = nexts[4]

  heroReach = nexts[5]

  spiderTrajectory.setMag(spiderSpeed);

  prevs = [spider.copy(), hero.copy(), spiderTrajectory.copy()];

  newNexts();

  theta=0;

}

​

function mouseClicked() {

​

  reset();

}

​

const varToString = (varObj) => Object.keys(varObj)[0];

​

const someVar = 42;

const displayName = varToString({ someVar });

console.log(displayName);

​

function drawInterceptingPoints() {

  const ds = spiderSpeed;

  const s = spider;

​

  var imaginaryspider = createVector(s.x, s.y);

​

  for (var i = 0; i < spiderSpeed * 100; i += spiderSpeed) {

    imaginaryspider = p5.Vector.add(imaginaryspider, spiderTrajectory);

​

    const imgs = imaginaryspider;

    // break loop if the bounds are off-screen

    if (-10 > imgs.x || imgs.x > 410 || imgs.y > 410 || -10 > imgs.y) break;

    // draw the next points of the spider, with a line to hero

    push();

    noStroke();

    fill('rgba(128,0,128,0.35)')

    circle(imgs.x, imgs.y, 10);

    stroke(255, 0, 0, 15);

    line(imgs.x, imgs.y, hero.x, hero.y);

    pop();

​

    var imaginaryHero = createVector(hero.x, hero.y);

    var imaginaryHeroTrajectory = p5.Vector.sub(imgs, hero);

    imaginaryHeroTrajectory.setMag(heroMaxSpeed);

    var distH2S = dist(hero.x, hero.y, imgs.x, imgs.y);

    var distS2S = dist(s.x, s.y, imgs.x, imgs.y);

    // if herosteps needed > spider steps needed, skip

    if ((distH2S/heroMaxSpeed) > (distS2S/spiderSpeed) ) continue;

​

    for (var j = 0; j < distH2S; j += heroMaxSpeed) {

      imaginaryHero = p5.Vector.add(imaginaryHero, imaginaryHeroTrajectory);

      var imgh = imaginaryHero;

      if (-10 > imgh.x || imgh.x > 410 || imgh.y > 410 || -10 > imgh.y) {

         break;

      }

      if ( dist (imgh.x, imgh.y, hero.x, hero.y) >

           dist (hero.x, hero.y, imgs.x, imgs.y) ) {

        // if next hero pos would be further than necessary,

        // put it on top of the spider

        imgh.x = imgs.x;

        imgh.y = imgs.y;

        push();

        translate(imgh.x, imgh.y)

        text('on top!', 0,0);

        pop();

      }

      push();

      noStroke();

      fill(255,200,0,100);

      circle(imgh.x, imgh.y, 10);

      pop();

​

      if (dist(imgh.x, imgh.y, imgs.x, imgs.y) < (heroReach/2)) {

        push();

        noFill();

        stroke(0, 250, 0, 150);

        circle(imgh.x, imgh.y, heroReach);

        pop();

        break;

      }

    }

    if ((distH2S/heroMaxSpeed) < (distS2S/spiderSpeed) ) break;

  }

}

​

function draw() {

  background(220);

​

  const s = spider;

  const st = spiderTrajectory;

  const h = hero;

  const hs = heroMaxSpeed;

​

  push();

  translate(s.x, s.y);

  sp = createVector(st.x, st.y);

  sp.setMag(400);

  stroke("green");

  // draw the heading of the spider as a green line

  line(0, 0, sp.x, sp.y);

  stroke(255, 0, 0, 50);

  // draw the path the spider doesn't visit anymore as red line

  line(0, 0, -sp.x, -sp.y);

  pop();

​

  // dwaw the spwiber as a pubol baw

  stroke("brown");

  fill("purple");

  circle(s.x, s.y, 15);

​

  // draw the hero as a red ball

  stroke("yellow");

  fill("red");

  circle(h.x, h.y, 25);

​

  // hh.

  drawInterceptingPoints();

​

  noStroke();

  fill(255, 255, 255);

  rect(0, 0, 180, 74);

​

  const textSpacing = 10;

  for (const [i, [val, name]] of [

    [spider, "spider"],

    [spiderTrajectory, "spiderTrajectory"],

    [hero, "hero"],

    [spiderSpeed, "spiderSpeed"],

    [heroMaxSpeed, "heroMaxSpeed"],

    [heroReach, "heroReach"],

    [theta, "theta"]

  ].entries()) {

    fill(0);

    text(`${name}`, 2, i * textSpacing + textSpacing);

​

    fill("blue");

    if (val instanceof p5.Vector) {

      text(`x${val.x.toFixed(1)}`, 95, textSpacing * i + textSpacing);

      text(`y${val.y.toFixed(1)}`, 135, textSpacing * i + textSpacing);

    } else if ( name == "theta") {

      text(`${val.toFixed(3)}`, 95, textSpacing * i + textSpacing);

    } else {

      text(`${val.toFixed(1)}`, 95, textSpacing * i + textSpacing);

    }

  }

   updateStuff();

}

​