Das JavaZ Projekt

Dynamische Farbgebung

JavaZ Animationsschleife

Ein dynamisch gefärbter Eiffelturm mit Nachbildeffekt

Ein dynamisch gefärbter Eiffelturm mit Nachbildeffekt

Die dynamische Farbgebung ist eine der offensichtlichsten Darstellungen der permanenten Animationsschleife von JavaZ. Sie aktualisiert sowohl die Bewegung des Eiffelturms als auch das gesamte Rendering, einschließlich der Farbgebung. Frame für Frame hängen alle Rendereinstellungen von einer einzigen Variablen ab, der ID, die von einem Javascript Window Object der JavaZ-Animationsschleife generiert wird: setTimeout().

Schwerkraft umschalten (standardmäßig deaktiviert), um die Struktur auf den Boden fallen zu lassen
play and pause die Animationsschleife (standardmäßig aktiviert)
reset oder die komplette Grafik neu laden

JavaZ Animationsschleife

animate_canvas() ist die Funktion, die den Animationscode ausführt. Diese Funktion aktualisiert zunächst den Zustand des Canvas-Elements. Dann überträgt es diese Aktualisierung auf den Canvas Context, um es zu zeichnen. animate_canvas() wiederholt dann seine eigenen ersten Schritte, indem es sich einfach selbst zurückruft, wodurch eine unendliche Rekursion erzeugt wird [1].

function animate_canvas() {
if (clearRect){context.clearRect(0,0,width,height);}
	update_canvas();
	render_canvas(context);
	t = setTimeout(animate_canvas, 35);
}
  1. JavaZ ruft animate_canvas() auf, was wiederum update_canvas() aufruft. Diese Funktion aktualisiert den aktuellen Zustand des Canvas-Elements. In der Zwischenzeit löscht die clearRect() Methode, wenn dies von einem booleschen "clearRect"-Wert verlangt wird, das gesamte Canvas-Element oder die angegebenen Pixel innerhalb eines bestimmten Rechtecks [2].
  2. Sobald die Aktualisierung abgeschlossen ist, zeichnet render_canvas(context) den aktualisierten Zustand des Canvas-Elements.
  3. Dann ruft JavaZ die Funktion setTimeout() auf. Die Methode setTimeout() ruft eine Funktion, nämlich ihre eigene aufrufende Funktion, nach einer standardmäßigen Ablaufzeit von 25 Millisekunden (40 Frames pro Sekunde) auf. Das setTimeout() wird normalerweise nur einmal ausgeführt. Da es direkt bewirkt, dass animate_canvas() erneut ausgeführt wird, erzeugt es eine Schleife, es sei denn, es wird etwas getan, um es zu stoppen.

Wenn eine wiederholte Ausführung erforderlich ist, wird normalerweise die Methode setInterval() in Javascript verwendet. Aber JavaZ verwendet stattdessen die von der Methode setTimeout() hergestellte id als Zeitvariable (t). Dies ermöglicht es JavaZ, das Canvas-Element mit der Zeit zu aktualisieren. Diese Zeitvariable ermöglicht Folgendes:

  • indirekt die Anzahl der Frames pro Sekunde durch die Methode setTimeout() festlegen,
  • Anhalten oder Stoppen der Animation durch Löschen und Zurücksetzen der ID der Methode setTimeout(),
  • Zurücksetzen des Canvas-State (Zustand) beim Neuladen oder Ändern der Fenstergröße (Responsivness),
  • irgendwann ein Ereignis auslösen. Keine Notwendigkeit, eine zusätzliche Stoppuhr zu codieren.

[1Dies ist eine ziemlich häufige Sache bei Fraktalen

[2Indem JavaZ die Methode clearRect() überspringt, ermöglicht es grafische Effekte wie das Nachbild-Effekt in dieser JavaZ-Illustration.