Updated wiki text

humanbydefinition · Nov 16, 2024 · 4a80364 · 4a80364
1 parent d007cd6
commit 4a80364
Show file tree

Hide file tree

Showing 2 changed files with 39 additions and 14 deletions.
diff --git a/repo_assets/wiki/02_Usage.md b/repo_assets/wiki/02_Usage.md
@@ -222,7 +222,7 @@ Adds a gradient/pattern-based ASCII conversion layer to the rendering pipeline.
 
 #### Example
 
-work-in-progress! As of now, please refer to the following demo sketch from the p5.asciify examples folder: [`gradient_patterns`](#)
+work-in-progress! As of now, please refer to the following demo sketch in the p5.js web editor: [`p5.asciify | gradients test`](https://editor.p5js.org/humanbydefinition/sketches/_hg3L2cKk)
 
 <hr/>
 
@@ -246,7 +246,7 @@ Removes a gradient/pattern-based ASCII conversion layer from the rendering pipel
 
 #### Example
 
-work-in-progress! As of now, please refer to the following demo sketch from the p5.asciify examples folder: [`gradient_patterns`](#)
+work-in-progress! As of now, please refer to the following demo sketch in the p5.js web editor: [`p5.asciify | gradients test`](https://editor.p5js.org/humanbydefinition/sketches/_hg3L2cKk)
 
 <hr/>
 

diff --git a/tests/gradients/sketch.js b/tests/gradients/sketch.js
@@ -20,8 +20,8 @@ let gridCols = 3;
 let fillColors = [
     [150, 160, 170],
     [180, 190, 200],
-    [210, 220, 230]
-]
+    [210, 220, 230],
+];
 
 function setup() {
     createCanvas(windowWidth, windowHeight, WEBGL);
@@ -35,7 +35,7 @@ function setup() {
             renderMode: "brightness",
             enabled: true,
             characterColorMode: 0,
-            characters: "-"
+            characters: ".",
         },
         edge: {
             enabled: true,
@@ -48,15 +48,35 @@ function setup() {
             characterColorMode: 1,
             characterColor: "#ff0000",
             invertMode: true,
-        }
+        },
     });
 
-    linearGradient = addAsciiGradient("linear", 150, 150, "gradients ", { direction: 1, angle: 0, speed: 0.1 });
-    spiralGradient = addAsciiGradient("spiral", 160, 160, "are  ", { direction: 1, speed: 0.01, density: 0.5 });
-    radialGradient = addAsciiGradient("radial", 170, 170, "now ", { direction: -1, radius: 1.0 });
-    zigzagGradient = addAsciiGradient("zigzag", 180, 180, "available ", { direction: 1, speed: 0.1 });
-    conicalGradient = addAsciiGradient("conical", 190, 190, "in ", { speed: 0.01 });
-    noiseGradient = addAsciiGradient("noise", 210, 240, "p5.asciify ", { noiseScale: 0.5, speed: 0.1, direction: 1 });
+    linearGradient = addAsciiGradient("linear", 150, 150, "gradients ", {
+        direction: 1,
+        angle: 0,
+        speed: 0.1,
+    });
+    spiralGradient = addAsciiGradient("spiral", 160, 160, "are  ", {
+        direction: 1,
+        speed: 0.01,
+        density: 0.5,
+    });
+    radialGradient = addAsciiGradient("radial", 170, 170, "now ", {
+        direction: -1,
+        radius: 1.0,
+    });
+    zigzagGradient = addAsciiGradient("zigzag", 180, 180, "available ", {
+        direction: 1,
+        speed: 0.1,
+    });
+    conicalGradient = addAsciiGradient("conical", 190, 190, "in ", {
+        speed: 0.01,
+    });
+    noiseGradient = addAsciiGradient("noise", 210, 240, "p5.asciify ", {
+        noiseScale: 0.5,
+        speed: 0.1,
+        direction: 1,
+    });
 }
 
 function getFillColor(row, col) {
@@ -76,7 +96,12 @@ function draw() {
         for (let col = 0; col < gridCols; col++) {
             let fillColor = getFillColor(row, col);
             fill(fillColor);
-            rect(-windowWidth / 2 + col * rectWidth, -windowHeight / 2 + row * rectHeight, rectWidth, rectHeight);
+            rect(
+                -windowWidth / 2 + col * rectWidth,
+                -windowHeight / 2 + row * rectHeight,
+                rectWidth,
+                rectHeight
+            );
         }
     }
 
@@ -108,4 +133,4 @@ function draw() {
 
 function windowResized() {
     resizeCanvas(windowWidth, windowHeight);
-}
+}