From 6d6af1092dd39fe3bc4d063261f01ef5004f5ed4 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Matt=C3=A9o=20Delabre?= Date: Mon, 21 Dec 2015 23:50:48 +0100 Subject: [PATCH] :bug: Full ES6 => ES5 transpiling --- bundle.js | 1087 ++++++++++++++++++++++++++++---------------------- package.json | 4 +- 2 files changed, 608 insertions(+), 483 deletions(-) diff --git a/bundle.js b/bundle.js index 600cd80..59767d7 100644 --- a/bundle.js +++ b/bundle.js @@ -1,531 +1,654 @@ -(function e(t,n,r){function s(o,u){if(!n[o]){if(!t[o]){var a=typeof require=="function"&&require;if(!u&&a)return a(o,!0);if(i)return i(o,!0);var f=new Error("Cannot find module '"+o+"'");throw f.code="MODULE_NOT_FOUND",f}var l=n[o]={exports:{}};t[o][0].call(l.exports,function(e){var n=t[o][1][e];return s(n?n:e)},l,l.exports,e,t,n,r)}return n[o].exports}var i=typeof require=="function"&&require;for(var o=0;o wrapNode(node); +(function e(t, n, r) { + function s(o, u) { + if (!n[o]) { + if (!t[o]) { + var a = typeof require == "function" && require;if (!u && a) return a(o, !0);if (i) return i(o, !0);var f = new Error("Cannot find module '" + o + "'");throw f.code = "MODULE_NOT_FOUND", f; + }var l = n[o] = { exports: {} };t[o][0].call(l.exports, function (e) { + var n = t[o][1][e];return s(n ? n : e); + }, l, l.exports, e, t, n, r); + }return n[o].exports; + }var i = typeof require == "function" && require;for (var o = 0; o < r.length; o++) { + s(r[o]); + }return s; +})({ 1: [function (require, module, exports) { + 'use strict'; -/** - * Import an HTML document into `the-dom` - * - * @param {HTMLDocument} doc Document to import - * @return {Object} A hash with doctype, body, head, html props - */ -exports.html = doc => ({ - create: name => doc.createElement(name), - body: wrapNode(doc.body), - head: wrapNode(doc.head), - html: wrapNode(doc.documentElement), - doctype: wrapNode(doc.doctype) -}); + var wrapNode = require('./lib/node'); -},{"./lib/node":3}],2:[function(require,module,exports){ -'use strict'; + /** + * Import given node into `the-dom` + * + * @param {Node} node Node to import + * @return {Object} Wrapped node + */ + exports.import = function (node) { + return wrapNode(node); + }; -const utils = require('./utils'); + /** + * Import an HTML document into `the-dom` + * + * @param {HTMLDocument} doc Document to import + * @return {Object} A hash with doctype, body, head, html props + */ + exports.html = function (doc) { + return { + create: function create(name) { + return doc.createElement(name); + }, + body: wrapNode(doc.body), + head: wrapNode(doc.head), + html: wrapNode(doc.documentElement), + doctype: wrapNode(doc.doctype) + }; + }; + }, { "./lib/node": 3 }], 2: [function (require, module, exports) { + 'use strict'; -const split = utils.split; -const iterateArray = utils.iterateArray; + var utils = require('./utils'); -/** - * Create an object to manipulate given node's CSS classes - * - * @param {HTMLElement} node Input element - * @see `Set` documentation for behaviour information - * @return {Object} Set-like object - */ -const wrapClass = node => { - const res = { - add: function (el) { - if (!this.has(el)) { - const classes = split(node.className); + var split = utils.split; + var iterateArray = utils.iterateArray; - classes.push(el); - node.className = classes.join(' '); + /** + * Create an object to manipulate given node's CSS classes + * + * @param {HTMLElement} node Input element + * @see `Set` documentation for behaviour information + * @return {Object} Set-like object + */ + var wrapClass = function wrapClass(node) { + var res = { + add: function add(el) { + if (!this.has(el)) { + var classes = split(node.className); + + classes.push(el); + node.className = classes.join(' '); + } + + return this; + }, + + delete: function _delete(el) { + var classes = split(node.className), + pos = classes.indexOf(el); + + if (pos > -1) { + classes.splice(pos, 1); + node.className = classes.join(' '); + return true; + } + + return false; + }, + + has: function has(el) { + return split(node.className).indexOf(el) !== -1; + }, + clear: function clear() { + return node.className = ''; + }, + + get size() { + return split(node.className).length; + }, + + keys: function keys() { + return iterateArray(split(node.className)); + }, + values: function values() { + return iterateArray(split(node.className)); + }, + entries: function entries() { + return iterateArray(split(node.className).map(function (el) { + return [el, el]; + })); + }, + + forEach: function forEach(callback, thisArg) { + var _iteratorNormalCompletion = true; + var _didIteratorError = false; + var _iteratorError = undefined; + + try { + for (var _iterator = this[Symbol.iterator](), _step; !(_iteratorNormalCompletion = (_step = _iterator.next()).done); _iteratorNormalCompletion = true) { + var cls = _step.value; + + callback.call(thisArg, cls, cls, this); + } + } catch (err) { + _didIteratorError = true; + _iteratorError = err; + } finally { + try { + if (!_iteratorNormalCompletion && _iterator.return) { + _iterator.return(); + } + } finally { + if (_didIteratorError) { + throw _iteratorError; + } + } + } + } + }; + + res[Symbol.iterator] = res.values; + return res; + }; + + module.exports = wrapClass; + }, { "./utils": 5 }], 3: [function (require, module, exports) { + 'use strict'; + + var wrapClass = require('./class'); + var wrapStyle = require('./style'); + var split = require('./utils').split; + + /** + * Ensure a node is not wrapped before using it in native methods + * + * @param {Node|Object} node A node, wrapped or not + * @return {Node} Unwrapped node + */ + var unwrap = function unwrap(node) { + return (typeof node === "undefined" ? "undefined" : _typeof(node)) !== 'object' || node === null || !node.node ? node : node.node; + }; + + /** + * Turn a NodeList/HTMLCollection into an array + * for easy manipulation + * + * @param {NodeList|HTMLCollection} list Input collection + * @return {Array} Wrapping array + */ + var wrapList = function wrapList(list) { + var length = list.length; + var result = []; + + for (var i = 0; i < length; i += 1) { + result.push(wrapNode(list.item(i))); } - return this; - }, + return Object.assign(result, { + on: function on(evts, handler) { + result.forEach(function (node) { + return node.on(evts, handler); + }); + }, - delete: el => { - const classes = split(node.className), pos = classes.indexOf(el); - - if (pos > -1) { - classes.splice(pos, 1); - node.className = classes.join(' '); - return true; - } - - return false; - }, - - has: el => split(node.className).indexOf(el) !== -1, - clear: () => node.className = '', - - get size() { - return split(node.className).length; - }, - - keys: () => iterateArray(split(node.className)), - values: () => iterateArray(split(node.className)), - entries: () => iterateArray(split(node.className).map(el => [el, el])), - - forEach: function (callback, thisArg) { - for (let cls of this) { - callback.call(thisArg, cls, cls, this); - } - } - }; - - res[Symbol.iterator] = res.values; - return res; -}; - -module.exports = wrapClass; - -},{"./utils":5}],3:[function(require,module,exports){ -'use strict'; - -const wrapClass = require('./class'); -const wrapStyle = require('./style'); -const split = require('./utils').split; - -/** - * Ensure a node is not wrapped before using it in native methods - * - * @param {Node|Object} node A node, wrapped or not - * @return {Node} Unwrapped node - */ -const unwrap = node => - (typeof node !== 'object' || node === null || !node.node) ? node : node.node; - -/** - * Turn a NodeList/HTMLCollection into an array - * for easy manipulation - * - * @param {NodeList|HTMLCollection} list Input collection - * @return {Array} Wrapping array - */ -const wrapList = list => { - const length = list.length; - let result = []; - - for (let i = 0; i < length; i += 1) { - result.push(wrapNode(list.item(i))); - } - - return Object.assign(result, { - on: (evts, handler) => { - result.forEach(node => node.on(evts, handler)); - }, - - off: (evts, handler) => { - result.forEach(node => node.off(evts, handler)); - } - }); -}; - -/** - * Create an object of shortcuts to manipulate - * given node more easily - * - * @param {Node} Input node - * @return {Object} DOM shortcuts - */ -const wrapNode = node => { - if (node === null || typeof node !== 'object') { - return null; - } - - return { - node, - - // search among children - find: query => wrapNode(node.querySelector(query)), - findAll: query => wrapList(node.querySelectorAll(query)), - - // access node's relative tree (parent, children, siblings) - equal: el => unwrap(el) === node, - - get following() { - return wrapNode(node.nextElementSibling); - }, - - get preceding() { - return wrapNode(node.previousElementSibling); - }, - - get parent() { - return wrapNode(node.parentNode); - }, - - get children() { - return wrapList(node.children); - }, - - // check relative positions - precedes: el => !!(unwrap(el).compareDocumentPosition(node) & 2), - follows: el => !!(unwrap(el).compareDocumentPosition(node) & 4), - contains: el => !!(unwrap(el).compareDocumentPosition(node) & 8), - contained: el => !!(unwrap(el).compareDocumentPosition(node) & 16), - - // get and set element attributes - get name() { - return node.tagName.toLowerCase().trim(); - }, - - get type() { - switch (node.nodeType) { - case 1: return 'element'; - case 3: return 'text'; - case 7: return 'processing-instruction'; - case 8: return 'comment'; - case 9: return 'document'; - case 10: return 'document-type'; - case 11: return 'document-fragment'; - default: return null; - } - }, - - getAttr: attr => node.getAttribute(attr), - setAttr: (attr, value) => node.setAttribute(attr, value), - - // place an element in the DOM tree - append: subnode => node.appendChild(unwrap(subnode)), - attach: parent => unwrap(parent).appendChild(node), - remove: child => { - if (child) { - node.removeChild(unwrap(child)); - return; - } - - node.parentNode.removeChild(node); - }, - - // manipulate element's CSS (see wrapClass, wrapStyle) - class: wrapClass(node), - style: wrapStyle(node), - - // change an element's content - get text() { - return node.textContent; - }, - - set text(val) { - node.textContent = val; - }, - - get html() { - return node.innerHTML; - }, - - set html(val) { - node.innerHTML = val; - }, - - // listen to events - on: (evts, handler) => { - split(evts).forEach(evt => { - node.addEventListener(evt, handler); + off: function off(evts, handler) { + result.forEach(function (node) { + return node.off(evts, handler); + }); + } }); - }, + }; - off: (evts, handler) => { - split(evts).forEach(evt => { - node.removeEventListener(evt, handler); + /** + * Create an object of shortcuts to manipulate + * given node more easily + * + * @param {Node} Input node + * @return {Object} DOM shortcuts + */ + var wrapNode = function wrapNode(node) { + if (node === null || (typeof node === "undefined" ? "undefined" : _typeof(node)) !== 'object') { + return null; + } + + return { + node: node, + + // search among children + find: function find(query) { + return wrapNode(node.querySelector(query)); + }, + findAll: function findAll(query) { + return wrapList(node.querySelectorAll(query)); + }, + + // access node's relative tree (parent, children, siblings) + equal: function equal(el) { + return unwrap(el) === node; + }, + + get following() { + return wrapNode(node.nextElementSibling); + }, + + get preceding() { + return wrapNode(node.previousElementSibling); + }, + + get parent() { + return wrapNode(node.parentNode); + }, + + get children() { + return wrapList(node.children); + }, + + // check relative positions + precedes: function precedes(el) { + return !!(unwrap(el).compareDocumentPosition(node) & 2); + }, + follows: function follows(el) { + return !!(unwrap(el).compareDocumentPosition(node) & 4); + }, + contains: function contains(el) { + return !!(unwrap(el).compareDocumentPosition(node) & 8); + }, + contained: function contained(el) { + return !!(unwrap(el).compareDocumentPosition(node) & 16); + }, + + // get and set element attributes + get name() { + return node.tagName.toLowerCase().trim(); + }, + + get type() { + switch (node.nodeType) { + case 1: + return 'element'; + case 3: + return 'text'; + case 7: + return 'processing-instruction'; + case 8: + return 'comment'; + case 9: + return 'document'; + case 10: + return 'document-type'; + case 11: + return 'document-fragment'; + default: + return null; + } + }, + + getAttr: function getAttr(attr) { + return node.getAttribute(attr); + }, + setAttr: function setAttr(attr, value) { + return node.setAttribute(attr, value); + }, + + // place an element in the DOM tree + append: function append(subnode) { + return node.appendChild(unwrap(subnode)); + }, + attach: function attach(parent) { + return unwrap(parent).appendChild(node); + }, + remove: function remove(child) { + if (child) { + node.removeChild(unwrap(child)); + return; + } + + node.parentNode.removeChild(node); + }, + + // manipulate element's CSS (see wrapClass, wrapStyle) + class: wrapClass(node), + style: wrapStyle(node), + + // change an element's content + get text() { + return node.textContent; + }, + + set text(val) { + node.textContent = val; + }, + + get html() { + return node.innerHTML; + }, + + set html(val) { + node.innerHTML = val; + }, + + // listen to events + on: function on(evts, handler) { + split(evts).forEach(function (evt) { + node.addEventListener(evt, handler); + }); + }, + + off: function off(evts, handler) { + split(evts).forEach(function (evt) { + node.removeEventListener(evt, handler); + }); + } + }; + }; + + module.exports = wrapNode; + }, { "./class": 2, "./style": 4, "./utils": 5 }], 4: [function (require, module, exports) { + 'use strict'; + + var iterateArray = require('./utils').iterateArray; + + /** + * Create an object to manipulate given node's CSS styles + * + * @param {HTMLElement} node Input element + * @see `Map` documentation for behaviour information + * @return {Object} Map-like object + */ + var wrapStyle = function wrapStyle(node) { + var res = { + set: function set(prop, value) { + node.style.setProperty(prop, value); + return this; + }, + + delete: function _delete(prop) { + return node.style.removeProperty(prop) !== ''; + }, + has: function has(prop) { + return [].slice.call(node.style).indexOf(prop) > -1; + }, + + get: function get(prop) { + var result = node.style.getPropertyValue(prop); + + if (result.trim() === '') { + return undefined; + } + + return result; + }, + + clear: function clear() { + var length = node.style.length; + + for (var i = 0; i < length; i += 1) { + node.style.removeProperty(node.style[i]); + } + }, + + get size() { + return node.style.length; + }, + + keys: function keys() { + return iterateArray([].slice.call(node.style)); + }, + values: function values() { + return iterateArray([].slice.call(node.style).map(function (prop) { + return node.style.getPropertyValue(prop); + })); + }, + entries: function entries() { + return iterateArray([].slice.call(node.style).map(function (prop) { + return [prop, node.style.getPropertyValue(prop)]; + })); + }, + + forEach: function forEach(callback, thisArg) { + var _iteratorNormalCompletion2 = true; + var _didIteratorError2 = false; + var _iteratorError2 = undefined; + + try { + for (var _iterator2 = this[Symbol.iterator](), _step2; !(_iteratorNormalCompletion2 = (_step2 = _iterator2.next()).done); _iteratorNormalCompletion2 = true) { + var cls = _step2.value; + + callback.call(thisArg, cls, cls, this); + } + } catch (err) { + _didIteratorError2 = true; + _iteratorError2 = err; + } finally { + try { + if (!_iteratorNormalCompletion2 && _iterator2.return) { + _iterator2.return(); + } + } finally { + if (_didIteratorError2) { + throw _iteratorError2; + } + } + } + } + }; + + res[Symbol.iterator] = res.values; + return res; + }; + + module.exports = wrapStyle; + }, { "./utils": 5 }], 5: [function (require, module, exports) { + 'use strict'; + + var whitespace = /\s+/g; + + /** + * Split a list of whitespace separated tokens, + * excluding empty ones + * + * @param {string} str Input string + * @return {Array} Split tokens + */ + exports.split = function (str) { + return str.split(whitespace).filter(function (el) { + return el.trim().length; }); - } - }; -}; + }; -module.exports = wrapNode; + /** + * Create an iterator on an array + * + * @param {Array} arr Array to iterate on + * @return {Object} Iterator for given array + */ + exports.iterateArray = function (arr) { + var _next = 0; -},{"./class":2,"./style":4,"./utils":5}],4:[function(require,module,exports){ -'use strict'; + return { + next: function next() { + return _next < arr.length ? { value: arr[_next++], done: false } : { done: true }; + } + }; + }; + }, {}], 6: [function (require, module, exports) { + 'use strict'; -const iterateArray = require('./utils').iterateArray; + var _theDom = require('the-dom'); -/** - * Create an object to manipulate given node's CSS styles - * - * @param {HTMLElement} node Input element - * @see `Map` documentation for behaviour information - * @return {Object} Map-like object - */ -const wrapStyle = node => { - const res = { - set: function (prop, value) { - node.style.setProperty(prop, value); - return this; - }, + var _utils = require('./utils'); - delete: prop => node.style.removeProperty(prop) !== '', - has: prop => [].slice.call(node.style).indexOf(prop) > -1, + var _html = (0, _theDom.html)(document); - get: prop => { - const result = node.style.getPropertyValue(prop); + var body = _html.body; + var create = _html.create; - if (result.trim() === '') { - return undefined; + var content = body.find('#content'); + var plotting = body.find('#plotting'); + var ctx = plotting.node.getContext('2d'); + + var padding = 40; // padding between the canvas edges and the points + var image = undefined, + width = undefined, + height = undefined; + var lastUpdate = -Infinity; + + /** + * Create a fractal of given width, height, based on + * a polygon of given amount of vertices, using the + * chaos game applied with given fraction + * + * @param {number} width Fractal width + * @param {number} height Fractal height + * @param {number} fraction Fraction to use + * @param {Array} colors Color of each vertex + * @return {ImageData} Generated pixel data + */ + var chaos = function chaos(width, height, fraction, colors) { + var cx = Math.floor(width / 2); + var cy = Math.floor(height / 2); + var radius = Math.min(cx, cy); + + var count = colors.length; + var vertices = []; + var angleStep = 2 * Math.PI / count; + var initialAngle = undefined; + + // creating 0-width image data will throw an error + if (width <= 0 || height <= 0) { + return ctx.createImageData(1, 1); } - return result; - }, + var image = ctx.createImageData(width, height); + var data = image.data; - clear: () => { - const length = node.style.length; - - for (let i = 0; i < length; i += 1) { - node.style.removeProperty(node.style[i]); + // we will rotate around an inscribed circle to calculate + // the vertices' positions. We adapt the initial angle so + // that usual polygons look better + if (count === 3) { + initialAngle = -Math.PI / 2; + } else if (count === 4) { + initialAngle = Math.PI / 4; + } else { + initialAngle = 0; } - }, - get size() { - return node.style.length; - }, + for (var i = 0; i < count; i += 1) { + var current = angleStep * i + initialAngle; - keys: () => iterateArray([].slice.call(node.style)), - values: () => iterateArray([].slice.call(node.style).map( - prop => node.style.getPropertyValue(prop))), - entries: () => iterateArray([].slice.call(node.style).map( - prop => [prop, node.style.getPropertyValue(prop)])), - - forEach: function (callback, thisArg) { - for (let cls of this) { - callback.call(thisArg, cls, cls, this); + vertices.push([Math.floor(Math.cos(current) * radius + cx), Math.floor(Math.sin(current) * radius + cy)]); } - } - }; - res[Symbol.iterator] = res.values; - return res; -}; + // now we apply the chaos algorithm: + // for any point, the next point is a `fraction` of the + // distance between it and a random vertex + var point = vertices[0]; + var iterations = 200000; + var drop = 1000; -module.exports = wrapStyle; + while (iterations--) { + var vertexNumber = (0, _utils.randomNumber)(0, count); + var vertex = vertices[vertexNumber], + color = colors[vertexNumber]; -},{"./utils":5}],5:[function(require,module,exports){ -'use strict'; + point = [Math.floor((point[0] - vertex[0]) * fraction + vertex[0]), Math.floor((point[1] - vertex[1]) * fraction + vertex[1])]; -const whitespace = /\s+/g; + // skip the first 1000 points + if (drop === 0) { + var i = (point[1] * width + point[0]) * 4; -/** - * Split a list of whitespace separated tokens, - * excluding empty ones - * - * @param {string} str Input string - * @return {Array} Split tokens - */ -exports.split = str => str.split(whitespace).filter(el => el.trim().length); + data[i] = color[0]; + data[i + 1] = color[1]; + data[i + 2] = color[2]; + data[i + 3] = 255; + } else { + drop--; + } + } -/** - * Create an iterator on an array - * - * @param {Array} arr Array to iterate on - * @return {Object} Iterator for given array - */ -exports.iterateArray = (arr) => { - let next = 0; + return image; + }; - return { - next: () => next < arr.length ? - {value: arr[next++], done: false} : - {done: true} - }; -}; + /** + * Render the scene, recalculating the points + * positions if they need to + * + * @return {null} + */ + var render = function render() { + // only recalculate every 16.67 ms + if (+new Date() - lastUpdate > 16.67) { + image = chaos(width - 2 * padding, height - 2 * padding, 1 / 2, [[255, 0, 0], [0, 255, 0], [0, 0, 255]]); -},{}],6:[function(require,module,exports){ -'use strict'; + lastUpdate = +new Date(); + } -var _theDom = require('the-dom'); + ctx.clearRect(0, 0, width, height); + ctx.putImageData(image, padding, padding); + }; -var _utils = require('./utils'); + /** + * Resize the canvas to fit the new + * window size and redraw the scene + * + * @return {null} + */ + var resize = function resize() { + width = content.node.clientWidth; + height = content.node.clientHeight; -var _html = (0, _theDom.html)(document); + plotting.setAttr('width', width); + plotting.setAttr('height', height); -var body = _html.body; -var create = _html.create; + render(); + }; -var content = body.find('#content'); -var plotting = body.find('#plotting'); -var ctx = plotting.node.getContext('2d'); + window.onresize = resize; + resize(); + }, { "./utils": 7, "the-dom": 1 }], 7: [function (require, module, exports) { + 'use strict' -var padding = 40; // padding between the canvas edges and the points -var image = undefined, - width = undefined, - height = undefined; -var lastUpdate = -Infinity; + /** + * 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 + */ + ; -/** - * Create a fractal of given width, height, based on - * a polygon of given amount of vertices, using the - * chaos game applied with given fraction - * - * @param {number} width Fractal width - * @param {number} height Fractal height - * @param {number} fraction Fraction to use - * @param {Array} colors Color of each vertex - * @return {ImageData} Generated pixel data - */ -var chaos = function chaos(width, height, fraction, colors) { - var cx = Math.floor(width / 2); - var cy = Math.floor(height / 2); - var radius = Math.min(cx, cy); + Object.defineProperty(exports, "__esModule", { + value: true + }); + var randomNumber = exports.randomNumber = function randomNumber(min, max) { + return Math.floor(Math.random() * (max - min)) + min; + }; - var count = colors.length; - var vertices = []; - var angleStep = 2 * Math.PI / count; - var initialAngle = undefined; + /** + * Generate a random color + * + * @return {Array} RGB components + */ + var randomColor = exports.randomColor = function randomColor() { + var color = []; - // creating 0-width image data will throw an error - if (width <= 0 || height <= 0) { - return ctx.createImageData(1, 1); - } + for (var i = 0; i < 3; i++) { + color.push(Math.round(Math.random().toFixed(2) * 255)); + } - var image = ctx.createImageData(width, height); - var data = image.data; + return color; + }; - // we will rotate around an inscribed circle to calculate - // the vertices' positions. We adapt the initial angle so - // that usual polygons look better - if (count === 3) { - initialAngle = -Math.PI / 2; - } else if (count === 4) { - initialAngle = Math.PI / 4; - } else { - initialAngle = 0; - } + /** + * Convert a decimal number to its hexadecimal representation + * + * @param {number} input Number to be converted + * @return {string} Number representation + */ + var hex = function hex(input) { + var hex = parseInt(input, 10).toString(16); + return hex.length === 1 ? '0' + hex : hex; + }; - for (var i = 0; i < count; i += 1) { - var current = angleStep * i + initialAngle; + /** + * Convert a RGB color to its hexadecimal representation + * + * @param {Array} color RGB color + * @return {string} Hex representation + */ + var rgbToHex = exports.rgbToHex = function rgbToHex(color) { + return '#' + hex(color[0]) + hex(color[1]) + hex(color[2]); + }; + }, {}] }, {}, [6]); - vertices.push([Math.floor(Math.cos(current) * radius + cx), Math.floor(Math.sin(current) * radius + cy)]); - } - - // now we apply the chaos algorithm: - // for any point, the next point is a `fraction` of the - // distance between it and a random vertex - var point = vertices[0]; - var iterations = 200000; - var drop = 1000; - - while (iterations--) { - var vertexNumber = (0, _utils.randomNumber)(0, count); - var vertex = vertices[vertexNumber], - color = colors[vertexNumber]; - - point = [Math.floor((point[0] - vertex[0]) * fraction + vertex[0]), Math.floor((point[1] - vertex[1]) * fraction + vertex[1])]; - - // skip the first 1000 points - if (drop === 0) { - var i = (point[1] * width + point[0]) * 4; - - data[i] = color[0]; - data[i + 1] = color[1]; - data[i + 2] = color[2]; - data[i + 3] = 255; - } else { - drop--; - } - } - - return image; -}; - -/** - * Render the scene, recalculating the points - * positions if they need to - * - * @return {null} - */ -var render = function render() { - // only recalculate every 16.67 ms - if (+new Date() - lastUpdate > 16.67) { - image = chaos(width - 2 * padding, height - 2 * padding, 1 / 2, [[255, 0, 0], [0, 255, 0], [0, 0, 255]]); - - lastUpdate = +new Date(); - } - - ctx.clearRect(0, 0, width, height); - ctx.putImageData(image, padding, padding); -}; - -/** - * Resize the canvas to fit the new - * window size and redraw the scene - * - * @return {null} - */ -var resize = function resize() { - width = content.node.clientWidth; - height = content.node.clientHeight; - - plotting.setAttr('width', width); - plotting.setAttr('height', height); - - render(); -}; - -window.onresize = resize; -resize(); - -},{"./utils":7,"the-dom":1}],7:[function(require,module,exports){ -'use strict' - -/** - * 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 - */ -; -Object.defineProperty(exports, "__esModule", { - value: true -}); -var randomNumber = exports.randomNumber = function randomNumber(min, max) { - return Math.floor(Math.random() * (max - min)) + min; -}; - -/** - * Generate a random color - * - * @return {Array} RGB components - */ -var randomColor = exports.randomColor = function randomColor() { - var color = []; - - for (var i = 0; i < 3; i++) { - color.push(Math.round(Math.random().toFixed(2) * 255)); - } - - return color; -}; - -/** - * Convert a decimal number to its hexadecimal representation - * - * @param {number} input Number to be converted - * @return {string} Number representation - */ -var hex = function hex(input) { - var hex = parseInt(input, 10).toString(16); - return hex.length === 1 ? '0' + hex : hex; -}; - -/** - * Convert a RGB color to its hexadecimal representation - * - * @param {Array} color RGB color - * @return {string} Hex representation - */ -var rgbToHex = exports.rgbToHex = function rgbToHex(color) { - return '#' + hex(color[0]) + hex(color[1]) + hex(color[2]); -}; - -},{}]},{},[6]); diff --git a/package.json b/package.json index f627e1d..fd24bac 100644 --- a/package.json +++ b/package.json @@ -7,7 +7,7 @@ "url": "git+https://github.com/MattouFP/chaos.git" }, "scripts": { - "build": "browserify -t [ babelify --presets [ es2015 ] ] scripts/index.js > bundle.js" + "build": "browserify -t [ babelify --presets [ es2015 ] ] scripts/index.js | babel --presets es2015 > bundle.js" }, "keywords": [ "chaos", @@ -23,7 +23,9 @@ "dependencies": { "babel-preset-es2015": "^6.3.13", "babelify": "^7.2.0", + "babel-cli": "^6.3.17", "browserify": "^12.0.1", + "the-dom": "^0.1.0" } }