Convert JSdoc to MDX

Author: calebfoss

examples/01_Shapes_And_Color/00_Shape_Primitives/code.js

@@ -1,17 +1,3 @@
-/**
- * @name Shape Primitives
- * @description This program demonstrates the use of the basic shape
- * primitive functions
- * <a href="https://p5js.org/reference/#/p5/square" target="_blank">square()</a>,
- * <a href="https://p5js.org/reference/#/p5/rect" target="_blank">rect()</a>,
- * <a href="https://p5js.org/reference/#/p5/ellipse" target="_blank">ellipse()</a>,
- * <a href="https://p5js.org/reference/#/p5/circle" target="_blank">circle()</a>,
- * <a href="https://p5js.org/reference/#/p5/arc" target="_blank">arc()</a>,
- * <a href="https://p5js.org/reference/#/p5/line" target="_blank">line()</a>,
- * <a href="https://p5js.org/reference/#/p5/triangle" target="_blank">triangle()</a>,
- * and <a href="https://p5js.org/reference/#/p5/quad" target="_blank">quad()</a>.
- */
-
 function setup() {
   // Create screen reader accessible description
   textOutput();

examples/01_Shapes_And_Color/00_Shape_Primitives/description.mdx

@@ -0,0 +1,15 @@
+---
+title: Shape Primitives
+one-line-description: Draw 2D shapes.
+---
+
+This program demonstrates the use of the basic shape
+primitive functions
+<a href="https://p5js.org/reference/#/p5/square" target="_blank">square()</a>,
+<a href="https://p5js.org/reference/#/p5/rect" target="_blank">rect()</a>,
+<a href="https://p5js.org/reference/#/p5/ellipse" target="_blank">ellipse()</a>,
+<a href="https://p5js.org/reference/#/p5/circle" target="_blank">circle()</a>,
+<a href="https://p5js.org/reference/#/p5/arc" target="_blank">arc()</a>,
+<a href="https://p5js.org/reference/#/p5/line" target="_blank">line()</a>,
+<a href="https://p5js.org/reference/#/p5/triangle" target="_blank">triangle()</a>,
+and <a href="https://p5js.org/reference/#/p5/quad" target="_blank">quad()</a>.

examples/01_Shapes_And_Color/01_Color/code.js

@@ -1,20 +1,3 @@
-/**
- * @name Color
- * @description This expands on the Shape Primitives example by adding
- * color.
- * <a href="https://p5js.org/reference/#/p5/background" target="_blank">background()</a>
- * fills the canvas with one color,
- * <a href="https://p5js.org/reference/#/p5/stroke" target="_blank">stroke()</a>
- * sets the color for drawing lines, and
- * <a href="https://p5js.org/reference/#/p5/fill" target="_blank">fill()</a>
- * sets the color for the inside of shapes.
- * <a href="https://p5js.org/reference/#/p5/noFill" target="_blank">noStroke()</a> and
- * <a href="https://p5js.org/reference/#/p5/noFill" target="_blank">noFill()</a>
- * turn off line color and inner color, respectively.
- *
- * Colors can be represented in many different ways. This example demonstrates several options.
- */
-
 function setup() {
   // Create screen reader accessible description
   textOutput();

examples/01_Shapes_And_Color/01_Color/description.mdx

@@ -0,0 +1,18 @@
+---
+title: Color
+one-line-description: Add color to your sketch.
+---
+
+This expands on the Shape Primitives example by adding
+color.
+<a href="https://p5js.org/reference/#/p5/background" target="_blank">background()</a>
+fills the canvas with one color,
+<a href="https://p5js.org/reference/#/p5/stroke" target="_blank">stroke()</a>
+sets the color for drawing lines, and
+<a href="https://p5js.org/reference/#/p5/fill" target="_blank">fill()</a>
+sets the color for the inside of shapes.
+<a href="https://p5js.org/reference/#/p5/noFill" target="_blank">noStroke()</a> and
+<a href="https://p5js.org/reference/#/p5/noFill" target="_blank">noFill()</a>
+turn off line color and inner color, respectively.
+
+Colors can be represented in many different ways. This example demonstrates several options.

examples/02_Animation_And_Variables/00_Drawing_Lines/code.js

@@ -1,23 +1,3 @@
-/**
- * @name Drawing Lines
- * @description Click and drag the mouse to draw a line.
- *
- * This example demonstrates the use of several built-in
- * variables.
- * <a href="https://p5js.org/reference/#/p5/mouseX">mouseX</a>
- * and
- * <a href="https://p5js.org/reference/#/p5/mouseY">mouseY</a>
- * store the current mouse position, while the
- * previous mouse position is represented by
- * <a href="https://p5js.org/reference/#/p5/pmouseX">pmouseX</a>
- * and
- * <a href="https://p5js.org/reference/#/p5/pmouseY">pmouseY</a>.
- *
- * This example also shows the use of
- * <a href="https://p5js.org/reference/#/p5/colorMode">colorMode</a> with HSB
- * (hue-saturation-brightness), so that the first variable sets the hue.
- *
- */
 function setup() {
   // Create the canvas
   createCanvas(710, 400);

examples/02_Animation_And_Variables/00_Drawing_Lines/description.mdx

@@ -0,0 +1,21 @@
+---
+title: Drawing Lines
+one-line-description: Draw with the mouse.
+---
+
+Click and drag the mouse to draw a line.
+
+This example demonstrates the use of several built-in
+variables.
+<a href="https://p5js.org/reference/#/p5/mouseX">mouseX</a>
+and
+<a href="https://p5js.org/reference/#/p5/mouseY">mouseY</a>
+store the current mouse position, while the
+previous mouse position is represented by
+<a href="https://p5js.org/reference/#/p5/pmouseX">pmouseX</a>
+and
+<a href="https://p5js.org/reference/#/p5/pmouseY">pmouseY</a>.
+ *
+This example also shows the use of
+<a href="https://p5js.org/reference/#/p5/colorMode">colorMode</a> with HSB
+(hue-saturation-brightness), so that the first variable sets the hue.

examples/02_Animation_And_Variables/01_Animation_With_Events/code.js

@@ -1,22 +1,3 @@
-/**
- * @name Animation with Events
- * @description This example demonstrates the use of
- * <a href="https://p5js.org/reference/#/p5/loop">loop()</a>
- * and
- * <a href="https://p5js.org/reference/#/p5/noLoop">noLoop()</a>
- * to pause and resume the animation.
- *
- * Clicking the mouse toggles the animation loop. If the animation
- * loop is stopped, the user can press any key to advance one frame.
- * Note: the user must click to set the focus on the canvas for
- * key presses to be registered.
- *
- * Advancing a single frame is accomplished by calling the
- * <a href="https://p5js.org/reference/#/p5/redraw">redraw()</a>
- * function, which results in a single call to the draw() function.
- *
- */
-
 // Declare variable for the horizontal position of the circle
 let x = 25;
 

examples/02_Animation_And_Variables/01_Animation_With_Events/description.mdx

@@ -0,0 +1,19 @@
+---
+title: Animation with Events
+one-line-description: Pause and resume animation.
+---
+
+This example demonstrates the use of
+<a href="https://p5js.org/reference/#/p5/loop">loop()</a>
+and
+<a href="https://p5js.org/reference/#/p5/noLoop">noLoop()</a>
+to pause and resume the animation.
+
+Clicking the mouse toggles the animation loop. If the animation
+loop is stopped, the user can press any key to advance one frame.
+Note: the user must click to set the focus on the canvas for
+key presses to be registered.
+
+Advancing a single frame is accomplished by calling the
+<a href="https://p5js.org/reference/#/p5/redraw">redraw()</a>
+function, which results in a single call to the draw() function.

examples/02_Animation_And_Variables/02_Mobile_Device_Movement/code.js

@@ -1,15 +1,3 @@
-/**
- * @name Mobile Device Movement
- * @description The <a href="https://p5js.org/reference/#/p5/deviceMoved" target="_blank">deviceMoved()</a>
- * function runs when the mobile device displaying the sketch moves.
- * In this example, the
- * <a href="https://p5js.org/reference/#/p5/accelerationX" target="_blank">accelerationX</a>,
- * <a href="https://p5js.org/reference/#/p5/accelerationY" target="_blank">accelerationY</a>,
- * and <a href="https://p5js.org/reference/#/p5/accelerationZ" target="_blank">accelerationZ</a>
- * values set the position and size of a circle.
- * This only works for mobile devices.
- */
-
 function setup() {
   describe(
     'Available on mobile devices only: a white circle on a black background that moves and changes size based on the movement of the device.'

examples/02_Animation_And_Variables/02_Mobile_Device_Movement/description.mdx

@@ -0,0 +1,13 @@
+---
+title: Mobile Device Movement
+one-line-description: Animate based on device motion.
+---
+
+The <a href="https://p5js.org/reference/#/p5/deviceMoved" target="_blank">deviceMoved()</a>
+function runs when the mobile device displaying the sketch moves.
+In this example, the
+<a href="https://p5js.org/reference/#/p5/accelerationX" target="_blank">accelerationX</a>,
+<a href="https://p5js.org/reference/#/p5/accelerationY" target="_blank">accelerationY</a>,
+and <a href="https://p5js.org/reference/#/p5/accelerationZ" target="_blank">accelerationZ</a>
+values set the position and size of a circle.
+This only works for mobile devices.