simple coloring scheme + my laptop screen size.
parent
05e64f8ea0
commit
87d50e2a43
|
@ -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
44
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);
|
||||
}
|
||||
};
|
||||
|
|
Loading…
Reference in New Issue