taralino

Vulkanausbruch

Das folgende Beispiel simuliert einen Vulkanausbruch. Der grafische Effekt entsteht insbesondere aufgrund der verwendeten Farbdefinitionen mit Transparenz.

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 n = 80;
var A = [];

function new_lava() {
  var c = [255, random(0,200), 0, random(0,255)];
  return {x:0, y:2, vx:random(-0.04,0.04), vy:random(0.06,0.10), color:c};
};

function setup() {
  for (var k = 0; k < n; k++) A.push(new_lava());
  Canvas.init([-6,6], [0,8], {width:600, background:[0,0,0]});
  Animation.init({fps:40});
};

function move() {
  for (var k = 0; k < A.length; k++) {
    A[k].x = A[k].x + A[k].vx;
    A[k].y = A[k].y + A[k].vy;
    A[k].vy = A[k].vy - 0.001;
    A[k].color[3] = A[k].color[3] - 2;
    if (A[k].color[3] <= 0) A[k] = new_lava();
  };
};

function draw() {
  Canvas.rect(0, 4, 12, 8, {fill:[0,0,0,40]});
  for (var k = 0; k < A.length; k++) {
    Canvas.circle(A[k].x, A[k].y, 0.16, {fill:A[k].color});
  };
  Canvas.box(0, 0, 3, {fill:[80,80,80,20], angle:Math.PI/4});
};

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

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

Vorschau Download Kopie speichern