fixing printing, seededness

browser.js

@@ -1,56 +1,71 @@
-var config = require('./config');
 var assign = require('object-assign');
+var createConfig = require('./config');
 var createRenderer = require('./lib/createRenderer');
 var createLoop = require('raf-loop');
 
 var canvas = document.createElement('canvas');
 var background = new window.Image();
 var context = canvas.getContext('2d');
 
-var opts = assign({
-  backgroundImage: background,
-  context: context
-}, config);
+var loop = createLoop();
 
-var pixelRatio = typeof opts.pixelRatio === 'number' ? opts.pixelRatio : 1;
-canvas.width = opts.width * pixelRatio;
-canvas.height = opts.height * pixelRatio;
+window.addEventListener('resize', resize);
 
 document.body.style.margin = '0';
 document.body.style.overflow = 'hidden';
-document.body.style.background = opts.palette[0];
 document.body.appendChild(canvas);
 canvas.style.position = 'absolute';
-resize();
-window.addEventListener('resize', resize);
 
-background.onload = () => {
-  var renderer = createRenderer(opts);
+var randomize = () => reload(createConfig());
+randomize();
+window.addEventListener('mousedown', randomize);
+window.addEventListener('touchstart', randomize);
+
+function reload (config) {
+  loop.removeAllListeners('tick');
+  loop.stop();
+
+  var opts = assign({
+    backgroundImage: background,
+    context: context
+  }, config);
 
-  if (opts.debugLuma) {
-    renderer.debugLuma();
-  } else {
-    renderer.clear();
-    var stepCount = 0;
-    var loop = createLoop(() => {
-      renderer.step(opts.interval);
-      stepCount++;
-      if (!opts.endlessBrowser && stepCount > opts.steps) {
-        loop.stop();
-      }
-    }).start();
-  }
-};
+  var pixelRatio = typeof opts.pixelRatio === 'number' ? opts.pixelRatio : 1;
+  canvas.width = opts.width * pixelRatio;
+  canvas.height = opts.height * pixelRatio;
 
-background.src = config.backgroundSrc;
+  document.body.style.background = opts.palette[0];
+  resize();
+
+  background.onload = () => {
+    var renderer = createRenderer(opts);
+
+    if (opts.debugLuma) {
+      renderer.debugLuma();
+    } else {
+      renderer.clear();
+      var stepCount = 0;
+      loop.on('tick', () => {
+        renderer.step(opts.interval);
+        stepCount++;
+        if (!opts.endlessBrowser && stepCount > opts.steps) {
+          loop.stop();
+        }
+      })
+      loop.start();
+    }
+  };
+
+  background.src = config.backgroundSrc;
+}
 
 function resize () {
   letterbox(canvas, [ window.innerWidth, window.innerHeight ]);
 }
 
 // resize and reposition canvas to form a letterbox view
 function letterbox (element, parent) {
-  var aspect = opts.width / opts.height;
+  var aspect = element.width / element.height;
   var pwidth = parent[0];
   var pheight = parent[1];
 

config.js

@@ -1,52 +1,88 @@
-var SEED = String(Math.floor(Math.random() * 1000));
-console.log('Seed:', SEED);
-
 var seedRandom = require('seed-random');
 var palettes = require('./lib/color-palettes');
-var randomFunc = typeof SEED === 'undefined'
-  ? Math.random
-  : seedRandom(SEED);
-
-var random = require('./lib/random-range')(randomFunc);
-
-var maps = [
-  'maps/church2.jpg',
-  'maps/city4.jpg',
-  'maps/city5.jpg',
-  'maps/eye.jpg'
-];
-
-var mapSrc = maps[Math.floor(random(maps.length))];
-console.log(mapSrc);
-
-module.exports = {
-  // rendering options
-  random: randomFunc,
-  pointilism: random(0, 0.1),
-  noiseScalar: [ 0.0000001, 0.0002 ],
-  globalAlpha: 0.5,
-  startArea: random(0.05, 0.75),
-  maxRadius: random(10, 50),
-  lineStyle: 'square',
-  interval: 0.01,
-  count: Math.floor(random(50, 500)),
-  steps: 1000,
-  endlessBrowser: false, // Whether to endlessly step in browser
-
-  // background image that drives the algorithm
-  debugLuma: false,
-  backgroundScale: 1,
-  backgorundFille: 'black',
-  backgroundSrc: mapSrc,
-
-  // browser/node options
-  pixelRatio: 1,
-  width: 1280,
-  height: 720,
-  palette: palettes[Math.floor(random() * palettes.length)],
-
-  // node only options
-  asVideoFrames: false,
-  filename: 'render',
-  outputDir: 'output'
-};
+var createRandomRange = require('./lib/random-range');
+
+
+module.exports = function (seed) {
+  if (typeof seed === 'undefined') {
+    seed = String(Math.floor(Math.random() * 1000000));
+  }
+
+  console.log('Seed:', seed);
+
+  var randomFunc = seedRandom(seed);
+  var random = createRandomRange(randomFunc);
+
+  var maps = [
+    'maps/church2.jpg',
+    'maps/city4.jpg',
+    'maps/city2.jpg',
+    'maps/city5.jpg',
+    'maps/eye.jpg',
+    'maps/geo4.jpg',
+    'maps/sym3.jpg',
+    'maps/sym6.jpg',
+    'maps/map6.jpg',
+    'maps/map7.jpg',
+    'maps/scifi.jpg'
+  ];
+
+  var mapSrc = maps[Math.floor(random(maps.length))];
+  console.log(mapSrc);
+
+  var scalar = random(1) > 0.5 ? 1 : 2;
+
+  return {
+    // rendering options
+    random: randomFunc,
+    seedName: seed,
+    pointilism: random(0, 0.1),
+    noiseScalar: [ random(0.000001, 0.000001), random(0.0002, 0.004) ],
+    globalAlpha: 0.5,
+    startArea: random(0.0, 1.5),
+    maxRadius: random(5, 100),
+    lineStyle: random(1) > 0.5 ? 'round' : 'square',
+    interval: random(0.001, 0.01),
+    count: Math.floor(random(50, 2000)),
+    steps: Math.floor(random(100, 1000)) ,
+    endlessBrowser: false, // Whether to endlessly step in browser
+
+    // background image that drives the algorithm
+    debugLuma: false,
+    backgroundScale: 1,
+    backgorundFille: 'black',
+    backgroundSrc: mapSrc,
+
+    // browser/node options
+    pixelRatio: 1,
+    width: 1280 * scalar,
+    height: 720 * scalar,
+    palette: getPalette(),
+
+    // node only options
+    asVideoFrames: false,
+    filename: 'render',
+    outputDir: 'output'
+  };
+
+  function getPalette () {
+    var paletteColors = palettes[Math.floor(random() * palettes.length)];
+    return arrayShuffle(paletteColors);    
+  }
+
+  function arrayShuffle (arr) {
+    var rand;
+    var tmp;
+    var len = arr.length;
+    var ret = arr.slice();
+
+    while (len) {
+      rand = Math.floor(random(1) * len--);
+      tmp = ret[len];
+      ret[len] = ret[rand];
+      ret[rand] = tmp;
+    }
+
+    return ret;
+  }
+};

lib/createFileRenderer.js

@@ -17,7 +17,8 @@ module.exports = function (opt, cb) {
 
   var steps = opt.steps;
   var frameDigits = String(steps).length;
-  var filename = opt.filename || 'render';
+  var seedName = typeof opt.seedName !== 'undefined' ? ('_' + opt.seedName) : '';
+  var filename = (opt.filename || 'render') + seedName;
   var outputDir = opt.outputDir || process.cwd();
   var frame = 0;
   var interval = typeof opt.interval === 'number' ? opt.interval : 0.0001;
@@ -72,8 +73,8 @@ module.exports = function (opt, cb) {
   }
 
   function outputCanvas (isAsync, cb) {
-    var stamp = isAsync ? padLeft(frame, frameDigits, '0') : Date.now();
-    var filePath = path.resolve(outputDir, filename + '_' + stamp + '.png');
+    var stamp = isAsync ? ('_' + padLeft(frame, frameDigits, '0')) : '';
+    var filePath = path.resolve(outputDir, filename + stamp + '.png');
     fs.writeFile(filePath, canvas.toBuffer(), cb);
   }
 };

print.js

@@ -0,0 +1,10 @@
+var createConfig = require('./config');
+var createFileRenderer = require('./lib/createFileRenderer');
+
+// do all that jazz
+var seed = typeof process.argv[2] !== 'undefined'
+  ? String(process.argv[2])
+  : undefined;
+var config = createConfig(seed);
+
+createFileRenderer(config);