hot reload perlin example on file change with custom webpack loader

torgeir · torgeir · commit 370c133b9039 · 2017-06-07T09:26:08.000+02:00
diff --git a/.gitignore b/.gitignore
@@ -0,0 +1 @@
+node_modules/
diff --git a/hot.js b/hot.js
@@ -0,0 +1,58 @@
+const acorn = require('acorn');
+
+/**
+ * webpack loader for hot patching top level functions on file change
+ * inspired by https://github.com/jlongster/monkey-hot-loader
+ */
+module.exports = function (source) {
+  if (this.cacheable) {
+    this.cacheable();
+  }
+
+  const ast = acorn.parse(source);
+  const names = JSON.stringify(
+    ast.body
+      .filter(node => node.type == 'FunctionDeclaration')
+      .map(node => node.id.name));
+
+  const s = `${source};
+var hot = module.hot;
+if (hot) {
+  hot.accept(err => console.log('error', err));
+
+  var keep = (bindings, evalstr) =>
+    hot.dispose(function (data) {
+      data.bindings = bindings;
+      data.evalstr = evalstr;
+    });
+
+  if (!hot.data) {
+    var bindings = {}, exports = module.exports;
+    ${names}.forEach(function (name) {
+      var f = eval(name);
+      var proxied = new Proxy(f, {
+        apply: function (f, self, args) {
+          return (bindings[name] || f).apply(self, args);
+        }
+      });
+      eval(name + " = proxied;");
+      if (exports[name]) exports[name] = proxied;
+    });
+    keep(bindings, str => eval(str));
+  }
+  else {
+    var data = hot.data, bindings = data.bindings;
+    ${names}.forEach(function (name) {
+      bindings[name] = data.evalstr(
+        '(' +
+        eval(name).toString()
+                  .replace(/^function \\w+\\(/,
+                           'function (') +
+        ')');
+    });
+    keep(bindings, data.evalstr);
+  }
+}`;
+
+  this.callback(null, s);
+};
diff --git a/package.json b/package.json
@@ -4,5 +4,16 @@
   "description": "Learning to master p5.js",
   "repository": "https://github.com/kgolid/p5ycho.git",
   "author": "Kjetil Midtgarden Golid",
-  "license": "ISC"
+  "license": "ISC",
+  "scripts": {
+    "watch": "webpack-dev-server --config webpack.config.js --hot"
+  },
+  "dependencies": {
+    "p5": "^0.5.11"
+  },
+  "devDependencies": {
+    "acorn": "^5.0.3",
+    "webpack": "^2.6.1",
+    "webpack-dev-server": "^2.4.5"
+  }
 }
diff --git a/perlin.html b/perlin.html
@@ -3,10 +3,7 @@
   <head>
     <meta charset="utf-8">
     <title>Generative Art</title>
-    <script src="https://cdnjs.cloudflare.com/ajax/libs/p5.js/0.5.10/p5.js"></script>
-    <script src="https://cdnjs.cloudflare.com/ajax/libs/p5.js/0.5.10/addons/p5.dom.js"></script>
-
-    <script src="sketches/perlin.js"></script>
+    <script src="perlin.js"></script>
   </head>
   <body style="margin:0; padding:0;">
   </body>
diff --git a/sketches/perlin.js b/sketches/perlin.js
diff --git a/sketches/perlin/perlin.js b/sketches/perlin/perlin.js
@@ -0,0 +1,34 @@
+const p5 = require('p5');
+
+const ui = require('./ui');
+
+var sketch = function (p) {
+  const w = p.windowWidth;
+  const h = p.windowHeight;
+  let t = 0;
+  let n = 800;
+  let particles = [];
+
+  p.setup = function() {
+    p.createCanvas(w, h);
+    p.stroke(0, 10);
+
+    for (var i = 0; i < n; i++) {
+      particles.push({
+          pos: p.createVector(p.random(w), p.random(h)),
+          vel: p.createVector(0,0),
+          seed: i
+        });
+    }
+  };
+
+  p.draw = function() {
+    particles.forEach( function(prtcl) {
+      ui.display(p, prtcl.pos, prtcl.vel);
+      ui.update(p, t, prtcl.pos, prtcl.vel, prtcl.seed);
+    });
+    t += 0.002;
+  };
+};
+
+new p5(sketch);
diff --git a/sketches/perlin/ui.js b/sketches/perlin/ui.js
@@ -0,0 +1,34 @@
+const p5 = require('p5');
+
+exports.update = update;
+exports.display = display;
+
+function display (p, pos, vel) {
+  //p.line(pos.x, pos.y, (pos.x + vel.x), (pos.y + vel.y));
+  //p.fill(0);
+  //p.ellipse(pos.x, pos.y, 50);
+  p.point(pos.x, pos.y);
+}
+
+function update (p, t, pos, vel, seed) {
+  const w = p.windowWidth;
+  const h = p.windowHeight;
+
+  pos.x = mod((pos.x + vel.x), w);
+  pos.y = mod((pos.y + vel.y), h);
+
+  var r = p5.Vector.fromAngle(p.noise(seed, t) * p.TWO_PI);
+  vel.x = r.x;
+  vel.y = r.y;
+
+  vel.add(flow(p, pos)).mult(3);
+}
+
+function flow (p, pos) {
+  let r = p.noise(pos.x / 100, pos.y / 100) * p.TWO_PI;
+  return p5.Vector.fromAngle(r).mult(2);
+}
+
+function mod (x, n) {
+  return ((x % n) + n ) % n;
+}
diff --git a/webpack.config.js b/webpack.config.js
@@ -0,0 +1,15 @@
+module.exports = {
+  entry: {
+    perlin: './sketches/perlin/perlin.js'
+  },
+
+  output: {
+    filename: "[name].js"
+  },
+
+  module: {
+    loaders: [
+      { test: /\.js$/, exclude: /node_modules/, loaders: ['./hot'] },
+    ]
+  }
+};
