For education(blogs) on canvas only

import {Vector, Mover} from "natureofcode-canvas-ed"




/**
 * @type {HTMLCanvasElement}
 */
 const canvas = document.getElementById("canvas")


 /**
  * @type {CanvasRenderingContext2D}
  */
 const ctx = canvas.getContext("2d")


 canvas.width = window.innerWidth;
 canvas.height = window.innerHeight;

  canvas.width = window.innerWidth;
 canvas.height = window.innerHeight;



 let particle = new Mover(5, 100, 20, 200, [1, 1, 1], canvas)

const wind = new Vector(0.1, 0)


let particles = []

function update(){

    ctx.clearRect(0, 0, canvas.width, canvas.height)

    let gravity = new Vector(0,1)
   

  

  

    for(let i =0; i < 5; i++){
        particles.push(new Mover(1,  200, 20, 100*i, [155*i^2, 155, 155*i], canvas))
        // particles.push(new Mover(5, 100, 20, 200, [1, 1, 1], canvas))
    }

      particles.forEach(p => {
        // p.applyForce(gravity)
        p.applyForce(wind)
        p.checkEdges();
        p.update();
        p.display();
    })

    for(let i = particles.length-1; i > 0; i--){
        if(particles[i].finished()){
            // console.log("removed")
            particles.splice(i, 1)
        }
    }

     particle.applyForce(gravity)
     particle.applyForce(wind)
    particle.checkEdges()
    particle.update()
    particle.display(false);
    requestAnimationFrame(update)
}

update()