Merge pull request #812 from processing/feat/perf

Fully unmount sketches that go out of frame

Author: davepagurek

src/components/CodeEmbed/frame.tsx

@@ -1,4 +1,4 @@
-import { useRef, useLayoutEffect, useEffect } from "preact/hooks";
+import { useRef, useLayoutEffect, useEffect, useState } from "preact/hooks";
 import { cdnLibraryUrl } from "@/src/globals/globals";
 
 interface CodeBundle {
@@ -86,6 +86,7 @@ export const CodeFrame = (props: CodeFrameProps) => {
   const p5ScriptTag = document.getElementById(
     "p5ScriptTag",
   ) as HTMLScriptElement;
+  const [mounted, setMounted] = useState(false);
 
   // For performance, set the iframe to display:none when
   // not visible on the page. This will stop the browser
@@ -101,11 +102,7 @@ export const CodeFrame = (props: CodeFrameProps) => {
       (entries) => {
         entries.forEach((entry) => {
           if (!iframeRef.current) return;
-          if (entry.isIntersecting) {
-            iframeRef.current.style.removeProperty("display");
-          } else {
-            iframeRef.current.style.display = "none";
-          }
+          setMounted(entry.isIntersecting);
         });
       },
       { rootMargin: "20px" },
@@ -118,6 +115,7 @@ export const CodeFrame = (props: CodeFrameProps) => {
   useEffect(() => {
     (async () => {
       if (!p5ScriptTag || !iframeRef.current) return;
+      if (!mounted) return;
 
       /*
        * Uses postMessage to receive the text content of p5.min.js, to be included
@@ -148,7 +146,7 @@ export const CodeFrame = (props: CodeFrameProps) => {
         return;
       }
     })();
-  }, [props.jsCode]);
+  }, [props.jsCode, mounted]);
 
   return (
     <div
@@ -157,13 +155,13 @@ export const CodeFrame = (props: CodeFrameProps) => {
     >
       <iframe
         ref={iframeRef}
-        srcDoc={wrapInMarkup({
+        srcDoc={mounted ? wrapInMarkup({
           js: props.jsCode,
           css: props.cssCode,
           htmlBody: props.htmlBodyCode,
           base: props.base,
           scripts: props.scripts,
-        })}
+        }) : undefined}
         sandbox="allow-scripts allow-popups allow-modals allow-forms allow-same-origin"
         aria-label="Code Preview"
         title="Code Preview"

src/content/tutorials/en/intro-to-p5-strands.mdx

@@ -59,6 +59,7 @@ function lightingSetup() {
 
 function setup() {
   createCanvas(200, 200, WEBGL);
+  pixelDensity(1);
 }
 
 function draw() {
@@ -110,6 +111,7 @@ function firstShaderCallback() {
 
 async function setup() {
 	createCanvas(200, 200, WEBGL);
+  pixelDensity(1);
 	// p5.strands are made using the modify function on a shader 
 	firstShader = baseColorShader().modify(firstShaderCallback);
 }
@@ -173,6 +175,7 @@ function instancingCallback() {
 
 async function setup() {
 	createCanvas(300, 300, WEBGL);
+  pixelDensity(1);
   particleModel = buildGeometry(() => sphere(10, 10, 2));
 	instancingShader = baseColorShader().modify(instancingCallback);
   instancingStrokeShader = baseStrokeShader().modify(instancingCallback);
@@ -227,6 +230,7 @@ getWorldInputs((inputs) => {
 
 async function setup() {
   createCanvas(400, 400, WEBGL);
+  pixelDensity(1);
   particleModel = buildGeometry(() => sphere(10, 4, 2));
   instancingShader = baseColorShader().modify(instancingCallback);
   instancingStrokeShader = baseStrokeShader().modify(instancingCallback);
@@ -301,6 +305,7 @@ getWorldInputs((inputs) => {
 
 async function setup() {
   createCanvas(400, 400, WEBGL);
+  pixelDensity(1);
   particleModel = buildGeometry(() => sphere(10, 4, 2));
   instancingShader = baseColorShader().modify(instancingCallback);
   instancingStrokeShader = baseStrokeShader().modify(instancingCallback);
@@ -410,6 +415,7 @@ function fresnelCallback() {
 
 async function setup() {
   createCanvas(400, 400, WEBGL);
+  pixelDensity(1);
   fresnelShader = baseColorShader().modify(fresnelCallback);
 }
 
@@ -456,6 +462,7 @@ function pixelateCallback() {
 
 async function setup() {
   createCanvas(200, 200);
+  pixelDensity(1);
   pixelateShader = baseFilterShader().modify(pixelateCallback)
 }
 
@@ -489,6 +496,7 @@ function pixelateCallback() {
 
 async function setup() {
   createCanvas(200, 200, WEBGL);
+  pixelDensity(1);
   pixelateShader = baseFilterShader().modify(pixelateCallback)
 }
 
@@ -526,7 +534,7 @@ function draw() {
   image(originalImage, 0, 0);
 
   // changing this value affects the spread of the bloom
-  filter(BLUR, 20);
+  filter(BLUR, 15);
 }
 ```
 
@@ -570,6 +578,7 @@ function bloomCallback() {
 
 async function setup() {
   createCanvas(200, 200, WEBGL);
+  pixelDensity(1);
   originalImage = createFramebuffer();
   bloomShader = baseFilterShader().modify(bloomCallback);
 }
@@ -715,6 +724,7 @@ function bloomShaderCallback() {
 
 async function setup(){
   createCanvas(800, 600, WEBGL);
+  pixelDensity(1);
   stars = buildGeometry(() => sphere(8, 4, 2))
   originalImage = createFramebuffer();
 
@@ -752,7 +762,7 @@ function draw(){
   imageMode(CENTER)
   image(originalImage, 0, 0)
   
-  filter(BLUR, 25)
+  filter(BLUR, 15)
   filter(bloomShader);
 }
 `} />