Formatting

They now match 1:1 to the examples provided in the p5.js editor collection
humanbydefinition · Nov 16, 2024 · 4772a21 · 4772a21
1 parent f8d3f3a
commit 4772a21
Show file tree

Hide file tree

Showing 4 changed files with 48 additions and 38 deletions.
diff --git a/examples/0_basic/sketch.js b/examples/0_basic/sketch.js
@@ -15,29 +15,30 @@ function setup() {
 
 	sketchFramebuffer = createFramebuffer({ format: FLOAT });
 
-	setAsciiOptions({ // These are the default options, you can change them as needed in preload(), setup() or draw()
+	setAsciiOptions({
+		// These are the default options, you can change them as needed in preload(), setup() or draw()
 		common: {
 			fontSize: 16,
 		},
 		ascii: {
 			renderMode: 'brightness',
 			enabled: true,
-			characters: ' .:-=+*#%@',
+			characters: " .:-=+*#%@",
 			characterColor: "#ff0000",
 			characterColorMode: 0,
 			backgroundColor: "#000000",
 			backgroundColorMode: 1,
 			invertMode: true,
-		}
+		},
 	});
 }
 
 function draw() {
 	/**
-	Your creative code goes here to replace the following code, drawing to the graphic buffer.
-	Currently, the code draws a Tim Rodenbroeker-esque rotating 3D box to the graphic buffer.
-	Check out his courses on creative coding at https://timrodenbroeker.de/ (no affiliation, I just enjoyed his courses)
-	**/
+	  Your creative code goes here to replace the following code, drawing to the graphic buffer.
+	  Currently, the code draws a Tim Rodenbroeker-esque rotating 3D box to the graphic buffer.
+	  Check out his courses on creative coding at https://timrodenbroeker.de/ (no affiliation, I just enjoyed his courses)
+	  **/
 	sketchFramebuffer.begin();
 
 	background(0);
@@ -51,24 +52,22 @@ function draw() {
 
 	image(sketchFramebuffer, -windowWidth / 2, -windowHeight / 2);
 
-	if (frameCount == 200) { // Update the ascii rendering based on any conditions you like
-
+	if (frameCount == 200) {
+		// Update the ascii rendering based on any conditions you like
 		//loadAsciiFont('path/to/your/font.ttf'); // Optionally update the font after the sketch has run for a while
-
 		/**
-		setAsciiOptions({ // Optionally update any of the default options
-			common: {
-				fontSize: 16
-			},
-			edge: {
-				enabled: true // Edge detection anyone?
-			}
-		});
-		*/
+			setAsciiOptions({ // Optionally update any of the default options
+				common: {
+					fontSize: 16
+				},
+				edge: {
+					enabled: true // Edge detection anyone?
+				}
+			});
+			*/
 	}
 }
 
 function windowResized() {
 	resizeCanvas(windowWidth, windowHeight);
-}
-
+}
diff --git a/examples/1_effects/sketch.js b/examples/1_effects/sketch.js
@@ -1,8 +1,8 @@
 /**
- * This example demonstrates how to use the effects available in the p5.asciify library, 
+ * This example demonstrates how to use the effects available in the p5.asciify library,
  * which can be applied before or after the ASCII conversion.
- * 
- * The example creates a sketch that displays a number of rectangles that grow and shrink over time, 
+ *
+ * The example creates a sketch that displays a number of rectangles that grow and shrink over time,
  * with a kaleidoscope effect that rotates the canvas. Besides the kaleidoscope effect,
  * a distortion effect is applied to the sketch, which creates a wavy effect.
  */
@@ -18,19 +18,26 @@ function setup() {
     createCanvas(windowWidth, windowHeight, WEBGL); // WebGL mode is required currently
     sketchFramebuffer = createFramebuffer({ format: FLOAT });
 
-    setAsciiOptions({ // These are the default options, you can change them as needed in preload(), setup() or draw()
+    setAsciiOptions({
+        // These are the default options, you can change them as needed in preload(), setup() or draw()
         common: {
             fontSize: 8,
         },
         ascii: {
             renderMode: 'brightness',
-            characters: ' .:-=+*#%@',
-        }
+            characters: " .:-=+*#%@",
+        },
     });
 
     // Add pre-effects, which get applied before the ASCII conversion
-    distortionEffect = addAsciiEffect('pre', 'distortion', { frequency: 5.0, amplitude: 0.4 });
-    kaleidoscopeEffect = addAsciiEffect('pre', 'kaleidoscope', { segments: 4, angle: 0 });
+    distortionEffect = addAsciiEffect("pre", "distortion", {
+        frequency: 5.0,
+        amplitude: 0.4,
+    });
+    kaleidoscopeEffect = addAsciiEffect("pre", "kaleidoscope", {
+        segments: 4,
+        angle: 0,
+    });
 
     for (let i = 0; i < maxRectangles; i++) rectangles.push(new Rectangle());
 }
@@ -40,7 +47,7 @@ function draw() {
     background(0);
     noStroke();
 
-    rectangles = rectangles.filter(rect => {
+    rectangles = rectangles.filter((rect) => {
         rect.update();
         rect.display();
         return rect.size > 0;

diff --git a/examples/2_edge_detection/sketch.js b/examples/2_edge_detection/sketch.js
@@ -1,6 +1,6 @@
 /**
  * This example demonstrates how to use the edge detection feature of p5.asciify.
- * 
+ *
  * The example creates a sketch that displays a number of rectangles that grow and shrink over time.
  * Each rectangle is displayed with a random color and angle.
  */
@@ -11,24 +11,28 @@ let rectangles = [];
 let maxRectangles = 30;
 
 function setup() {
-    createCanvas(windowWidth, windowHeight, WEBGL); 
+    createCanvas(windowWidth, windowHeight, WEBGL);
     sketchFramebuffer = createFramebuffer({ format: FLOAT });
 
-    setAsciiOptions({ // These are the default options, you can change them as needed in preload(), setup() or draw()
+    setAsciiOptions({
+        // These are the default options, you can change them as needed in preload(), setup() or draw()
         common: {
             fontSize: 8,
         },
+        ascii: {
+            renderMode: 'brightness'
+        },
         edge: {
             enabled: true, // false by default
             characters: "-/|\\-/|\\",
-            characterColor: '#ffffff',
+            characterColor: "#ffffff",
             characterColorMode: 1, // 0: sampled (default), 1: fixed
-            backgroundColor: '#000000',
+            backgroundColor: "#000000",
             backgroundColorMode: 1,
             invertMode: false,
             sobelThreshold: 0.01, // Tune the threshold values to adjust the edge detection
             sampleThreshold: 16,
-        }
+        },
     });
 
     for (let i = 0; i < maxRectangles; i++) rectangles.push(new Rectangle());
@@ -40,7 +44,7 @@ function draw() {
     background(0);
     noStroke();
 
-    rectangles = rectangles.filter(rect => {
+    rectangles = rectangles.filter((rect) => {
         rect.update();
         rect.display();
         return rect.size > 0;

diff --git a/examples/3_instance_mode/sketch.js b/examples/3_instance_mode/sketch.js
@@ -2,7 +2,7 @@ const theSketch = (sketch) => {
 
     p5asciify.instance(sketch); // Pass the p5 instance to the p5asciify library before setup
 
-    let kaleidoscopeEffect; 
+    let kaleidoscopeEffect;
     let distortionEffect;
 
     sketch.setup = () => {