tomek
/
js-metaballs
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

simple coloring scheme + my laptop screen size.

master
Tomek Dubrownik 2013-12-06 13:55:54 +01:00
parent 05e64f8ea0
commit 87d50e2a43
2 changed files with 27 additions and 21 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

4
index.html
View File

@ -3,8 +3,8 @@
<head>
<title>metaballs</title>
</head>
<body>
<canvas id="canvas" width="600" height="600"></canvas>
<body style="margin:0; padding: 0; width: 100%; height: 100%; overflow: hidden">
<canvas id="canvas" width="1366" height="768"></canvas>
<script src="metaballs.js"></script>
</body>
</html>

44
metaballs.js
View File

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