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> <head>
<title>metaballs</title> <title>metaballs</title>
</head> </head>
<body> <body style="margin:0; padding: 0; width: 100%; height: 100%; overflow: hidden">
<canvas id="canvas" width="600" height="600"></canvas> <canvas id="canvas" width="1366" height="768"></canvas>
<script src="metaballs.js"></script> <script src="metaballs.js"></script>
</body> </body>
</html> </html>

44
metaballs.js
View File

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