initial commit

fridek · Sep 1, 2011 · 0f04028 · 0f04028
commit 0f04028
Show file tree

Hide file tree

Showing 5 changed files with 173 additions and 0 deletions.
diff --git a/buddhabrot.js b/buddhabrot.js
@@ -0,0 +1,146 @@
+/*
+* Canvas Buddhabrot
+*
+* @author Sebastian Porêba <www.smashinglabs.pl>
+* 
+* Inspired by:
+* http://www.mathworks.com/matlabcentral/fileexchange/7726-pseudo-coloring
+* http://jashkenas.s3.amazonaws.com/misc/buddhabrot/docs/buddhabrot.html
+* http://www.planet-source-code.com/vb/scripts/ShowCode.asp?txtCodeId=1684&lngWId=7
+*/
+var iterations = [1250,250,50];
+var points = 50000;
+var limit = 10000;
+
+var canvas;
+var context;
+var N;
+var image;
+
+var exposures = [];
+var maxexposure = [0,0,0];
+var counter     = 0;
+
+var start = new Date().getTime();
+
+function print_infobar() {
+  var passed = new Date();
+  var passed_s = (passed.getTime() - start) / 1000;
+
+  var passed_string = [];
+  passed_string[0] = Math.floor(passed_s /(60*60));
+  passed_s -= passed_string[0]*60*60;
+  passed_string[1] = Math.floor(passed_s /60);
+  passed_s -= passed_string[1]*60;
+  passed_string[2] = Math.floor(passed_s);
+  if(passed_string[1] < 10) passed_string[1] = '0' + passed_string[1];
+  if(passed_string[2] < 10) passed_string[2] = '0' + passed_string[2];
+
+  context.fillText  ('Buddhabrot', 10, 10);
+  context.fillText  ('Iteration: ' + counter, 10, 25);
+  context.fillText  ('Runtime: ' + passed_string.join(":"), 10, 40);      
+}
+
+function draw() {
+  if(counter > limit) return;
+  counter++;
+
+  plot();
+  findMaxExposure();
+  render();
+
+  print_infobar();
+
+  setTimeout(draw,0);
+}
+
+function plot() {
+  var x,y,i;
+  for(i = 0; i<=points; i++) {
+    x = Math.random() * 3 - 2;
+    y = Math.random() * 3 - 1.5;
+    for(var pass=0;pass<3;pass++) iterate(x, y, pass);
+  }
+}
+
+function iterate(x0, y0, pass) {
+  var x = 0, y = 0, xnew, ynew, drawnX, drawnY;
+  for(var i = 0; i<=iterations[pass]; i++) {
+    xnew = x * x - y * y + x0;
+    ynew = 2 * x * y + y0;
+    if((xnew * xnew + ynew * ynew) > 4) { // inlined iterate_draw
+      x = 0, y = 0, xnew, ynew, drawnX, drawnY;
+      for(var i = 0; i<=iterations[pass]; i++) {
+        xnew = x * x - y * y + x0;
+        ynew = 2 * x * y + y0;
+        if(i > 3) {
+          drawnX = Math.round(N * (xnew + 2.0) / 3.0);
+          drawnY = Math.round(N * (ynew + 1.5) / 3.0);
+          if (0 <= drawnX && drawnX < N && 0 <= drawnY && drawnY < N) {
+            exposures[pass].array_[drawnX][drawnY]++;
+          }
+        }
+        if((xnew * xnew + ynew * ynew) > 4) return;
+        x = xnew;
+        y = ynew;
+      }
+      return;
+    }
+    x = xnew;
+    y = ynew;
+  }
+  return;      
+}
+
+function findMaxExposure() {
+  for(var pass=0;pass<3;pass++) {
+    goog.math.Matrix.map(exposures[pass], function(value, i, j, matrix) {
+      if(value > maxexposure[pass]) {
+        maxexposure[pass] = value;
+      }
+    });
+  }
+}
+
+function render() {
+  var data = image.data,r,g,b, tmpExposure, i,x,y;
+
+  for(var pass=0;pass<3;pass++) {
+    goog.math.Matrix.map(exposures[pass], function(value, i, j, matrix) {
+      var ramp = value / (maxexposure[pass]/2.5);
+      if(ramp > 1 || isNaN(ramp)) ramp = 1;
+      idx  = (i * N + j) * 4;
+      data[idx + pass] = ramp*255;
+    });
+  }
+
+  context.globalAlpha = 1/8;
+  // Loop for each blur pass.
+  for (i = 1; i <= 4; i += 1) { // 4
+    for (y = -1; y < 2; y += 1) { // 3
+      for (x = -1; x < 2; x += 1) {
+        context.putImageData(image, 0, 0);
+      }
+    }
+  }
+  context.globalAlpha = 1.0;       
+}
+
+function init() {
+  canvas = document.getElementById("canvas");
+  context = canvas.getContext('2d');
+  context.fillStyle    = '#fff';
+  context.font         = '10px sans-serif';
+  context.textBaseline = 'top';        
+  N = canvas.width;
+  image = context.createImageData(N,N);      
+  for(var pass=0;pass<3;pass++)
+    exposures[pass] = new goog.math.Matrix(N,N);
+
+  for(var i=0;i<N;i++) 
+    for(var j=0;j<N;j++)
+      image.data[(i * N + j) * 4 + 3] = 255;  // alpha channel
+
+
+  draw();
+}
diff --git a/canvas-3pass-1000.png b/canvas-3pass-1000.png
diff --git a/canvas-3pass-2800.png b/canvas-3pass-2800.png
diff --git a/canvas-3pass-300.png b/canvas-3pass-300.png
diff --git a/index.html b/index.html
@@ -0,0 +1,27 @@
+<html>
+  <head>
+    <title>Buddhabrot WebGL</title>
+    <meta http-equiv="content-type" content="text/html; utf-8">
+
+    <script type="text/javascript" src="http://closure-library.googlecode.com/svn/trunk/closure/goog/base.js"></script>
+
+    <script type="text/javascript">
+      goog.require('goog.math.Matrix');    
+    </script>
+
+    <script type="text/javascript" src="buddhabrot.js"></script>
+
+    <style type="text/css">
+      #canvas {
+        display: block;
+        width: 800px;
+        height: 800px;
+      }
+    </style>
+  </head>
+  <body onload="init();">
+    <canvas id="canvas" width="800" height="800">
+
+    </canvas>
+  </body>
+</html>