HTML5-Tutorium: Canvas: MiniPong 02: Unterschied zwischen den Versionen
Kowa (Diskussion | Beiträge) (Kowa verschob die Seite HTML5-Tutorium: Canvas: MiniPong 02 nach HTML5-Tutorium: Canvas: MiniPong 03) |
Kowa (Diskussion | Beiträge) Keine Bearbeitungszusammenfassung |
||
Zeile 1: | Zeile 1: | ||
# | {{HTML5-Tutorium:Canvas:MiniPong:Menü}} | ||
'''Musterlösung''': <code>[https://glossar.hs-augsburg.de/beispiel/tutorium/es5/minipong/WK_MiniPong02/web/index.html MiniPong 2</code> | |||
([https://glossar.hs-augsburg.de/beispiel/tutorium/es5/minipong/WK_MiniPong02/ SVN-Repository]) | |||
==Ziel: Animation des Balls== | |||
Die Ball-Animation des [[HTML5-Tutorium: Canvas: MiniPong 01|ersten Teils des Tutoriums]] | |||
zeichnet sich noch durch ein prinzipielles Problem aus: Bei der Darstellung der Animation wird die | |||
Leistungsfähigkeit des Rechners des Benutzers der Anwendung nicht berücksichtigt. | |||
Das ist bei einer einfachen Ball-Animation sicher auch nicht notwendig. Bei komplexeren Anwendungen | |||
kann dies allerdings schnell zu großen Performanz-Problemen führen. | |||
Mit Hilfe zweier Optimierungstechniken kann man diese Probleme deutlich abmildern. | |||
(Das heißt allerdings nicht, dass jede Animation auf jedem Endgerät läuft.) | |||
==Neues Projekt anlegen== | |||
Legen Sie ein neues Projekt mit dem Namen „<code>MiniPong02</code>“ an. | |||
Kopieren Sie alle Dateien des Projektes [https://glossar.hs-augsburg.de/beispiel/tutorium/es5/minipong/WK_MiniPong01/ MiniPong01] | |||
in das neue Projekt. | |||
Nehmen Sie folgende Anpassungen vor: | |||
* Umbenennung des Ordners „<code>app</code>“ in „<code>app1</code>“. | |||
* Umbenennung der Datei „<code>main.js</code>“ in „<code>main1.js</code>“. | |||
* In der Datei „<code>main1.js</code>“: | |||
** Ersetzen von „<code>app: 'app'</code>“ durch „<code>app: 'app1'</code>“. | |||
* In der Datei „<code>index.html</code>“: | |||
** Ändern des Titels in „<code>MiniPong02</code>“: | |||
** Ersetzen von „<code>js/main'</code>“ durch „<code>js/main1</code>“ im Script-Befehl. | |||
Nun sollte die Anwendung wieder laufen. | |||
==<code>requestAnimationFrame</code>== | |||
Prinzipiell müssen in jedem Animationsschritt der Anwendung „MiniPong“ aus zwei wesentliche Aktionen | |||
durchgeführt werden: | |||
# Aktualisierung der Simulation eine physikalischen Welt. | |||
# Aktualisierung der Darstellung der Objekte, deren Physik simuliert wird, auf der Bühne. | |||
Der erste Schritt ist meist nicht sonderlich rechenintensiv: Es müssen einige mathematische Operationen durchgeführt werden, | |||
um die Position, die Masse, den Zustand und evtl. andere Eigenschaften der simulierten Objekte zu ermitteln. Allerdings ist es | |||
notwendig, diese Berechnungen möglichst häufig pro Sekunde durchzuführen. In der realen Welt erfolgen die meisten Änderungen | |||
physikalischer Größen [[Kontinuum|kontinuierlich]]. Beispielsweise ändern sich die Position, die Geschwindigkeit und | |||
die Beschleunigung eines Balles stetig. Die Simulation derartiger Größenänderungen erfolgt an Rechner dagegen fast immer | |||
in diskreten Schritten (Ausnahme: [[Analogrechner]]): Mehrmals pro Sekunde werden die Größen neu berechnet. Durch die | |||
diskrete Berechnung kontinuierlicher Änderungen kommt es unweigerlich zu Rechenfehlern. Um diese möglichst gering zu halten, | |||
sollte die [[Frequenz|Berechnungsfrequenz]] so hoch wie nur immer möglich sein. | |||
Aus mathematischer Sicht wird bei der Simulation einer physikalischen Welt die [[Integration]] durch die Bildung diskreter Summen ersetzt. | |||
Bekanntlich kann ein Integral mit Hilfe von Grenzwerten von Flächensummen definiert werden. Die Grenzwertbildung bedeutet, dass die Flächen von | |||
immer mehr, immer kleineren Bereichen aufsummiert werden. Im Grenzfall sind die betrachteten Flächen unendlich klein und | |||
die Anzahl der Flächen ist unendlich groß. Diese Grenzwertbildung können wir am Rechner natürlich nicht nachbilden. | |||
Wir können allerdings versuchen, diskrete Summen von möglichst vielen, möglichst kleinen Elementen zu bilden. | |||
Das erreichen wir, indem wir die Frequenz der physikalischen Berechnungen möglichst groß wählen. | |||
==Quellen== | |||
# {{Quelle|Braun, H. (2011): Webanimationen mit Canvas}} | |||
# {{Quelle|Kowarschick, W.: Multimedia-Programmierung}} | |||
# [https://glossar.hs-augsburg.de/beispiel/tutorium/es5/minipong/WK_MiniPong01/ Musterlösung MiniPong 01 (SVN)] | |||
# [https://glossar.hs-augsburg.de/beispiel/tutorium/es5/minipong/WK_MiniPong01a/ Musterlösung MiniPong 01a (SVN)] | |||
[[Kategorie: HTML5-Tutorium: Canvas: MiniPong]][[Kategorie: HTML5-Beispiel]][[Kategorie:Kapitel:Multimedia-Programmierung:Beispiele]] | |||
<!-- | |||
==Fortsetzung des Tutoriums== | |||
Sie sollten nun [[HTML5-Tutorium: Canvas: MiniPong 02|Teil 2 des Tutoriums]] bearbeiten. | |||
--> |
Version vom 2. November 2016, 12:26 Uhr
Dieser Artikel erfüllt die GlossarWiki-Qualitätsanforderungen nur teilweise:
Korrektheit: 3 (zu größeren Teilen überprüft) |
Umfang: 3 (einige wichtige Fakten fehlen) |
Quellenangaben: 5 (vollständig vorhanden) |
Quellenarten: 5 (ausgezeichnet) |
Konformität: 5 (ausgezeichnet) |
HTML-Tutorium: MiniPong
MiniPong: | Teil 1 | Teil 2 | Teil 3 | Teil 4 | Teil 5
Musterlösung: [https://glossar.hs-augsburg.de/beispiel/tutorium/es5/minipong/WK_MiniPong02/web/index.html MiniPong 2
(SVN-Repository)
Ziel: Animation des Balls
Die Ball-Animation des ersten Teils des Tutoriums zeichnet sich noch durch ein prinzipielles Problem aus: Bei der Darstellung der Animation wird die Leistungsfähigkeit des Rechners des Benutzers der Anwendung nicht berücksichtigt. Das ist bei einer einfachen Ball-Animation sicher auch nicht notwendig. Bei komplexeren Anwendungen kann dies allerdings schnell zu großen Performanz-Problemen führen.
Mit Hilfe zweier Optimierungstechniken kann man diese Probleme deutlich abmildern. (Das heißt allerdings nicht, dass jede Animation auf jedem Endgerät läuft.)
Neues Projekt anlegen
Legen Sie ein neues Projekt mit dem Namen „MiniPong02
“ an.
Kopieren Sie alle Dateien des Projektes MiniPong01 in das neue Projekt.
Nehmen Sie folgende Anpassungen vor:
- Umbenennung des Ordners „
app
“ in „app1
“. - Umbenennung der Datei „
main.js
“ in „main1.js
“. - In der Datei „
main1.js
“:- Ersetzen von „
app: 'app'
“ durch „app: 'app1'
“.
- Ersetzen von „
- In der Datei „
index.html
“:- Ändern des Titels in „
MiniPong02
“: - Ersetzen von „
js/main'
“ durch „js/main1
“ im Script-Befehl.
- Ändern des Titels in „
Nun sollte die Anwendung wieder laufen.
requestAnimationFrame
Prinzipiell müssen in jedem Animationsschritt der Anwendung „MiniPong“ aus zwei wesentliche Aktionen durchgeführt werden:
- Aktualisierung der Simulation eine physikalischen Welt.
- Aktualisierung der Darstellung der Objekte, deren Physik simuliert wird, auf der Bühne.
Der erste Schritt ist meist nicht sonderlich rechenintensiv: Es müssen einige mathematische Operationen durchgeführt werden, um die Position, die Masse, den Zustand und evtl. andere Eigenschaften der simulierten Objekte zu ermitteln. Allerdings ist es notwendig, diese Berechnungen möglichst häufig pro Sekunde durchzuführen. In der realen Welt erfolgen die meisten Änderungen physikalischer Größen kontinuierlich. Beispielsweise ändern sich die Position, die Geschwindigkeit und die Beschleunigung eines Balles stetig. Die Simulation derartiger Größenänderungen erfolgt an Rechner dagegen fast immer in diskreten Schritten (Ausnahme: Analogrechner): Mehrmals pro Sekunde werden die Größen neu berechnet. Durch die diskrete Berechnung kontinuierlicher Änderungen kommt es unweigerlich zu Rechenfehlern. Um diese möglichst gering zu halten, sollte die Berechnungsfrequenz so hoch wie nur immer möglich sein.
Aus mathematischer Sicht wird bei der Simulation einer physikalischen Welt die Integration durch die Bildung diskreter Summen ersetzt. Bekanntlich kann ein Integral mit Hilfe von Grenzwerten von Flächensummen definiert werden. Die Grenzwertbildung bedeutet, dass die Flächen von immer mehr, immer kleineren Bereichen aufsummiert werden. Im Grenzfall sind die betrachteten Flächen unendlich klein und die Anzahl der Flächen ist unendlich groß. Diese Grenzwertbildung können wir am Rechner natürlich nicht nachbilden. Wir können allerdings versuchen, diskrete Summen von möglichst vielen, möglichst kleinen Elementen zu bilden. Das erreichen wir, indem wir die Frequenz der physikalischen Berechnungen möglichst groß wählen.
Quellen
- Braun (2011): Herbert Braun; Webanimationen mit Canvas; in: c't Webdesign; Band: 2011; Seite(n): 44–48; Verlag: Heise Zeitschriften Verlag; Adresse: Hannover; 2011; Quellengüte: 5 (Artikel)
- Kowarschick (MMProg): Wolfgang Kowarschick; Vorlesung „Multimedia-Programmierung“; Hochschule: Hochschule Augsburg; Adresse: Augsburg; Web-Link; 2018; Quellengüte: 3 (Vorlesung)
- Musterlösung MiniPong 01 (SVN)
- Musterlösung MiniPong 01a (SVN)