// The Nature of Code

// The Coding Train / Daniel Shiffman

// https://youtu.be/OxHJ-o_bbzs

// https://thecodingtrain.com/learning/nature-of-code/5.4-arrive.html

// https://editor.p5js.org/codingtrain/sketches/1eUnUQnwB

​

let vehicle;

​

let pGainSlider;

let dGainSlider;

let maxSpeedSlider;

let maxForceSlider;

​

function setup() {

  createCanvas(window.innerWidth * 0.8, window.innerHeight * 0.8).parent("mid");

  vehicle = new Vehicle(100, 100);

  // Get Sliders.

  pGainSlider = document.getElementById("proportional");

  dGainSlider = document.getElementById("derivative");

  iGainSlider = document.getElementById("integral");

​

  maxSpeedSlider = document.getElementById("maxSpeed");

  maxForceSlider = document.getElementById("maxForce");

  maxSpeedSlider.step = 0.5;

  maxForceSlider.step = 0.1;

  maxSpeedSlider.max = 40;

  maxForceSlider.max = 4;

​

  maxSpeedSlider.value = 20;

  maxForceSlider.value = 0.4;

​

  pGainSlider.step = 0.01;

  dGainSlider.step = 0.01;

  pGainSlider.max = 0.3;

  dGainSlider.max = 5;

​

  pGainSlider.value = 0.1;

  dGainSlider.value = 2.4;

​

  document.querySelectorAll("input").forEach((slider) => {

    slider.addEventListener("input", (e) => {

      const label = document.querySelector(`label[for="${e.target.id}"]`);

      label.innerHTML = label.innerHTML

        .split(":")

        .slice(0, 1)

        .concat(e.target.value)

        .join(": ");

      if(e.target.id === "frameRate") frameRate(parseInt(e.target.value));

    });

    // Dispatch input event once, to initalize label texts.

    const event = document.createEvent("Event");

    event.initEvent("input", true, true);

    slider.dispatchEvent(event);

  });

​

}

​

function draw() {

  background(0);

​

  let target = createVector(mouseX, mouseY);

  if (target.x === 0 && target.y === 0)

    target = createVector(width / 2, height / 2);

​

  fill(255, 0, 0);

  noStroke();

  ellipse(target.x, target.y, 32);

​

  // Update slider values;

  vehicle.maxSpeed = parseFloat(maxSpeedSlider.value);

  vehicle.maxForce = parseFloat(maxForceSlider.value);

​

  vehicle.pGain = parseFloat(pGainSlider.value);

  vehicle.dGain = parseFloat(dGainSlider.value);

​

  // Calling the arrive function

  const steering = vehicle.arrive(target);

​

  vehicle.applySteer(steering);

  vehicle.update();

  vehicle.show();

​

  // Drawing some stuff

  const pFactor = vehicle.pGain * vehicle.proportionalError;

  const dFactor = vehicle.dGain * vehicle.derivativeError;

  drawVector(vehicle.pos, steering.copy().setMag(pFactor), "green", 2);

  drawVector(vehicle.pos, steering.copy().setMag(dFactor), "orange", 2);

}

​

function drawVector(source, target, color = "white", multiplier = 1) {

  target = target.copy().setMag(target.mag() * multiplier);

  target.setMag(Math.min(target.mag(), 300));

  push();

​

  stroke(color);

  strokeWeight(4);

​

  translate(source.x, source.y);

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

​

  translate(target.x, target.y);

  rotate(target.heading() - Math.PI / 2);

  line(0, 0, -5, -5);

  line(0, 0, 5, -5);

​

  pop();

}

​