taralino

Partikelsystem

In diesem Beispiel präsentieren wir eine kleine grafische Spielerei: Simuliert werden kleine Partikel (bunte Kreise), die sich auf einer Fläche gleichmäßig bewegen. Sind zwei Partikel dicht genug beieinander, so werden diese mit einer Linie verbunden.

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 Punkte
var n = 40;

// Liste der Punkte
var P = [];

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

// Neuen Punkt erzeugen
function dot() {
  return {
    x:random(0, 100),
    y:random(0, 60),
    r:random(0.4, 0.8),
    vx:random(-0.2, 0.2),
    vy:random(-0.2, 0.2),
    color:random(0,1)
  };
};

// Initialisierung
function setup() {
  Canvas.init([0,100], [0,60], {width:640, background:"black"});
  Animation.init({fps:40});
  for (var k = 0; k < n; k++) P.push(dot());
};

// Bewegungen
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 > 100)) P[k].vx = -P[k].vx;
    if ((P[k].y < 0) || (P[k].y > 60)) P[k].vy = -P[k].vy;
  };
};

// Verbindungen
function connections() {
  for (var k = 1; k < n; k++) for (var i = 0; i < k; i++) {
    var h = distance(P[k].x, P[k].y, P[i].x, P[i].y);
    if (h < 15) {
      Canvas.line(P[k].x, P[k].y, P[i].x, P[i].y, {stroke:[255,255,255,60]});
    };
  };
};

// Darstellung
function draw() {
  Canvas.clear();
  if (n <= 100) connections();
  for (var k = 0; k < n; k++) {
    Canvas.circle(P[k].x, P[k].y, P[k].r, {fill:P[k].color});
  };
};

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

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

Vorschau Download Kopie speichern