switch to canvas based rendering for particles, +9999 performance, +9999 china point

website/scripts/particles.ts

@@ -1,88 +1,90 @@
-class Particle {
+const renderSurface = document.createElement("canvas");
-  x: number;
+renderSurface.style.position = "absolute";
-  y: number;
+renderSurface.style.left = "0px";
-  timeExisting: number = 0;
+renderSurface.style.top = "0px";
-  element: HTMLSpanElement;
+renderSurface.style.pointerEvents = "none";
+renderSurface.width = document.documentElement.scrollWidth;
+renderSurface.height = document.documentElement.scrollHeight;
 
-  constructor(x: number, y: number) {
+document.body.insertBefore(renderSurface, document.body.firstElementChild);
-    this.x = x;
-    this.y = y;
-    const element = document.createElement("span");
-    element.style.position = "absolute";
-    element.style.left = this.x + "px";
-    element.style.top = this.y + "px";
-    element.style.color = "white";
-    element.style.fontSize = "30px";
-    element.style.transform = `rotate(${getRandomArbitrary(-90, 90)}deg)`;
-    element.style.userSelect = "none";
-    element.style.pointerEvents = "none";
-    element.innerText =
-      Math.random() < 0.5 ? "-" : Math.random() < 0.5 ? "+" : "*";
-    element.id = "particle_" + Math.random();
-    document.body.appendChild(element);
-    this.element = document.getElementById(element.id)!;
-    particles.push(this);
-  }
 
-  render() {
+const renderSurfaceContext = renderSurface.getContext("2d")!;
-    this.y += 2;
-    this.x -= getRandomArbitrary(-4, 4);
-    this.element.style.left = this.x + "px";
-    this.element.style.top = this.y + "px";
-    this.timeExisting += 1;
 
-    if (document.body.scrollHeight < this.y) {
+let particles: Particle[] = [];
-      this.kill(true);
-    }
-    if (this.timeExisting > 20) {
-      this.kill();
-    }
-  }
-  kill(forceKill = false) {
-    if (forceKill) {
-      document.body.removeChild(this.element);
-      particles = particles.filter((z) => z.element.id !== this.element.id);
-    } else {
-      const opacity = Math.abs(this.timeExisting - 30);
-      this.element.style.opacity = (opacity / 10) + "";
-      this.element.style.fontSize = (opacity * 3)+"px";
-
-      if (opacity <= 0) {
-        document.body.removeChild(this.element);
-        particles = particles.filter((z) => z.element.id !== this.element.id);
-      }
-    }
-  }
-}
 
 function getRandomArbitrary(min: number, max: number) {
   return Math.random() * (max - min) + min;
 }
 
-let particles: Particle[] = [];
+class Particle {
+  x: number;
+  y: number;
+  id: number;
 
-let lastRenderTimestamp = 0;
+  angle: number;
-let lastMoveTimestamp = 0;
+  color: string;
+  style: string;
 
-function particleRenderLoop(timestamp: number) {
+  constructor(x: number, y: number) {
-  if (timestamp - lastRenderTimestamp < 100) {
+    this.x = x;
-    window.requestAnimationFrame(particleRenderLoop);
+    this.y = y;
-    return;
+    this.id = Math.random();
+    this.angle = 2*Math.PI*this.id;
+    this.color = "hsl(" + 360 * Math.random() + ',' +
+    (25 + 70 * Math.random()) + '%,' + 
+    (85 + 10 * Math.random()) + '%)';
+    this.style = Math.random() < 0.5 ? "-" : Math.random() > 0.5 ? "+" : "*";
   }
-  lastRenderTimestamp = timestamp;
+
+  render() {
+    this.y += 2;
+    this.x -= getRandomArbitrary(-1, 1);
+
+    var width2=renderSurfaceContext.measureText("+").width;
+
+    renderSurfaceContext.save();
+    renderSurfaceContext.fillStyle = this.color;
+    renderSurfaceContext.font = Math.floor(this.id*60)+"px Arial";
+    renderSurfaceContext.translate(this.x, this.y);
+    renderSurfaceContext.rotate(2*Math.PI*this.id);
+    renderSurfaceContext.fillText(this.style, -width2/2,4);
+    renderSurfaceContext.restore();
+    
+    if (renderSurface.height < this.y) {
+      particles = particles.filter(z=>z.id !== this.id)
+    }
+  }
+}
+
+function renderLoop(timestamp: number) {
+  renderSurfaceContext?.clearRect(
+    0,
+    0,
+    renderSurface.width,
+    renderSurface.height
+  );
   for (const particle of particles) {
     particle.render();
   }
-  window.requestAnimationFrame(particleRenderLoop);
+
+  window.requestAnimationFrame(renderLoop);
 }
-document.addEventListener("mousemove", (event) => {
+
-  if (Date.now() - lastMoveTimestamp < 50) {
+window.requestAnimationFrame(renderLoop);
+
+setInterval((e) => {
+  renderSurface.width = document.documentElement.scrollWidth;
+  renderSurface.height = document.documentElement.scrollHeight;
+}, 1000);
+
+let lastMoveTimestamp = 0;
+
+document.documentElement.addEventListener("mousemove", (event) => {
+  if (Date.now() - lastMoveTimestamp < 20) {
     return;
   }
+
   lastMoveTimestamp = Date.now();
-  new Particle(
+  const particle = new Particle(event.pageX, event.pageY);
-    event.pageX + (Math.random() * 10 - 20),
+  particles.push(particle);
-    event.pageY + (Math.random() * 10 - 20)
-  );
 });
-window.requestAnimationFrame(particleRenderLoop);