Merge pull request #58 from processing/mdx-and-one-liners

Convert JSdoc to MDX and add one line descriptions

Author: calebfoss

README.md

@@ -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();

…_Shapes_And_Color/00_Shape_Primitives.js …es_And_Color/00_Shape_Primitives/code.jsexamples/01_Shapes_And_Color/00_Shape_Primitives.js renamed to examples/01_Shapes_And_Color/00_Shape_Primitives/code.js examples/01_Shapes_And_Color/00_Shape_Primitives.js renamed to examples/01_Shapes_And_Color/00_Shape_Primitives/code.js

@@ -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/00_Shape_Primitives/description.mdx

@@ -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();

…Shapes_And_Color/00_Shape_Primitives.png …_Color/00_Shape_Primitives/thumbnail.pngexamples/01_Shapes_And_Color/00_Shape_Primitives.png renamed to examples/01_Shapes_And_Color/00_Shape_Primitives/thumbnail.png examples/01_Shapes_And_Color/00_Shape_Primitives.png renamed to examples/01_Shapes_And_Color/00_Shape_Primitives/thumbnail.png

@@ -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/01_Shapes_And_Color/01_Color.js …les/01_Shapes_And_Color/01_Color/code.jsexamples/01_Shapes_And_Color/01_Color.js renamed to examples/01_Shapes_And_Color/01_Color/code.js examples/01_Shapes_And_Color/01_Color.js renamed to examples/01_Shapes_And_Color/01_Color/code.js

@@ -0,0 +1,24 @@
+function setup() {
+  // Create the canvas
+  createCanvas(710, 400);
+
+  // Set background to black
+  background(0);
+
+  // Set width of the lines
+  strokeWeight(10);
+
+  // Set color mode to hue-saturation-brightness (HSB)
+  colorMode(HSB);
+
+  // Set screen reader accessible description
+  describe('A blank canvas where the user draws by dragging the mouse');
+}
+
+function mouseDragged() {
+  // Set the color based on the mouse position, and draw a line
+  // from the previous position to the current position
+  let lineHue = mouseX - mouseY;
+  stroke(lineHue, 90, 90);
+  line(pmouseX, pmouseY, mouseX, mouseY);
+}

examples/01_Shapes_And_Color/01_Color/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.