begin sketch 3

app/assets/3/index.html

@@ -0,0 +1 @@
+../../sketch-template.html

app/assets/index.html

@@ -12,6 +12,7 @@
       <ol>
         <li><a class="sketch" href="1/">gradient burst</a></li>
         <li><a class="sketch" href="2/">gradient jungle</a></li>
+        <li><a class="sketch" href="3/">untitled</a></li>
       </ol>
     </main>
   </body>

app/sketches/3.js

@@ -0,0 +1,149 @@
+new p5(sketch => {
+  sketch.disableFriendlyErrors = false;
+  // reused dimensions and a seed
+  let seed, width, height, goalInstances, noiseResolution;
+  // offscreen layers
+  let buffer, pass1, noise;
+  // shaders
+  let whiteNoise;
+
+  sketch.preload = () => {
+    whiteNoise = sketch.loadShader(
+      '../shaders/base.vert',
+      '../shaders/white-noise.frag'
+    );
+  }
+
+  sketch.setup = () => {
+    filenamePrefix = 'seigler-p5-3-untitled';
+    goalInstances = 40000;
+    noiseResolution = [2, 2, 2, 2];
+
+    window.onhashchange = () => {
+      seed = window.location.hash.substr(1);
+      generate();
+    };
+
+    seed = window.location.hash.substr(1);
+    sketch.noStroke();
+    sketch.colorMode(sketch.HSL, 1);
+
+    width = sketch.windowWidth;
+    height = sketch.windowHeight;
+
+    sketch.createCanvas(width, height);
+
+    // buffer = sketch.createGraphics(maxD, maxD);
+    // pass1 = sketch.createGraphics(maxD, maxD, sketch.WEBGL);
+    noise = sketch.createGraphics(width, height, sketch.WEBGL);
+
+    // buffer.noStroke();
+    // pass1.noStroke();
+    noise.noStroke();
+
+    generate();
+  };
+
+  sketch.draw = () => {
+  };
+
+  sketch.keyPressed = () => {
+    if (sketch.key == ' ') {
+      seed = null;
+      generate();
+    } else if (sketch.key == 's') {
+      sketch.saveCanvas(filenamePrefix + seed + '.jpg', 'jpg');
+    }
+  };
+
+  sketch.doubleClicked = () => {
+    seed = null;
+    generate();
+  };
+
+  let resizeTimer;
+  sketch.windowResized = () => {
+    clearTimeout(resizeTimer);
+    resizeTimer = setTimeout(() => {
+      window.location.reload();
+    }, 100);
+  };
+
+  function generate() {
+    if (seed) {
+      sketch.randomSeed(seed);
+    } else {
+      let seed = Math.floor(sketch.random(1000000000000));
+      window.location.hash = seed;
+      sketch.randomSeed(seed);
+    }
+
+    sketch.noiseSeed(sketch.random(0, 1000000000));
+    sketch.blendMode(sketch.BLEND);
+    sketch.background('#777');
+
+    // square pixels per circle, helps with gridding
+    let sqpxEach = width * height / goalInstances;
+    let unit = Math.sqrt(sqpxEach);
+    let rows = Math.max(1, Math.round(height / unit)) + 1;
+    let cols = Math.max(1, Math.round(width / unit)) + 1;
+    let noiseOffset = 1000.37;
+    let gridPoints = [];
+    for (let index = 0; index < rows * cols; index++) {
+      let col = index % cols;
+      let row = Math.floor(index / cols);
+      let noise = noiseResolution.map(
+        (resolution, noiseIndex) => (
+          sketch.noise(
+            noiseOffset * noiseIndex + row / rows * resolution,
+            noiseOffset * noiseIndex + col / cols * resolution
+          )
+        )
+      );
+      gridPoints.push({
+        row,
+        col,
+        noise
+      });
+    }
+    shuffle(gridPoints);
+    gridPoints.forEach(({row, col, noise: [n0, n1, n2, n3]}) => {
+      if (sketch.random() > 1.25 * n0 - 0.25) { return; }
+      let x = width / (cols - 1) * col - unit / 2;
+      let y = height / (rows - 1) * row - unit / 2;
+      let angle = 2 * Math.PI * n2;
+      let length = (4 * n3* n3 + 1) * unit;
+      sketch.stroke(
+        27/360, // hue
+        0.27, // saturation
+        0.9 * n1 + 0.1 * Math.pow(sketch.random(), 2) - 0.05 // lightness
+      );
+      sketch.strokeWeight(unit * (1 + 1 * n3 * n3));
+      sketch.line(
+        x - length * Math.cos(angle),
+        y - length * Math.sin(angle),
+        x + length * Math.cos(angle),
+        y + length * Math.sin(angle)
+      );
+    });
+    // noise.shader(whiteNoise);
+    // whiteNoise.setUniform('u_resolution', [width, height]);
+    // whiteNoise.setUniform('u_alpha', 0.05);
+    // noise.rect(0, 0, width, height);
+
+    // sketch.blendMode(sketch.OVERLAY);
+    // sketch.image(noise, 0, 0);
+  }
+
+  function shuffle(array) { // Fisher-Yates shuffle
+    var i = 0, j = 0, temp = null;
+
+    for (i = array.length - 1; i > 0; i -= 1) {
+      j = Math.floor(sketch.random() * (i + 1));
+      temp = array[i];
+      array[i] = array[j];
+      array[j] = temp;
+    }
+  }
+
+});

brunch-config.js

@@ -14,10 +14,6 @@ exports.modules = {
 };
 
 exports.plugins = {
-  babel: {
-    presets: ['env'],
-    ignore: /^node_modules/
-  },
   uglify: {
     ignored: /^node_modules/
   },

package.json

@@ -5,9 +5,9 @@
     "repository": "",
     "scripts": {
         "start": "brunch watch --server",
-        "build": "rm -rf public/ && brunch build --production",
+        "build": "rm -rf dist/ && brunch build --production",
         "deploy": "npm run build && npm run push-gh-pages",
-        "push-gh-pages": "git-directory-deploy --directory public/"
+        "push-gh-pages": "git-directory-deploy --directory dist/"
     },
     "version": "1.0.0",
     "dependencies": {
@@ -15,9 +15,8 @@
     },
     "devDependencies": {
         "auto-reload-brunch": "^2.7.1",
-        "babel-brunch": "^7.0.1",
-        "babel-preset-env": "^1.6.1",
         "brunch": "^2.10.17",
+        "buble-brunch": "^2.0.0",
         "clean-css-brunch": "^2.10.0",
         "copycat-brunch": "^1.1.1",
         "digest-brunch": "^1.6.0",