Merge branch '2.0' into beta-npm-version

Author: ksen0

public/reference/data.json

@@ -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"

public/search-indices/en.json

@@ -0,0 +1,3 @@
+name: Aaron Welles
+url: ''
+category: contributor

public/search-indices/es.json

@@ -0,0 +1,3 @@
+name: Carrie Wang
+url: https://github.com/re7l
+category: contributor

public/search-indices/hi.json

@@ -0,0 +1,3 @@
+name: Chloe Yan
+url: https://github.com/ChloeYanYan
+category: contributor

public/search-indices/ko.json

@@ -0,0 +1,3 @@
+name: Franolich Design
+url: https://github.com/franolichdesign
+category: contributor

public/search-indices/zh-Hans.json

@@ -0,0 +1,3 @@
+name: Himanshu Kholiya
+url: https://github.com/himanshuukholiya
+category: contributor

src/components/CodeEmbed/frame.tsx

@@ -0,0 +1,3 @@
+name: Jackie Liu
+url: https://github.com/jlliu
+category: contributor

src/content/people/en/aaron-welles.yaml

@@ -0,0 +1,3 @@
+name: Lauren Berrios
+url: https://github.com/lab-mediaArts
+category: contributor

src/content/people/en/carrie-wang.yaml

@@ -0,0 +1,3 @@
+name: mclark414
+url: https://github.com/mclark414
+category: contributor

src/content/people/en/chloe-yan.yaml

@@ -0,0 +1,3 @@
+name: Mx. Ramsey
+url: https://github.com/mxramsey
+category: contributor

src/content/people/en/franolich-design.yaml

@@ -0,0 +1,3 @@
+name: Qingfeng Huang
+url: https://git.arts.ac.uk/pages/21034426/My_Portfolio_Website/
+category: contributor

src/content/people/en/himanshu-kholiya.yaml

@@ -0,0 +1,3 @@
+name: roxi09
+url: https://github.com/Roxi09
+category: contributor

src/content/people/en/jackie-liu.yaml

@@ -0,0 +1,3 @@
+name: Vik
+url: https://github.com/HritvikBhatia
+category: contributor

src/content/people/en/lauren-berrios.yaml

@@ -0,0 +1,3 @@
+name: Xevi H. Aqeel
+url: http://kinardist.media
+category: contributor

src/content/people/en/mclark414.yaml

@@ -59,7 +59,7 @@ example:
 
     async function setup() {
       createCanvas(100, 100);
-      font = await loadFont('//assets/inconsolata.otf');
+      font = await loadFont('/assets/inconsolata.otf');
     }
 
     function draw() {

src/content/people/en/mx--ramsey.yaml

@@ -4,7 +4,7 @@ module: p5.sound
 submodule: p5.sound
 file: src/Oscillator.js
 description: Starts the oscillator. Usually from user gesture.
-line: 168
+line: 169
 isConstructor: false
 itemtype: method
 example:

src/content/people/en/qingfeng-huang.yaml

@@ -4,7 +4,7 @@ module: p5.sound
 submodule: p5.sound
 file: src/Oscillator.js
 description: Stops the oscillator.
-line: 193
+line: 194
 isConstructor: false
 itemtype: method
 class: p5.Oscillator

src/content/people/en/roxi09.yaml

@@ -4,7 +4,7 @@ module: p5.sound
 submodule: p5.sound
 file: src/Oscillator.js
 description: Creates a sawtooth oscillator.
-line: 219
+line: 220
 isConstructor: true
 params:
   - name: freq

src/content/people/en/vik.yaml

@@ -4,7 +4,7 @@ module: p5.sound
 submodule: p5.sound
 file: src/Oscillator.js
 description: Creates a sine oscillator.
-line: 261
+line: 262
 isConstructor: true
 params:
   - name: freq

src/content/people/en/xevi-h--aqeel.yaml

@@ -4,7 +4,7 @@ module: p5.sound
 submodule: p5.sound
 file: src/Oscillator.js
 description: Creates a square oscillator.
-line: 233
+line: 234
 isConstructor: true
 params:
   - name: freq

src/content/reference/en/p5.Font/textToContours.mdx

@@ -4,7 +4,7 @@ module: p5.sound
 submodule: p5.sound
 file: src/Oscillator.js
 description: Creates a triangle oscillator.
-line: 247
+line: 248
 isConstructor: true
 params:
   - name: freq

src/content/reference/en/p5.Oscillator/start.mdx

@@ -47,7 +47,7 @@ description: >
   clockwise order. Then, draw vertices for the negative space in
 
   counter-clockwise order.</p>
-line: 1957
+line: 2487
 isConstructor: false
 itemtype: method
 example:
@@ -74,7 +74,7 @@ example:
       vertex(30, 70);
       vertex(70, 70);
       vertex(70, 30);
-      endContour();
+      endContour(CLOSE);
 
       // Stop drawing the shape.
       endShape(CLOSE);
@@ -115,7 +115,7 @@ example:
       vertex(-20, 20);
       vertex(20, 20);
       vertex(20, -20);
-      endContour();
+      endContour(CLOSE);
 
       // Stop drawing the shape.
       endShape(CLOSE);

src/content/reference/en/p5.Oscillator/stop.mdx

@@ -1,7 +1,7 @@
 ---
 title: beginShape
 module: Shape
-submodule: Vertex
+submodule: Custom Shapes
 file: src/shape/vertex.js
 description: >
   <p>Begins adding vertices to a custom shape.</p>
@@ -34,8 +34,6 @@ description: >
 
   <a href="/reference/p5/vertex/">vertex()</a>,
 
-  <a href="/reference/p5/bezierVertex/">bezierVertex()</a>,
-
   <a href="/reference/p5/bezierVertex/">bezierVertex()</a>, and/or
 
   <a href="/reference/p5/splineVertex/">splineVertex()</a>. Calling
@@ -63,7 +61,7 @@ description: >
   and
 
   <a href="/reference/p5/endShape/">endShape()</a>.</p>
-line: 400
+line: 399
 isConstructor: false
 itemtype: method
 example:

src/content/reference/en/p5.sound/p5.SawOsc.mdx

@@ -3,24 +3,98 @@ title: bezierOrder
 module: Shape
 submodule: Custom Shapes
 file: src/shape/custom_shapes.js
-description: ''
-line: 1594
+description: >
+  <p>Influences the shape of the Bézier curve segment in a custom shape.
+
+  By default, this is 3; the other possible parameter is 2. This
+
+  results in quadratic Bézier curves.</p>
+
+  <p><code>bezierVertex()</code> adds a curved segment to custom shapes. The
+  Bézier curves
+
+  it creates are defined like those made by the
+
+  <a href="/reference/p5/bezier/">bezier()</a> function.
+  <code>bezierVertex()</code> must be
+
+  called between the
+
+  <a href="/reference/p5/beginShape/">beginShape()</a> and
+
+  <a href="/reference/p5/endShape/">endShape()</a> functions. There must be at
+  least
+
+  one call to <a href="/reference/p5/vertex/">bezierVertex()</a>, before
+
+  a number of <code>bezierVertex()</code> calls that is a multiple of the
+  parameter
+
+  set by <a href="/reference/p5/bezierOrder/">bezierOrder(...)</a> (default
+  3).</p>
+
+  <p>Each curve of order 3 requires three calls to <code>bezierVertex</code>, so
+
+  2 curves would need 7 calls to <code>bezierVertex()</code>:
+
+  (1 one initial anchor point, two sets of 3 curves describing the curves)
+
+  With <code>bezierOrder(2)</code>, two curves would need 5 calls: 1 + 2 +
+  2.</p>
+
+  <p>Bézier curves can also be drawn in 3D using WebGL mode.</p>
+
+  <p>Note: <code>bezierVertex()</code> won’t work when an argument is passed to
+
+  <a href="/reference/p5/beginShape/">beginShape()</a>.</p>
+line: 1645
 isConstructor: false
 itemtype: method
-example: []
+example:
+  - |-
+    <div>
+    <code>
+    function setup() {
+      createCanvas(100, 100);
+
+      background(200);
+
+      // Style the shape.
+      noFill();
+
+      // Start drawing the shape.
+      beginShape();
+
+      // set the order to 2 for a quadratic Bézier curve
+      bezierOrder(2);
+
+      // Add the first anchor point.
+      bezierVertex(30, 20);
+
+      // Add the Bézier vertex.
+      bezierVertex(80, 20);
+      bezierVertex(50, 50);
+
+      // Stop drawing the shape.
+      endShape();
+
+      describe('A black curve drawn on a gray square. The curve starts at the top-left corner and ends at the center.');
+    }
+    </code>
+    </div>
 class: p5
 return:
-  description: The current bezier order.
+  description: The current Bézier order.
   type: Number
 overloads:
-  - params: []
-    return:
-      description: The current bezier order.
-      type: Number
   - params:
       - name: order
-        description: The new order to set.
+        description: 'The new order to set. Can be either 2 or 3, by default 3'
         type: Number
+  - params: []
+    return:
+      description: The current Bézier order.
+      type: Number
 chainable: false
 ---