diff --git a/guide/english/canvas/particle-sim/index.md b/guide/english/canvas/particle-sim/index.md index 2b33e4b343..9505631d53 100644 --- a/guide/english/canvas/particle-sim/index.md +++ b/guide/english/canvas/particle-sim/index.md @@ -8,19 +8,19 @@ In this guide, we're going to build a basic particle simulation in Canvas using We will want to set up an array of particles with accelerations and velocities. We will create 100 particles at random points on the canvas. ```js -canvas = document.getElementById("canvas"); -ctx = canvas.getContext('2d'); +const canvas = document.getElementById('canvas'); +const ctx = canvas.getContext('2d'); -var particles = []; -for(var i=0; i<100; i++) { +const particles = []; +for (let i=0; i<100; i++) { particles.push( { - x:Math.random()*canvas.width, - y:Math.random()*canvas.height, - vx:0, - vy:0, - ax:0, - ay:0 + x: Math.random() * canvas.width, + y: Math.random() * canvas.height, + vx: 0, + vy: 0, + ax: 0, + ay: 0 } ); } @@ -29,9 +29,9 @@ for(var i=0; i<100; i++) { In our draw loop, we render these particles. ```js -function draw() { +const draw = () => { ctx.clearRect(0, 0, canvas.width, canvas.height); - for(var i=0; i { + for (let i=0; i { + const clickX = e.clientX - canvas.offsetLeft; + const clickY = e.clientY - canvas.offsetTop; + for (let i=0; i