From 9452b2a0bc5a24b2f23ff3fc1fad056c81fcc530 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Matt=C3=A9o=20Delabre?= Date: Wed, 23 Dec 2015 15:54:24 +0100 Subject: [PATCH] :bulb: Update bundle --- bundle.js | 186 ++++++++++++++++++++++++++++++++++-------------------- 1 file changed, 117 insertions(+), 69 deletions(-) diff --git a/bundle.js b/bundle.js index 2137384..91063fd 100644 --- a/bundle.js +++ b/bundle.js @@ -463,14 +463,7 @@ function _typeof(obj) { return obj && typeof Symbol !== "undefined" && obj.const }; }; }, {}], 6: [function (require, module, exports) { - 'use strict'; - - Object.defineProperty(exports, "__esModule", { - value: true - }); - exports.applyChaos = undefined; - - var _utils = require('./utils'); + 'use strict' /** * 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 width = image.width; + var applyChaos = exports.applyChaos = function applyChaos(image, start, iterations, transforms, weights, cb) { 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; - - image.data[i] = color[0]; - image.data[i + 1] = color[1]; - image.data[i + 2] = color[2]; - image.data[i + 3] = 255; + cb(point); } }; - }, { "./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.height = height + 2 * padding; + plotting.width = width; + 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; - height = content.node.clientHeight - 2 * padding; + width = content.node.clientWidth; + 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) { - '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]); + }, { "./chaos": 6, "./ifs": 7, "the-dom": 1 }] }, {}, [8]);