💡 Update bundle

bundle.js

@@ -463,14 +463,7 @@ function _typeof(obj) { return obj && typeof Symbol !== "undefined" && obj.const
             };
         };
     }, {}], 6: [function (require, module, exports) {
-        'use strict';
+        'use strict'
-
-        Object.defineProperty(exports, "__esModule", {
-            value: true
-        });
-        exports.applyChaos = undefined;
-
-        var _utils = require('./utils');
 
         /**
          * Choose an index at random among a list of weights,
@@ -479,6 +472,11 @@ function _typeof(obj) { return obj && typeof Symbol !== "undefined" && obj.const
          * @param {Array} weights List of weights
          * @return {number} Selected index
          */
+        ;
+
+        Object.defineProperty(exports, "__esModule", {
+            value: true
+        });
         var chooseIndex = function chooseIndex(weights) {
             var number = Math.random();
             var sum = 0,
@@ -504,8 +502,7 @@ function _typeof(obj) { return obj && typeof Symbol !== "undefined" && obj.const
          * @param {Array} weights Probability weights for each transform
          * @return {null}
          */
-        var applyChaos = exports.applyChaos = function applyChaos(image, start, iterations, transforms, weights) {
+        var applyChaos = exports.applyChaos = function applyChaos(image, start, iterations, transforms, weights, cb) {
-            var width = image.width;
             var point = start;
 
             if (weights === undefined) {
@@ -516,27 +513,52 @@ function _typeof(obj) { return obj && typeof Symbol !== "undefined" && obj.const
 
             while (iterations--) {
                 var index = chooseIndex(weights);
-                var color = (0, _utils.getColor)(2);
-
-                // console.log(point);
-                // console.log(point.map(x => Math.floor(x * 10 + 100)));
                 point = transforms[index](point);
 
-                var i = (Math.floor(point[1] * 50 + 50) * width + Math.floor(point[0] * 50 + 200)) * 4;
+                cb(point);
-
-                image.data[i] = color[0];
-                image.data[i + 1] = color[1];
-                image.data[i + 2] = color[2];
-                image.data[i + 3] = 255;
             }
         };
-    }, { "./utils": 8 }], 7: [function (require, module, exports) {
+    }, {}], 7: [function (require, module, exports) {
+        "use strict";
+
+        Object.defineProperty(exports, "__esModule", {
+            value: true
+        });
+
+        var linearTransform = function linearTransform(a, b, c, d, e, f) {
+            return function (point) {
+                return [a * point[0] + b * point[1] + e, c * point[0] + d * point[1] + f];
+            };
+        };
+
+        var polygonTransforms = function polygonTransforms(vertices, frac) {
+            return vertices.map(function (vertex) {
+                return linearTransform(frac, 0, 0, frac, vertex[0] * (frac - 1), vertex[1] * (frac - 1));
+            });
+        };
+
+        var barnsley = exports.barnsley = [[linearTransform(0, 0, 0, 0.16, 0, 0), linearTransform(.85, .04, -.04, .85, 0, 1.6), linearTransform(.20, -.26, .23, .22, 0, 1.6), linearTransform(-.15, .28, .26, .24, 0, .44)], [.01, .85, .07, .07]];
+
+        var sierpinski = exports.sierpinski = [polygonTransforms([[.866, .5], [-.866, .5], [0, -1]], 1 / 2), [1 / 3, 1 / 3, 1 / 3]];
+    }, {}], 8: [function (require, module, exports) {
         'use strict';
 
         var _theDom = require('the-dom');
 
         var _chaos = require('./chaos');
 
+        var _ifs = require('./ifs');
+
+        function _toConsumableArray(arr) {
+            if (Array.isArray(arr)) {
+                for (var i = 0, arr2 = Array(arr.length); i < arr.length; i++) {
+                    arr2[i] = arr[i];
+                }return arr2;
+            } else {
+                return Array.from(arr);
+            }
+        }
+
         var _html = (0, _theDom.html)(document);
 
         var body = _html.body;
@@ -545,24 +567,20 @@ function _typeof(obj) { return obj && typeof Symbol !== "undefined" && obj.const
         var plotting = body.find('#plotting').node;
         var ctx = plotting.getContext('2d');
 
-        var padding = 40; // padding between the canvas edges and the points
+        var dragging = false;
+        var center = undefined,
+            zoom = 200;
         var width = undefined,
             height = undefined;
 
-        var linearTransform = function linearTransform(a, b, c, d, e, f) {
-            return function (point) {
-                return [a * point[0] + b * point[1] + e, c * point[0] + d * point[1] + f];
-            };
-        };
-
         /**
          * Re-render the scene from scratch
          *
          * @return {null}
          */
         var render = function render() {
-            plotting.width = width + 2 * padding;
+            plotting.width = width;
-            plotting.height = height + 2 * padding;
+            plotting.height = height;
 
             // do not plot (very) small sizes
             if (width < 1) {
@@ -570,11 +588,27 @@ function _typeof(obj) { return obj && typeof Symbol !== "undefined" && obj.const
             }
 
             // do the chaos game
-            var image = ctx.getImageData(padding, padding, width, height);
+            var image = ctx.getImageData(0, 0, width, height);
+            var color = [0, 0, 0];
+            var skip = 50;
 
-            (0, _chaos.applyChaos)(image, [0, 0], 500000, [linearTransform(0, 0, 0, 0.16, 0, 0), linearTransform(.85, .04, -.04, .85, 0, 1.6), linearTransform(.20, -.26, .23, .22, 0, 1.6), linearTransform(-.15, .28, .26, .24, 0, .44)], [.01, .85, .07, .07]);
+            _chaos.applyChaos.apply(undefined, [image, [0, 0], 500000].concat(_toConsumableArray(_ifs.barnsley), [function (point) {
+                var x = Math.floor(point[0] * zoom + center[0]);
+                var y = height - Math.floor(point[1] * zoom + center[1]);
 
-            ctx.putImageData(image, padding, padding);
+                if (x >= 0 && x < width && y >= 0 && y < height && skip <= 0) {
+                    var i = (y * width + x) * 4;
+
+                    image.data[i] = color[0];
+                    image.data[i + 1] = color[1];
+                    image.data[i + 2] = color[2];
+                    image.data[i + 3] = 255;
+                }
+
+                skip -= 1;
+            }]));
+
+            ctx.putImageData(image, 0, 0);
         };
 
         /**
@@ -583,46 +617,60 @@ function _typeof(obj) { return obj && typeof Symbol !== "undefined" && obj.const
          * @return {null}
          */
         var resize = function resize() {
-            width = content.node.clientWidth - 2 * padding;
+            width = content.node.clientWidth;
-            height = content.node.clientHeight - 2 * padding;
+            height = content.node.clientHeight;
+            center = [Math.floor(width / 2), Math.floor(height / 2)];
 
             render();
         };
 
+        /**
+         * Zoom on the cursor position when using mouse wheel
+         */
+        content.on('wheel', function (event) {
+            var delta = event.deltaMode === 0 ? event.deltaY / 53 : event.deltaY;
+            var newZoom = zoom * (1 - delta * .035);
+
+            // which (unprojected) point does the mouse point on?
+            var mouse = [(event.offsetX - center[0]) / zoom, (height - event.offsetY - center[1]) / zoom];
+
+            // we need to set the center so that `mouse` stays at
+            // the same position on screen, i.e (vectorially):
+            //    mouse * newZoom + newCenter = mouse * zoom + center
+            // => newCenter = mouse * zoom - mouse * newZoom + center
+            center = [mouse[0] * zoom - mouse[0] * newZoom + center[0], mouse[1] * zoom - mouse[1] * newZoom + center[1]];
+
+            zoom = newZoom;
+            render();
+
+            event.preventDefault();
+        });
+
+        /**
+         * Pan the content with click-drag action
+         */
+        content.on('mousedown', function (event) {
+            return dragging = [event.offsetX, event.offsetY];
+        });
+        content.on('mouseup', function () {
+            return dragging = false;
+        });
+        content.on('mousemove', function (event) {
+            if (dragging !== false) {
+                var newMouse = [event.offsetX, event.offsetY];
+                var movement = [newMouse[0] - dragging[0], newMouse[1] - dragging[1]];
+
+                center[0] += movement[0];
+                center[1] -= movement[1];
+
+                render();
+                dragging = newMouse;
+
+                event.preventDefault();
+            }
+        });
+
         window.onresize = resize;
         resize();
-    }, { "./chaos": 6, "the-dom": 1 }], 8: [function (require, module, exports) {
+    }, { "./chaos": 6, "./ifs": 7, "the-dom": 1 }] }, {}, [8]);
-        'use strict';
-
-        Object.defineProperty(exports, "__esModule", {
-            value: true
-        });
-        var colors = ['#F44336', '#2196F3', '#4CAF50', '#F9A825', '#E91E63', '#00838F'].map(function (color) {
-            return color.match(/[A-F0-9]{2}/g).map(function (component) {
-                return parseInt(component, 16);
-            });
-        });
-
-        /**
-         * Get a random whole number
-         *
-         * @param {number} min Minimal value for the number
-         * @param {number} max Maximal value for the number (excluded)
-         * @return {number} Random number
-         */
-        var getRandomNumber = exports.getRandomNumber = function getRandomNumber(min, max) {
-            return Math.floor(Math.random() * (max - min)) + min;
-        };
-
-        /**
-         * Get a color at given index. For any given
-         * index, the same color will always be returned
-         *
-         * @param {number} index Color index
-         * @return {Array} RGB components
-         */
-        var getColor = exports.getColor = function getColor(index) {
-            return colors[index % colors.length];
-        };
-    }, {}] }, {}, [7]);