matteo
/
chaos
1
0
Fork 0
Code Issues Pull Requests Releases Wiki Activity

💡 Update bundle

This commit is contained in:
Mattéo Delabre 2015-12-23 15:54:24 +01:00
parent c0fd8de4d6
commit 9452b2a0bc
1 changed files with 117 additions and 69 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

186
bundle.js
View File

@ -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]);