Simple tweening experiment

snake.js

//From utils.js
Math.TWO_PI = Math.PI * 2

const random = (v) => Math.floor(Math.random() * v)

const range = (n, s = 0, f = 1) => new Array(n).fill(1).map(i => i = s += f)

const overlays = {
    button(name,f){
        const btn = document.createElement('input')
        btn.type = 'button'
        btn.value = name
        btn.style.position = 'absolute'
        btn.onclick = f
        btn.style.top = '10px'
        btn.style.left = '10px'
        btn.name = 'AAAAA'
        document.body.appendChild(btn)
        return btn
    },
    range(mi,ma,on){
        const btn = document.createElement('input')
        btn.type = 'range'
        btn.max = ma
        btn.min = mi
        btn.value = name
        btn.style.position = 'absolute'
        btn.onchange = e =>{ on(e)}
        btn.style.top = '30px'
        btn.style.left = '5px'
        btn.name = 'AAAAA'
        document.body.appendChild(btn)
        return btn
    },


}

const _canvas = document.createElement('canvas').getContext('2d')
const Sin = Math.sin
const Cos = Math.cos

const getRandRGB = () => {
    _canvas.fillStyle = `hsl(${random(360)}, 100%, 50%)`
    return hexToRgb(_canvas.fillStyle.slice(1))
}

const getRandHEX = () => {
    _canvas.fillStyle = `hsl(${random(360)}, 100%, 50%)`
    return _canvas.fillStyle
}


const createCanvas = (w, h) => {
    const canvas = document.createElement('canvas')
    if (!w) {
        document.body.style.margin = '0px'
        canvas.style.display = 'block'
        w = canvas.height = window.innerHeight
        h = canvas.width = window.innerWidth
    } else {
        canvas.height = h
        canvas.width = w
    }
    document.body.appendChild(canvas)
    const ctx = canvas.getContext('2d')
    ctx.clear = () => {
        ctx.clearRect(0, 0, ctx.canvas.width, ctx.canvas.height)
    }
    ctx.circle = (x = 0, y = 0, r = 5) => {
        ctx.beginPath()
        ctx.ellipse(x, y, r, r, 0, 0, Math.TWO_PI)
        ctx.fill()
    }
    return ctx
}

//End utils.js
const ctx = createCanvas()

ctx.fillRect(0, 0, 10, 10)

const target = {x: 0,y: 0}

let ease = 0.5

onmousemove = e => {
    target.x = e.x
    target.y = e.y
}
let ids = 0
class Ball {
    constructor(leader) {
        this.leader = leader
        this.id = ids++
        this.color = getRandHEX()
        this.x = 0
        this.y = 0
        this.dx = 0
        this.dy = 0
        this.vx = 0
        this.vy = 0
    }
    draw() {
        this.dx = this.leader.x - this.x
        this.dy = this.leader.y - this.y
        this.vx = this.dx * ease
        this.vy = this.dy * ease
        this.x += this.vx
        this.y += this.vy
        ctx.fillStyle = `hsl(${this.id * 2}, 100%, 50%)`
        ctx.circle(this.x, this.y, 20)
    }
}

let b = new Ball(target);
let last = b;
let balls = []

range(180).map(_=>{
    last = new Ball(last)
    balls.push(last)
})

let state = false
onclick =_=>{
    if(state = !state){
        b.leader = balls[179]
    }else{
        b.leader = target        
    }
}

let speed = overlays.range(1, 100, e =>{
    ease =  e.srcElement.value / 100
})

const update = function () {
    ctx.clear()
    b.draw()
    balls.map(i=>i.draw())
    requestAnimationFrame(update)
}
update()