taralino

Konfettikanone

Das folgende Beispiel simuliert eine Konfettikanone: Klicke auf die Zeichenfläche, um weitere Partikel abzufeuern.

Wie du dem Quellcode entnehmen kannst, gibt es unzählige Parameter, dessen Werte das Verhalten der Simulation beeinflussen. Vermutlich musst du dich jedoch mit dem vollständigen Code vertraut machen, bevor du hier eigene Anpassungen vornehmen kannst.

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>

var A = [];
var n = 8;

function particle(x, y) {
  var p = random(1.0, 2.0);
  var r = random(0.3, 0.5);
  return {
    x: x,
    y: y,
    a: random(0.0, 3.14),
    vx: r*Math.cos(p),
    vy: r*Math.sin(p),
    va: random(-0.1, 0.1),
    width: random(1.0, 2.0),
    color: random(0.0, 0.14),
    twist: random(0.0, 3.14)
  };
};

function on_mouse_down(x, y) {
  for (var k = 0; k < n; k++) A.push(particle(x, y));
};

function setup() {
  Canvas.init([-20,20], [-15,15], {width:640, background:"black"});
  Animation.init({fps:40});
  on_mouse_down(0, 0);
};

function move() {
  for (var k = 0; k < A.length; k++) {
    A[k].x += A[k].vx;
    A[k].y += A[k].vy;
    A[k].a += A[k].va;
    A[k].vx *= 0.96;
    A[k].vy -= Math.min(0.01, Math.exp(10*A[k].vy));
  };
};

function draw() {
  var t = 6*time();
  Canvas.clear();
  for (var k = 0; k < A.length; k++) {
    var w = A[k].width * Math.sin(t + A[k].twist);
    var h = A[k].width * Math.sin(t + A[k].twist + 1.8);
    Canvas.rect(A[k].x, A[k].y, w, h, {fill:A[k].color, angle:A[k].a});
  };
  if (A.length < 10) Canvas.text(0, -14, "Klicke hier", {fill:"white"});
};

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

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

Vorschau Download Kopie speichern