LERP Demo

Click anywhere in the canvas to set a destination.

Set speed (1/value)

The HTML file:

<html>
<head>
     <script src="https://cdn.rawgit.com/google/code-prettify/master/loader/run_prettify.js"></script>
     <script type="text/javascript" async src="https://cdnjs.cloudflare.com/ajax/libs/mathjax/2.7.5/MathJax.js?config=TeX-MML-AM_CHTML"> </script>
     <script type="text/x-mathjax-config">
  MathJax.Hub.Config({tex2jax: {inlineMath: [['$','$'], ['\\(','\\)']]}});
</script>

     <link rel="stylesheet" href="https://mirkwood.cs.edinboro.edu/~bennett/style/hw.css">

    <script type="text/javascript" src="guy.js" defer></script>
    <script type="text/javascript" src="lerp.js" defer></script>
    <script src="ui.js" defer></script>
</head>

<body>
    <h1>LERP Demo</h1>
    Click anywhere in the canvas to set a destination.
    <br>

    <canvas id="canvas" width="400" height="400" style="border:1px solid #000000;"></canvas>
    <p>
    Set speed (1/value)
    <input type="range" min="10", max="100" value="10" class="slider" id="delta" onchange="ChangeDT(this.value)" list="tickmarks">
    <datalist id="tickmarks">
        <option value = "10"></option>
        <option value = "50"></option>
        <option value = "100"></option>
    </datalist>
</body>
</html>

guy.js

"use strict"

class Guy {
    
    constructor(canvasName, x=0,  y=0, r = 20) {
       this.canvas = document.getElementById(canvasName);
       this.ctx = canvas.getContext('2d');

       this.xpos = x;
       this.ypos = y;
       this.radius = r;
       this.color = "yellow";
    }

    get Color() {
        return this.color;
    }
 
    set Color(c) {
        this.color = c;
    }

    get Pos() {
       return [this.xpos,this.ypos];
    }

    get Radius() {
       return this.radius;
    }

    set Pos(p){
        this.xpos = p[0];
        this.ypos = p[1];
    }

    set Radius(r){
       this.radius = r;
    }

    Draw() {
       this.ctx.fillStyle = this.color;
       this.ctx.strokeStyle = "black";

       this.ctx.beginPath();
       this.ctx.arc(this.xpos, this.ypos, this.radius, 0 , 2*Math.PI);
       this.ctx.fill();
       this.ctx.stroke();
    }
}

lerp.js

"use strict"

let state 
let oldx 
let oldy 
let t
let dt
let targetx
let targety

let handler;

function InitLerp(guy){
   state = 0
   t = 0
   oldx = guy.xpos;
   oldy = guy.ypos;
   targetx = 0
   targety = 0

   ChangeDT(10)
}

function ChangeDT(amt) {
   dt = 1/amt;
}

function LERP(a,b,t){
   let rv = a*(1-t) + b*t
   return rv;
}

function DoMove() {

    if (t < 1) {

        t += dt;
        
        // clamp it between 0 and 1
        t = Math.min(t,1);
        t = Math.max(0, t);

        let x = LERP(oldx, targetx, t);
        let y = LERP(oldy, targety, t);
        guy.Pos = [x,y];

        let angle = LERP(240,120, t);
        guy.Color = "hsl("+angle.toString() + ", 100%, 50%)";

        canvas.getContext('2d').clearRect(0,0,canvas.width, canvas.height);
        guy.Draw();
    } else {
        oldx = targetx;
        oldy = targety;
        window.clearInterval(handler);
        state = 0;
    }
}

function MyHandler(evnt) {
    if (state ==  0) {

       targetx = evnt.offsetX;
       targety = evnt.offsetY;

       state = 1;
       t = 0;

       handler = window.setInterval(DoMove, 30);
    }
}

ui.js

"use strict"
let canvas = document.getElementById("canvas");
canvas.tabIndex = 0;
canvas.addEventListener("click", MyHandler);

let guy = new Guy("canvas");

guy.Radius = 10;
guy.Pos = [10,10];
guy.color="hsl(0,100%,50%)";

InitLerp(guy)

guy.Draw();