Convert the first WebGL tutorial

processing · Mar 2, 2024 · d9426cb · d9426cb
1 parent 2fc0abc
commit d9426cb
Show file tree

Hide file tree

Showing 8 changed files with 799 additions and 7 deletions.
diff --git a/public/images/webgl/2d3d_coordinates.png b/public/images/webgl/2d3d_coordinates.png
diff --git a/src/components/Callout/index.jsx b/src/components/Callout/index.jsx
@@ -0,0 +1,11 @@
+/*
+ * A component that points out something to the reader, such as a call to
+ * try out an idea oneself.
+ * props: { title?: string; children: any }
+ */
+export const Callout = (props) => (
+ <div className="callout">
+ <h5>{props.title || "Try this!"}</h5>
+ {props.children}
+ </div>
+);
diff --git a/src/components/CodeEmbed/frame.jsx b/src/components/CodeEmbed/frame.jsx
@@ -1,19 +1,22 @@
-const wrapJsInMarkup = (jsCode) => `<!DOCTYPE html>
+const wrapJsInMarkup = (jsCode, options) => `<!DOCTYPE html>
 <meta charset="utf8" />
-<body></body>
-<script src="https://cdnjs.cloudflare.com/ajax/libs/p5.js/1.8.0/p5.min.js"></script>
-<script id="code" type="module">${jsCode}</script>
+${options.cssCode ? (`<style type='text/css'>${options.cssCode}</style>`) : ""}
+<body>${options.bodyCode || ""}</body>
+<script id="code" type="text/javascript">${jsCode}</script>
+<script src="https://cdnjs.cloudflare.com/ajax/libs/p5.js/1.9.1/p5.min.js"></script>
 `;
 
 /*
  * Component that uses an iframe to run p5 code.
- * props: { code: string }
+ * props: { code: string; height?: number | string; width?: number | string }
  */
 export const CodeFrame = (props) => (
  <iframe
- srcDoc={wrapJsInMarkup(props.code)}
+ srcDoc={wrapJsInMarkup(props.code, props)}
  sandbox="allow-scripts allow-popups allow-modals allow-forms"
  aria-label="Code Preview"
  title="Code Preview"
+ height={props.height}
+ width={props.width}
  />
 );
diff --git a/src/components/CodeEmbed/index.jsx b/src/components/CodeEmbed/index.jsx
@@ -1,4 +1,4 @@
-import { useState } from "preact/hooks";
+import { useState, useEffect } from "preact/hooks";
 import CodeMirror from "@uiw/react-codemirror";
 import { javascript } from "@codemirror/lang-javascript";
 
@@ -14,9 +14,16 @@ import { CodeFrame } from "./frame";
  * }
  */
 export const CodeEmbedCodeMirror = (props) => {
+ const [rendered, setRendered] = useState(false);
  const [codeString, setCodeString] = useState(props.initialValue ?? "");
  const [previewCodeString, setPreviewCodeString] = useState(codeString);
 
+ useEffect(() => {
+ setRendered(true)
+ }, []);
+
+ if (!rendered) return <div className="code-placeholder" />;
+
  return (
  <>
  <CodeMirror

diff --git a/src/components/EditableSketch/index.jsx b/src/components/EditableSketch/index.jsx
@@ -0,0 +1,5 @@
+import CodeEmbedCodeMirror from "../CodeEmbed";
+
+export const EditableSketch = (props) => (
+ <CodeEmbedCodeMirror initialValue={props.code.trim()} previewable editable />
+);
diff --git a/src/components/SketchEmbed/index.jsx b/src/components/SketchEmbed/index.jsx
@@ -0,0 +1,21 @@
+import { CodeFrame } from "../CodeEmbed/frame";
+
+/*
+ * A component that displays a full-width sketch without showing its code.
+ * props: {
+ * code: string;
+ * cssCode?: string;
+ * bodyCode?: string;
+ * width?: number | string;
+ * height?: number | string;
+ * }
+ */
+export const SketchEmbed = (props) => (
+ <CodeFrame
+ code={props.code}
+ cssCode={props.cssCode}
+ bodyCode={props.bodyCode}
+ height={props.height || 400}
+ width="100%"
+ />
+);