LERP Demo

Set DT (1/value)

The HTML file:

<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="http://mirkwood.cs.edinboro.edu/~bennett/style/hw.css">
</head>

<body>
<h1>LERP Demo</h1>

<canvas id="canvas" width="400" height="400" style="border:1px solid #000000;"></canvas>
<p>
Set DT (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>

<script type="text/javascript" src="guy.js"></script>

<script>

// build the guy before loading the lerp code.

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

</script>

<script type="text/javascript" src="lerp.js"></script>
<script type="text/javascript">

canvas = document.getElementById("canvas");
canvas.tabIndex = 0;

canvas.addEventListener("click", MyHandler);


guy.Draw();

</script>
</html>
</body>

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() {
       let cx, cy;

       this.ctx.beginPath();
       this.ctx.fillStyle = this.color;
       this.ctx.arc(this.xpos, this.ypos, this.radius, 0 , 2*Math.PI);
       this.ctx.fill();
       this.ctx.strokeStyle = "black";
       this.ctx.arc(this.xpos, this.ypos, this.radius, 0 , 2*Math.PI);
       this.ctx.stroke();
    }
}

lerp.js

"use strict"

let state = 0;
let oldx = guy.xpos;
let oldy = guy.ypos;
let t = 0;

let dt = 0.1;
let targetx = 0;
let targety = 0;
ChangeDT(10);

let handler;

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, 50);
    }
}