initial commit

2013-12-05 23:19:53 +01:00 · 2013-12-05 23:19:53 +01:00 · 05e64f8ea0
commit 05e64f8ea0
2 changed files with 85 additions and 0 deletions
--- a/index.html
+++ b/index.html
@ -0,0 +1,10 @@
+<!doctype html>
+<html>
+  <head>
+    <title>metaballs</title>
+  </head>
+  <body>
+   <canvas id="canvas" width="600" height="600"></canvas> 
+   <script src="metaballs.js"></script>
+  </body>
+</html>
--- a/metaballs.js
+++ b/metaballs.js
@ -0,0 +1,75 @@
+window.onload = function() {
+    console.log('init');
+    var canvas = document.getElementById('canvas'),
+        ctx = canvas.getContext('2d'),
+        metaballs = [],
+        params = [],
+        nb = 20,
+        thr = 1e-4,
+        t = 0,
+        ps = 4;
+        pixels = [],
+        nc = 20;
+    for(var n = 0; n < nc; ++n) {
+	var pixel = ctx.createImageData(ps, ps),
+        pixelData = pixel.data,
+	col = 255 / nc * n;
+	for(var i = 0; i < ps * ps; ++i) {
+	    pixelData[4 * i + 0] = col;
+	    pixelData[4 * i + 1] = col;
+	    pixelData[4 * i + 2] = col;
+	    pixelData[4 * i + 3] = 255;
+	}
+	pixels.push(pixel);
+    }
+
+    for(var i = 0; i < nb; ++i) {
+	metaballs.push([0, 0, Math.random() * 2 / nb]);
+	params.push({
+//	    cx: 200 + Math.random() * 200,
+//	    cy: 200 + Math.random() * 200,
+	    cx: 300,
+	    cy: 300,
+	    ox: 100 + Math.random() * 200,
+	    oy: 100 + Math.random() * 200,
+	    mx: Math.random() * 5,
+	    my: Math.random() * 5,
+	    a: Math.random() * 6.28,
+	});
+    }
+    
+    function mb(p, mb) {
+	var dx = p[0] - mb[0],
+	    dy = p[1] - mb[1],
+	    d = dx * dx + dy * dy;
+	return mb[2] / d;
+    }
+    
+    function f(p) {
+	var acc = 0,
+	    n = metaballs.length;
+	for(var i = 0; i < n; ++i)
+	    acc += mb(p, metaballs[i]);
+	return acc;
+    }
+
+    window.setInterval(function() {
+	ctx.clearRect(0, 0, canvas.width, canvas.height);
+	for(var i = 0; i < params.length; ++i) {
+	    var b = metaballs[i],
+	        p = params[i];
+	    b[0] = p.cx + Math.cos(t * p.mx + p.a) * p.ox;
+	    b[1] = p.cy + Math.cos(t * p.my) * p.oy;
+	}
+	for(var x = 0; x < canvas.width; x += ps) {
+	    for(var y = 0; y < canvas.height; y += ps) {
+		var v = f([x,y]);
+		if(v > thr) {
+//		    var cidx = Math.round(Math.max(0, Math.min(pixels.length, Math.log(v/thr))));
+		    ctx.putImageData(pixels[0], x, y);
+		}
+	    }
+	}
+	t += 0.005;
+    }, 20);
+}