remove trails + only draw when visible

Author: g-harel

demo/content.ts

@@ -961,35 +961,8 @@ addCanvas(1.8, (ctx, width, height, animate) => {
         },
     );
 
-    const pointHistory: Point[][] = [];
-    let renderCount = 0;
     animate(() => {
-        renderCount++;
-        const points = animation.renderPoints();
-
-        if (renderCount % 2 === 0) {
-            pointHistory.push(points);
-        }
-        if (pointHistory.length > trailLength) {
-            pointHistory.shift();
-        }
-
-        for (let i = 0; i < pointHistory.length; i++) {
-            tempStyles(
-                ctx,
-                () => {
-                    ctx.fillStyle = colors.secondary;
-                    ctx.globalAlpha = i / pointHistory.length;
-                },
-                () => {
-                    forPoints(pointHistory[i], ({curr}) => {
-                        drawPoint(ctx, curr, i / pointHistory.length);
-                    });
-                },
-            );
-        }
-
-        drawClosed(ctx, points, true);
+        drawClosed(ctx, animation.renderPoints(), true);
     });
 
     return `TODO`;

demo/internal/layout.ts

@@ -89,6 +89,12 @@ export const addTitle = (heading: number, text: string) => {
     textWrapperElement.appendChild(textElement);
 };
 
+const handleIntersection = (entries: any) => {
+    entries.map((entry: any) => {
+        entry.target.setAttribute("data-visible", entry.isIntersecting);
+    });
+};
+
 // Adds a row of cells to the bottom of the layout.
 export const addCanvas = (aspectRatio: number, ...painters: CellPainter[]) => {
     const sectionElement = createSection();
@@ -115,6 +121,10 @@ export const addCanvas = (aspectRatio: number, ...painters: CellPainter[]) => {
 
         const cell = {aspectRatio, canvas, ctx, painter, animationID: -1};
         cellRow.push(cell);
+
+        new IntersectionObserver(handleIntersection, {
+            threshold: 0.1,
+        }).observe(canvas);
     }
     cells.push(cellRow);
 
@@ -171,7 +181,8 @@ const redraw = () => {
                         // Stop animating if cell is redrawn.
                         if (cell.animationID !== animationID) return;
 
-                        if (pausedAt === 0) {
+                        const visible = cell.canvas.getAttribute("data-visible") === "true";
+                        if (pausedAt === 0 && visible) {
                             const frameTime = Date.now() - startTime - pauseOffset;
                             cell.ctx.clearRect(0, 0, cellWidth, cellHeight);
                             drawDebug();