Merge pull request #188 from mattdesl/prettier-format

Prettier formatting

Author: mattdesl

examples/experimental/animated-scribble-curves-md.js

@@ -3,20 +3,20 @@
  * @author Matt DesLauriers (@mattdesl)
  */
 
-const canvasSketch = require('canvas-sketch');
-const canvasPainter = require('./util/canvas-painter');
+const canvasSketch = require("canvas-sketch");
+const canvasPainter = require("./util/canvas-painter");
 
-const Random = require('./util/random');
-const { clamp, linspace } = require('./util/math');
+const Random = require("./util/random");
+const { clamp, linspace } = require("./util/math");
 
 // Setup our sketch & export parameters
 const settings = {
-  dimensions: [ 1024, 1024 ],
+  dimensions: [1024, 1024],
   animate: true,
   fps: 24,
   duration: 6,
   scaleToView: true,
-  playbackRate: 'throttle'
+  playbackRate: "throttle",
 };
 
 const sketch = ({ context, width, height, render }) => {
@@ -55,13 +55,13 @@ const sketch = ({ context, width, height, render }) => {
 
     // Create the full curve
     // Note: This is a bit inefficient! We could just compute only the slice we want.
-    const array = linspace(resolution, true).map(t => {
+    const array = linspace(resolution, true).map((t) => {
       const angle = Math.PI * 2 * t;
 
       // Get point along torus
       let point = torus(torusRadius, torusInnerRadius, angle, rotation);
 
-      let [ x, y, z ] = point;
+      let [x, y, z] = point;
 
       // Apply noise frequency to coordinates
       x *= freq;
@@ -71,7 +71,7 @@ const sketch = ({ context, width, height, render }) => {
       // Compute noise coordinates
       return [
         amplitude * Random.noise4D(x, y, z, -1),
-        amplitude * Random.noise4D(x, y, z, 1)
+        amplitude * Random.noise4D(x, y, z, 1),
       ];
     });
 
@@ -92,17 +92,17 @@ const sketch = ({ context, width, height, render }) => {
   // Gets new random noise & hue
   const randomize = () => {
     // Reset our random noise function to a new seed
-    Random.setSeed( '849151'||Random.getRandomSeed());
+    Random.setSeed("849151" || Random.getRandomSeed());
     // Choose a new starting hue
     hueStart = Random.value();
     // Log the seed for later reproducibility
-    console.log('Seed:', Random.getSeed());
+    console.log("Seed:", Random.getSeed());
   };
 
   return {
     render: ({ context, width, height, playhead }) => {
       // Clear the background with nearly black
-      context.fillStyle = 'pink';
+      context.fillStyle = "pink";
       context.fillRect(0, 0, width, height);
 
       context.save();
@@ -119,16 +119,16 @@ const sketch = ({ context, width, height, render }) => {
       const hsl = [
         Math.floor(hue * 360),
         `${Math.floor(100 * sat)}%`,
-        `${Math.floor(100 * light)}%`
-      ].join(', ');
+        `${Math.floor(100 * light)}%`,
+      ].join(", ");
       const stroke = `hsl(${hsl})`;
 
       const line = generate(playhead);
       painter.polyline(line, {
         stroke,
         lineWidth: 6 / scale,
-        linecap: 'round',
-        lineJoin: 'round'
+        linecap: "round",
+        lineJoin: "round",
       });
 
       context.restore();
@@ -137,7 +137,7 @@ const sketch = ({ context, width, height, render }) => {
       // On loop start, re-compute the noise tables so we get a new
       // set of random values on the next loop
       randomize();
-    }
+    },
   };
 };
 

examples/experimental/canvas-card-simple.js

@@ -1,12 +1,12 @@
-const canvasSketch = require('canvas-sketch');
+const canvasSketch = require("canvas-sketch");
 
 const settings = {
   // Output resolution, we can use 300PPI for print
   pixelsPerInch: 300,
   // Standard business card size
-  dimensions: [ 3.5, 2 ],
+  dimensions: [3.5, 2],
   // all our dimensions and rendering units will use inches
-  units: 'in'
+  units: "in",
 };
 
 const sketch = ({ context }) => {
@@ -21,14 +21,14 @@ const sketch = ({ context }) => {
   return ({ context, width, height, frame }) => {
     // Fill page with solid color
     // The 'width' and 'height' will be in inches here
-    context.fillStyle = '#000';
+    context.fillStyle = "#000";
     context.fillRect(0, 0, width, height);
 
-    context.strokeStyle = '#fff';
-    context.fillStyle = '#fff';
+    context.strokeStyle = "#fff";
+    context.fillStyle = "#fff";
     context.lineWidth = 0.01;
     for (let i = 0; i < 5; i++) {
-      const x = i / 4 * width;
+      const x = (i / 4) * width;
       const y = height / 2;
       const radius = i % 2 === 0 ? 0.5 : 0.25;
       const fill = i % 4 === 0;

examples/experimental/canvas-dancing-scribble.1.js

@@ -1,54 +1,54 @@
-const canvasSketch = require('canvas-sketch');
-const { vec2, quat, mat4 } = require('gl-matrix');
-const defined = require('defined');
-const { cubicSpline } = require('./util/geom');
-const Random = require('./util/random');
-const { clamp, lerp, lerpArray, expand2D, linspace } = require('./util/math');
-const simplify = require('simplify-path');
-const hsl2rgb = require('float-hsl2rgb');
+const canvasSketch = require("canvas-sketch");
+const { vec2, quat, mat4 } = require("gl-matrix");
+const defined = require("defined");
+const { cubicSpline } = require("./util/geom");
+const Random = require("./util/random");
+const { clamp, lerp, lerpArray, expand2D, linspace } = require("./util/math");
+const simplify = require("simplify-path");
+const hsl2rgb = require("float-hsl2rgb");
 //73787, 720474, 822882, 40002, 708321
 // Random.setSeed(Random.getRandomSeed());
-Random.setSeed('708321');
-console.log('Seed', Random.getSeed());
+Random.setSeed("708321");
+console.log("Seed", Random.getSeed());
 
 const settings = {
-  dimensions: [ 1024, 1024 ],
+  dimensions: [1024, 1024],
   // exportPixelRatio: 2,
   animate: true,
   fps: 24,
   scaleToView: true,
   duration: 20,
-  playbackRate: 'throttle'
+  playbackRate: "throttle",
 };
 
 const colors = {
-  background: '#f4d9be',
-  foreground: '#ff911c',
-  pen: '#1975ff'
+  background: "#f4d9be",
+  foreground: "#ff911c",
+  pen: "#1975ff",
 };
 
 const sketch = ({ context, width, height, render }) => {
   const paint = (opt = {}) => {
     let fill = opt.fill;
     let stroke = opt.stroke;
-    const defaultColor = 'black';
+    const defaultColor = "black";
     const alpha = defined(opt.alpha, 1);
 
     // Default to fill-only
     if (opt.fill == null && opt.stroke == null) fill = true;
 
     if (fill) {
       const fillAlpha = defined(opt.fillAlpha, 1);
-      context.fillStyle = typeof fill === 'boolean' ? defaultColor : fill;
+      context.fillStyle = typeof fill === "boolean" ? defaultColor : fill;
       context.globalAlpha = alpha * fillAlpha;
       context.fill();
     }
     if (stroke) {
       const strokeAlpha = defined(opt.strokeAlpha, 1);
-      context.strokeStyle = typeof stroke === 'boolean' ? defaultColor : stroke;
+      context.strokeStyle = typeof stroke === "boolean" ? defaultColor : stroke;
       context.lineWidth = defined(opt.lineWidth, 1);
-      context.lineCap = opt.lineCap || 'butt';
-      context.lineJoin = opt.lineJoin || 'miter';
+      context.lineCap = opt.lineCap || "butt";
+      context.lineJoin = opt.lineJoin || "miter";
       context.miterLimit = defined(opt.miterLimit, 10);
       context.globalAlpha = alpha * strokeAlpha;
       context.stroke();
@@ -63,27 +63,24 @@ const sketch = ({ context, width, height, render }) => {
     paint(opt);
   };
 
-  const segment = (x, y, length, angle, opt = {}) => {
-
-  };
+  const segment = (x, y, length, angle, opt = {}) => {};
 
   const polyline = (path, opt = {}) => {
     context.beginPath();
-    path.forEach(point => context.lineTo(point[0], point[1]));
+    path.forEach((point) => context.lineTo(point[0], point[1]));
     if (opt.closed) context.closePath();
     paint(opt);
   };
 
   const polylines = (lines, opt = {}) => {
-    lines.forEach(path => {
+    lines.forEach((path) => {
       context.beginPath();
-      path.forEach(point => context.lineTo(point[0], point[1]));
+      path.forEach((point) => context.lineTo(point[0], point[1]));
       if (opt.closed) context.closePath();
       paint(opt);
     });
   };
 
-
   // Wavy line across the page
   // const line = arcs01(100).map(t => {
   //   return [ t * 2 - 1, Random.noise1D(t * 5) * 0.25 ];
@@ -122,7 +119,7 @@ const sketch = ({ context, width, height, render }) => {
     const amplitude = 0.7;
     const freq = 2.0;
     const resolution = 5000;
-    const array = linspace(resolution, true).map(t => {
+    const array = linspace(resolution, true).map((t) => {
       // const angle = Math.PI * 2 * t;
       // let point = [ Math.cos(angle), Math.sin(angle) ];
       // vec2.scale(point, point, freq);
@@ -134,10 +131,10 @@ const sketch = ({ context, width, height, render }) => {
       const angle = Math.PI * 2 * t;
       let point = torus(0.25, 1.5, angle, theta * 5);
       vec2.scale(point, point, freq);
-      const [ x, y, z ] = point;
+      const [x, y, z] = point;
       return [
         amplitude * Random.noise4D(x, y, z, -1),
-        amplitude * Random.noise4D(x, y, z, 1)
+        amplitude * Random.noise4D(x, y, z, 1),
       ];
     });
 
@@ -191,17 +188,17 @@ const sketch = ({ context, width, height, render }) => {
   // }
 
   return ({ context, width, height, playhead }) => {
-    context.fillStyle = 'hsl(0, 0%, 5%)';
-    context.globalCompositeOperation = 'source-over';
+    context.fillStyle = "hsl(0, 0%, 5%)";
+    context.globalCompositeOperation = "source-over";
     context.fillRect(0, 0, width, height);
 
     context.save();
     context.translate(width / 2, height / 2);
     const scale = width / 2;
     context.scale(scale, scale);
 
-    context.lineJoin = 'round';
-    context.lineCap = 'round';
+    context.lineJoin = "round";
+    context.lineCap = "round";
 
     // polylines(lines, {
     //   stroke: 'black',
@@ -234,8 +231,10 @@ const sketch = ({ context, width, height, render }) => {
       polyline(line, {
         // fill: 'black',
         // closed: true,
-        stroke: `rgb(${hsl2rgb([ h, s, l ]).map(n => Math.floor(n * 255)).join(', ')})`,
-        lineWidth: 6 / scale
+        stroke: `rgb(${hsl2rgb([h, s, l])
+          .map((n) => Math.floor(n * 255))
+          .join(", ")})`,
+        lineWidth: 6 / scale,
       });
     }