taralino

.init

Der Befehl Animation.init() erwartet keine (verpflichtende) Argumente. Es können aber folgende Optionen verwendet werden:

Variable	Datentyp	Hinweis	Default-Wert
fps	Zahl	positiv	80
autoplay	Zeichenkette	-	on

Mit fps (frames per second) kann definiert werden, wie häufig die loop-Funktion pro Sekunde (maximal) aufgerufen werden soll.

Zudem startet die Animation automatisch, es sei denn die Option autoplay wird auf off gesetzt.

Dabei ist zu beachten, dass die Initalisierung der Animation (mit den Default-Werten der Optionen) automatisch vorgenommen wird, sofern eine loop-Funktion existiert.

Beispiel

Das Beispiel simuliert einen sich drehenden Kreis, wobei die Animation automatisch gestartet wird.

<!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>

function setup() {
  Canvas.init([-2,2], [-2,2], {width:300, background:"black"});
};

function loop() {
  var t = time();
  Canvas.clear();
  Canvas.circle(0, 0, 1.2, {fill:"red"});
  Canvas.circle(0, 0, 0.8, {fill:"black"});
  Canvas.rect(0, 0, 3, 0.3, {fill:"black", angle:t});
};

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

Vorschau Download Kopie speichern

Beispiel

Das Beispiel simuliert einen sich drehenden Kreis, wobei die Animation pro Sekunde vier mal aktualisiert wird.

<!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>

function setup() {
  Canvas.init([-2,2], [-2,2], {width:300, background:"black"});
  Animation.init({fps:4});
};

function loop() {
  var t = time();
  Canvas.clear();
  Canvas.circle(0, 0, 1.2, {fill:"red"});
  Canvas.circle(0, 0, 0.8, {fill:"black"});
  Canvas.rect(0, 0, 3, 0.3, {fill:"black", angle:t});
};

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

Vorschau Download Kopie speichern

Beispiel

Die Animation startet nicht automatisch und kann über zwei Buttons gesteuert werden.

<!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>

function setup() {
  Canvas.init([-2,2], [-2,2], {width:300, background:"black"});
  Animation.init({autoplay:"off"});
  Button.add("start", "start");
  Button.add("stop", "stop");
  loop();
};

function loop() {
  var t = time();
  Canvas.clear();
  Canvas.circle(0, 0, 1.2, {fill:"red"});
  Canvas.circle(0, 0, 0.8, {fill:"black"});
  Canvas.rect(0, 0, 3, 0.3, {fill:"black", angle:t});
};

function on_click(id) {
  if (id == "start") Animation.start();
  if (id == "stop") Animation.stop();
};

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

Vorschau Download Kopie speichern

Beispiel

Insbesondere bei der Verwendung von Grid ist es sinnvoll, die Option fps zu verwenden. Tipp: Benutze die Pfeiltasten, um die Richtung zu ändern.

<!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 x = 2;
var y = 8;
var r = "RIGHT";
var n = 16;

function setup() {
  Grid.init(n, n, {width:300, background:"black"});
  Animation.init({fps:16});
};

function loop() {
  Grid.clear();
  Grid.pixel(x, y, "green");
  Grid.draw();
  if (r == "RIGHT") x = (x + 1) % n;
  if (r == "LEFT") x = (x + n - 1) % n;
  if (r == "UP") y = (y + 1) % n;
  if (r == "DOWN") y = (y + n - 1) % n;
};

function on_key_down(key) {
  if (key == "RIGHT") r = key;
  if (key == "LEFT") r = key;
  if (key == "UP") r = key;
  if (key == "DOWN") r = key;
};

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

Vorschau Download Kopie speichern