taralino

Metaballs

In diesem Beispiel simulieren wir eine dehnbare Materie mit mehreren Zentren (Metaballs), die zum Beispiel an eine Lavalampe erinnert. Das genaue Verhalten der Simulation ist insbesondere der Metaball-Funktion zu verdanken.

Beispiel

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <script src="taralino.js"></script>
</head>
<body>
<script>

// Anzahl der Zentren
var n = 8;

// Daten der Zentren
var P = [];

// Abstand zwischen zwei Punkten
function distance(x, y, a, b) {
  return Math.sqrt((x-a)*(x-a) + (y-b)*(y-b));
};

// Neues Zentrum erzeugen
function dot() {
  return {
    x:random(0, 200),
    y:random(0, 120),
    r:random(6, 12),
    vx:random(-0.5, 0.5),
    vy:random(-0.5, 0.5)
  };
};

// Initialisierung
function setup() {
  Grid.init(200, 120, {style:"canvas", zoom:2});
  Animation.init({fps:20});
  for (var k = 0; k < n; k++) P.push(dot());
};

// Bewegung
function move() {
  for (var k = 0; k < n; k++) {
    P[k].x = P[k].x + P[k].vx;
    P[k].y = P[k].y + P[k].vy;
    if ((P[k].x < 0) || (P[k].x > 200)) P[k].vx = -P[k].vx;
    if ((P[k].y < 0) || (P[k].y > 120)) P[k].vy = -P[k].vy;
  };
};

// Metaball-Funktion
function f(x,y) {
  var h = 0;
  for (var k = 0; k < n; k++) {
    var t = distance(x, y, P[k].x, P[k].y);
    h += (t < P[k].r ? 1 : Math.pow(P[k].r/t, 2) );
  };
  return h;
};

// Darstellung
function metaballs() {
  for (var i = 0; i < 120; i++) for (var j = 0; j < 200; j++) {
    var c = f(j+0.5, i+0.5);
    Grid.pixel(j, i, c);
  };
  Grid.draw();
};

// Loop
function loop() {
  move();
  metaballs();
};

</script>
</body>
</html>

Vorschau Download Kopie speichern