Made a simple particle system.

  • How to make a collision between particles?

  • How to make a random disappearance and appearance of particles?

    var ctx, w, h, canvas; var point = []; var N = 2000; function rand(min, max) { return Math.random() * (max - min) + min; } window.onload = function() { canvas = document.getElementById("canvas"); w = canvas.width; h = canvas.height; ctx = canvas.getContext('2d'); ctx.strokeRect(0, 0, w, h); init(); } function init() { for (var i = 0; i < N; i++) { point[i] = new stat(rand(0, w), h / 2, rand(.01, .5) - rand(.01,.5), rand(.01, .5) - rand(.01, .5)); } setInterval(draw, 33); } function draw() { ctx.clearRect(0, 0, w, h); for (var i = 0; i < N; i++) { ctx.beginPath(); ctx.arc(point[i].x, point[i].y, 1, 0, Math.PI * 2, false); point[i].x += point[i].vx; point[i].y += point[i].vy; if (point[i].x > w - .5 ) { point[i].vx = -point[i].vx; } if (point[i].y > h - .5) { point[i].vy = -point[i].vy; } if (point[i].x < 0) { point[i].vx = -point[i].vx; } if (point[i].y < .5) { point[i].vy = -point[i].vy; } ctx.fill(); ctx.closePath(); } }

    1 answer 1

    With the appearance and disappearance there is nothing complicated. For alpha, make the fill transparent, transfer the object abruptly to another position. Or delete and create a new one.

    But the collision is not so easy, you can overlap Matan and expect collisions. I recommend looking towards ready-made solutions - one of those I know