diff --git a/index.html b/index.html
index ecfaa7f..41fff8f 100644
--- a/index.html
+++ b/index.html
@@ -3,8 +3,8 @@
metaballs
-
-
+
+
diff --git a/metaballs.js b/metaballs.js
index 3d40124..67f6bcc 100644
--- a/metaballs.js
+++ b/metaballs.js
@@ -7,31 +7,35 @@ window.onload = function() {
nb = 20,
thr = 1e-4,
t = 0,
- ps = 4;
- pixels = [],
- nc = 20;
+ ps = 8,
+ pixels = [],
+ nc = 20,
+ bg = [0.35, 0, 0.5],
+ fg = [1, 0.5, 0],
+ w = canvas.width,
+ h = canvas.height;
for(var n = 0; n < nc; ++n) {
var pixel = ctx.createImageData(ps, ps),
- pixelData = pixel.data,
- col = 255 / nc * n;
+ pixelData = pixel.data,
+ col = n / nc;
for(var i = 0; i < ps * ps; ++i) {
- pixelData[4 * i + 0] = col;
- pixelData[4 * i + 1] = col;
- pixelData[4 * i + 2] = col;
+ for(var j = 0; j < 3; ++j) {
+ pixelData[4 * i + j] = 255 * (fg[j] * col + bg[j] * (1 - col));
+ }
pixelData[4 * i + 3] = 255;
}
pixels.push(pixel);
}
for(var i = 0; i < nb; ++i) {
- metaballs.push([0, 0, Math.random() * 2 / nb]);
+ metaballs.push([0, 0, Math.random() * (w / 100) / 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,
+ // cx: 200 + Math.random() * 200,
+ // cy: 200 + Math.random() * 200,
+ cx: w/2,
+ cy: h/2,
+ ox: w/6 + Math.random() * (w/3),
+ oy: h/6 + Math.random() * (h/3),
mx: Math.random() * 5,
my: Math.random() * 5,
a: Math.random() * 6.28,
@@ -54,7 +58,8 @@ window.onload = function() {
}
window.setInterval(function() {
- ctx.clearRect(0, 0, canvas.width, canvas.height);
+ ctx.setFillColor(bg[0], bg[1], bg[2], 1);
+ ctx.fillRect(0, 0, canvas.width, canvas.height);
for(var i = 0; i < params.length; ++i) {
var b = metaballs[i],
p = params[i];
@@ -65,11 +70,12 @@ window.onload = function() {
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);
+ var logv = Math.log(v/thr),
+ cidx = Math.round(Math.max(0, Math.min(pixels.length - 1, 20 * Math.pow(logv, 0.3))));
+ ctx.putImageData(pixels[cidx], x, y);
}
}
}
t += 0.005;
}, 20);
-}
+};