public
Created

FractalAnimation

  • Download Gist
FractalAnimation.html
HTML
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99
<!DOCTYPE html>
<html>
<head>
 
<script>
 
// http://paulirish.com/2011/requestanimationframe-for-smart-animating/
// http://my.opera.com/emoller/blog/2011/12/20/requestanimationframe-for-smart-er-animating
 
// requestAnimationFrame polyfill by Erik MĖ†ller
// fixes from Paul Irish and Tino Zijdel
 
(function() {
var lastTime = 0;
var vendors = ['ms', 'moz', 'webkit', 'o'];
for(var x = 0; x < vendors.length && !window.requestAnimationFrame; ++x) {
window.requestAnimationFrame = window[vendors[x]+'RequestAnimationFrame'];
window.cancelAnimationFrame = window[vendors[x]+'CancelAnimationFrame']
|| window[vendors[x]+'CancelRequestAnimationFrame'];
}
if (!window.requestAnimationFrame)
window.requestAnimationFrame = function(callback, element) {
var currTime = new Date().getTime();
var timeToCall = Math.max(0, 16 - (currTime - lastTime));
var id = window.setTimeout(function() { callback(currTime + timeToCall); },
timeToCall);
lastTime = currTime + timeToCall;
return id;
};
if (!window.cancelAnimationFrame)
window.cancelAnimationFrame = function(id) {
clearTimeout(id);
};
}());
 
window.addEventListener('load', function() {
 
var canvas = document.getElementById('canvas');
var ctx = canvas.getContext('2d');
var canvasData = ctx.getImageData(0, 0, canvas.width, canvas.height);
var i = 0, links=-2.2, rechts= 1, onder=-1.2, boven=1.2, zoomx=-.58, zoomy=.37;
// Mandelbrot
function computeColor(x, y) {
x = links + x/canvas.width *(rechts-links);
y = onder + y/canvas.height * (boven - onder);
var x0 = x ;
var y0 = y;
 
var iteration = 0;
var max_iteration = 100;
 
while (x * x + y * y <= 4 && iteration < max_iteration ) {
var xtemp = x*x - y*y + x0;
y = 2*x*y + y0;
x = xtemp;
iteration++;
}
 
return Math.round(767 * iteration / max_iteration);
}
 
function render() {
for (var x = 0; x < canvasData.width; x++) {
for (var y = 0; y < canvasData.height; y++) {
var color = computeColor(x, y);
 
// Index of the pixel in the array
var idx = (x + y * canvas.width) * 4;
 
// Update the values of the pixel;
canvasData.data[idx + 1] = Math.min(255,color);
canvasData.data[idx + 0] = Math.max(0,Math.min(255,color-256));
canvasData.data[idx + 2] = Math.max(0,color-512);
canvasData.data[idx + 3] = 255;
 
}
}
 
ctx.putImageData(canvasData, 0, 0);
}
 
(function animloop(){
window.requestAnimationFrame(animloop);
render();
i++;
links=links+(zoomx-links)*.05; rechts=rechts-(rechts-zoomx)*.05;
onder=onder+(zoomy-onder)*.05; boven=boven-(boven-zoomy)*.05;
})();
 
});
 
</script>
</head>
<body>
<canvas id="canvas" width="640" height="480"/>
</body>
</html>

Please sign in to comment on this gist.

Something went wrong with that request. Please try again.