I tried to modify the following code (that draws splash animations on canvas directly):
var canvas = document.getElementById("canvas");var ctx = canvas.getContext("2d");var particles = [];canvas.onmousemove = function(e){ for (var i = 0; i < 36 * 2; i++) { particles.push({ x: e.clientX, y: e.clientY, angle: i * 5, size: 5 + Math.random() * 3, life: 200 + Math.random() * 50 }); }}canvas.onmouseup = function(){ //ctx.clearRect(0, 0, 600, 600);}var delta = 0;var last = Date.now();function animate(){ delta = Date.now() - last; last = Date.now(); for (var i = 0; i < particles.length; i++) { var p = particles[i]; p.x += Math.cos(p.angle) * 4 + Math.random() * 2 - Math.random() * 2; p.y += Math.sin(p.angle) * 4 + Math.random() * 2 - Math.random() * 2; p.life -= delta; p.size -= delta / 50; if (p.size <= 0) { p.life = 0; } if (p.life <= 0) { particles.splice(i--, 1); continue; } }}function render(){ ctx.fillStyle = '#'+ (Math.floor(Math.random() * (0xFFFFFF + 1))).toString(16); for (var i = 0; i < particles.length; i++) { if (Math.random() < 0.1) { continue; } var p = particles[i]; ctx.beginPath(); ctx.arc(p.x, p.y, p.size, 0, Math.PI * 2, false); ctx.fill(); }}window.requestAnimFrame = (function(){ return window.requestAnimationFrame || window.webkitRequestAnimationFrame || window.mozRequestAnimationFrame || function( callback ){ window.setTimeout(callback, 1000 / 60); };})();(function animloop(){ requestAnimFrame(animloop); animate(); render();})();...to draw using PIXI.Graphics:
const app = new PIXI.Application({ width: window.innerWidth, height: window.innerHeight, backgroundColor: 0x1099bb, resolution: window.devicePixelRatio || 1, resizeTo: window});document.body.appendChild(app.view);const graphics = new PIXI.Graphics();app.stage.addChild(graphics);ctx = { beginPath: function() { graphics.beginFill(0x00ff00); }, arc: function() { graphics.arc(...arguments); }, fill: function() { graphics.endFill(); }};//var canvas = document.getElementById("canvas");//var ctx = canvas.getContext("2d");var particles = [];window.onmousemove = function(e){ for (var i = 0; i < 36 * 2; i++) { particles.push({ x: e.clientX, y: e.clientY, angle: i * 5, size: 5 + Math.random() * 3, life: 200 + Math.random() * 50 }); }}window.onmouseup = function(){ //ctx.clearRect(0, 0, 600, 600);}var delta = 0;var last = Date.now();function animate(){ delta = Date.now() - last; last = Date.now(); for (var i = 0; i < particles.length; i++) { var p = particles[i]; p.x += Math.cos(p.angle) * 4 + Math.random() * 2 - Math.random() * 2; p.y += Math.sin(p.angle) * 4 + Math.random() * 2 - Math.random() * 2; p.life -= delta; p.size -= delta / 50; if (p.size <= 0) { p.life = 0; } if (p.life <= 0) { particles.splice(i--, 1); continue; } }}function render(){ ctx.fillStyle = "#00FF00"; for (var i = 0; i < particles.length; i++) { if (Math.random() < 0.1) { continue; } var p = particles[i]; ctx.beginPath(); ctx.arc(p.x, p.y, p.size, 0, Math.PI * 2, false); ctx.fill(); }}window.requestAnimFrame = (function(){ return window.requestAnimationFrame || window.webkitRequestAnimationFrame || window.mozRequestAnimationFrame || function( callback ){ window.setTimeout(callback, 1000 / 60); };})();(function animloop(){ requestAnimFrame(animloop); animate(); render();})();It seems to work, however after a few splashes it starts lagging and eventually crashes the browser with "Out of Memory" error.
The original code draws on mouse click, but I tried and it works on mouse move too.
My idea is that PIXI.Graphics creates too much cache causing the crash.
Does anybody know the reason of the crash and maybe a way to fix it?Any ideas are appreciated!
Codepen HTML for testing:
<!DOCTYPE html><html lang="en"><head><meta charset="UTF-8"/><meta name="viewport" content="width=device-width, initial-scale=1.0"/><meta http-equiv="X-UA-Compatible" content="ie=edge"/><title>PIXI Splash Test</title><style> html, body { margin: 0; padding: 0; overflow: hidden; height: 100vh; }</style></head><body><script src="https://cdnjs.cloudflare.com/ajax/libs/pixi.js/5.3.3/pixi.min.js"></script></body></html>