GlossarWiki - Benutzerbeiträge [de-formal]

MMProg: Praktikum: WiSe 2018/19: Ball02

2018-11-30T10:30:00Z

Franzih: /* Aufgabe 2 */

{{MMProg:Praktikum:WiSe 2018/19:Menü}}

'''Musterlösung''': [https://glossar.hs-augsburg.de/beispiel/tutorium/2018/ball/WK_Ball02/web/ Web-Auftritt] ([https://gitlab.multimedia.hs-augsburg.de:8888/kowa/WK_Ball02.git Git-Repository])
==Vorbereitung==
Importieren Sie das leere Git-Projekt [https://gitlab.multimedia.hs-augsburg.de:8888/kowa/Ball02.git Ball02] in WebStorm.
Laden Sie anschließend mittels <code>npm i</code> alle benötigten Node.js-Module in das Projekt.

Sie können Ihr Projekt zur Übung auch in Ihrem Git-Repository speichern. Das ist aber nicht so wichtig.
Falls Sie dies machen möchten, müssen Sie es zuvor von meinem (schreibgeschützten) Repository lösen:

<source lang="javascript">
git remote remove origin
git remote add origin https://gitlab.multimedia.hs-augsburg.de:8888/BENUTZER/Ball02.git
</source>

==Ziel==

Ziel dieser Praktikumsaufgabe ist es, die “HTML5 Creation Engine” PixiJS v4 kennenzulernen.<ref>[http://www.pixijs.com/ PixiJS v4: The HTML5 Creation Engine]</ref>
Bei PixiJS handelt es sich um eine sehr mächtige (und damit auch sehr große) JavaScript-Bibliothek zur Realisierung von 2D-Animationen und -Spielen.

Mit HTML5 wurde das Canvas-Element (Leinwand-Element) eingeführt.<ref>[https://developer.mozilla.org/en-US/docs/Web/API/Canvas_API MDN web docs: Canvas API]</ref>
„Auf“ einem Canvas-Element können Grafiken gezeichnet werden. Aktuelle Browser unterstützen üblicherweise sowohl den <code>CanvasRenderingContext2D</code>
zum Erstellen von 2D-Grafiken<ref>[https://developer.mozilla.org/en-US/docs/Web/API/CanvasRenderingContext2D MDN web docs: CanvasRenderingContext2D]</ref>
als auch <code>WebGL</code> zum Erstellen von 3D-Grafiken (auf Basis von [[OpenGL]])<ref>[https://developer.mozilla.org/de/docs/Web/API/WebGL_API/Tutorial/Einf%C3%BChrung_in_WebGL MDN web docs: Einführung in WebGL]</ref>. Die Erstellung von Grafiken mit WebGL ist wesentlich effizienter als die
Erstellung von Grafiken mit dem <code>CanvasRenderingContext2D</code>, zumindest dann wenn, eine Grafikkarte zur Verfügung steht, deren Prozessor
([[GPU]]) OpenGL nativ unterstützt. Dies ist insbesondere dann von Bedeutung, wenn Animationen erstellt werden, {{dh}}, wenn 60 mal pro Sekunde (also
alle 16,7 ms) eine neue Grafik auf dem Canvas angezeigt werden soll.

PixiJS ist als Ersatz für den <code>CanvasRenderingContext2D</code> gedacht. Die Bibliothek stellt im Wesentlichen dieselben Grafik-Befehle
wie der 2D-Kontext zur Verfügung, erstellt aber, wann immer möglich, die 2D-Grafiken mit Hilfe von WebGL. Nur wenn diese Schnittstelle vom
Browser nicht zur Verfügung gestellt wird, erfolgt als Fallback das Rendering mit Hilfe des 2D-Kontextes. Dies hat allerdings meist einen deutlichen
Performanz-Einbruch zur Folge.

==Aufgaben==

In Ihrem Projekt finden Sie wiederum mehrere Web-Anwendungen: <code>index01.html</code> verwendet die gepackte Version von <code>app01.js</code>,
die ihrerseits das Spiel <code>game01.js</code> einbindet. Et cetera.

Schreiben Sie Ihre Lösungen der Aufgabe $i$ in die Datei <code>game</code>$i$<code>.js</code>.
Am einfachsten ist es, wenn Sie jeweils die Lösung der vorangegangenen Aufgabe kopieren und diese Kopie dann weiterentwickeln.

===Aufgabe 1===

Diese Aufgabe entspricht Aufgabe 1 der Praktikumsaufgabe [[MMProg: Praktikum: WiSe 2017/18: GameLoop01]]:
''Lassen Sie die Eule horizontal vom linken bis zum rechten Fensterrand des Browsers fliegen.''

Im Projekt <code>WK_Ball02_Empty</code> ist eine mögliche Lösung dieser Aufgabe bereits enthalten, wobei allerdings ein Kreis „fliegt“ anstelle einer Eule.
Ihre Aufgabe ist es nun, sich die Unterschiede zur Lösung der ersten Praktikumsaufgabe <code>WK_Ball01</code>, die sich durch die Verwendung von PixiJS
ergeben, klar zu machen.

'''<code>app01.js</code>'''

* Es wird zusätzlich die in der JavaScript-Bibliothek <code>pixi.js</code> enthaltene Klasse <code>Application</code> importiert. Beachten Sie, dass hier diejenige Klasse der PixiJS-Bibliothek importiert wird, die auch wirklich benötigt wird. Man könnte auch <code>import * as PIXI from 'pixi.js';</code> schreiben und damit alle PixiJS-Klassen, -Funktionen und -Objekte in der Variablen <code>PIXI</code> speichern. Es ist allerdings besser, nur die benötigten Teil der PixiJS-Bibliothek einzubinden, da webpack dann die Chance hat, im Web-Ordner kleinere JavaScript-Dateien zu erzeugen. Dies kann eine deutliche Reduktion der Ladezeiten der Web-App zur Folge haben.
* Anstelle des GameLoop-Objektes könnte auch der PixiJS-Ticker verwendet werden. Dieser stellt jedoch nicht sicher, dass das Model garantiert 60 mal pro Sekunde aktualisiert wird. Wenn Sie irgendwann PixiJS-Animationen einsetzen möchten, müssen Sie den PixiJS-Ticker allerdings zusätzlich starten, da ansonsten die Animationen nicht animiert werden.
* Das Root-Objekt der PixiJS-Anwendung wird erstellt. Die wichtigsten Argumente sind die Breite und Höhe der Bühne sowie das Canvas-Element, auf dem die Grafiken gezeichnet werden. (Wenn man der Anwendung kein Canvas-Element zuteilt, erstellt sie selbst eines, das man anschließend per JavaScript in das HTML-Dokument einfügen muss.) Darüber hinaus gibt es diverse weitere Optionen, wie {{zB}} die Festlegung, ob die Leinwand transparent ist, damit der HTML-Hintergrund durchscheint.<ref>[http://pixijs.download/dev/docs/PIXI.Application.html PixiJS API Documentation: PIXI.Application ]</ref>
* Das Spiel wird mit Hilfe einer Methode <code>init</code> initialisiert, bevor die Game Loop gestartet werden kann. Das ist notwendig, da die Grafikobjekte, die später animiert werden sollen, zunächst erstellt werden müssen. In der [[MMProg: Praktikum: WiSe 2018/19: Ball01|ersten Praktikumsaufgabe]] wurde diese Tätigkeit per CSS (und nicht per JavaScript) erledigt.

'''<code>game01.js</code>'''
* Der Ordner <code>ball</code> wurde in <code>game</code> umbenannt und die Datei <code>ball01.js</code> in <code>game01.js</code> unbenannt, da hier nicht nur das Ball-Objekt, sondern auch alle andere Aspekte des „Spiels“ „Ein Ball bewegt sich hin und her“ definiert werden.
* Es wird die in der PixiJS-Bibliothek enthaltene Klasse <code>Graphics</code> importiert, um damit eine View für das Ball-Objekt zu zeugen.
* Es gibt eine Initialisierungsfunktion (Initfunktion), die zu Beginn der Anwendung aufgerufen wird, um sie zu initialisieren.
* Darüber hinaus gibt es auch noch eine Resetfunktion, die jedes Mal aufgerufen wird, wenn die Anwendung neu gestartet wird, {{zB}} weil ein neues Spiellevel begonnen werden soll. (Diese Funktion gab es im Gegensatz zur Initfunktion auch schon in der ersten Praktikumsaufgabe.) Diese Funktion ist für wiederkehrende Initialisierungaufgaben verantwortlich, wohingegen die Initialisierungsfunktion nur ein einziges Mal zu Spielbeginn aufgerufen wird. Um [[DRY|Code-Duplikationen]] zu vermeiden, ruft die Initialisierungsfunktion auch die Resetfunktion auf.
* Das Modell der Bühne (<code>v_stage</code>) wird nur teilweise initialisiert. Die Breite und Höhe wird erst später von der Initfunktion festgelegt.
* Das Ballobjekt <code>v_ball</code> wird erst durch die Resetfunktion initialisiert. Diese wird erstmals von der Init-Funktion aufgerufen und kann später von der Game Loop bei Spielstart oder -neustart damit zurückgesetzt werden.
* Das Ballobjekt beinhaltet schon die y-Koordinate und die y-Geschwindigkeit des Balls. In der ursprünglichen Aufgabe fehlten diese Attribute noch. Sie wurden erst in der zweiten Aufgabe („Ball vertikal fliegen lassen“) eingeführt. Außerdem wurde der Durchmesser (<code>d</code>) durch den Radius (<code>r</code>) ersetzt.
* Der Ankerpunkt des Balls wurde von der linken oberen Ecke der Eule ins Zentrum des Balls verschoben. Dies hat Auswirkungen auf die Implementierung der Kollisionserkennung und -behandlung.
* Die Renderfunktion unterscheidet sich leicht. In der ursprünglichen Aufgabe wurden CSS-Attribute des animierten <code>div</code>-Elements verändert. Nun müssen die Attribute des PixiJS-Grafikobjekts, das in der Init-Funktion erzeugt wurde, an die aktuellen Modellwerte angepasst werden.

Die Initfunktion nimmt folgende Aufgaben wahr:
* Breite und Höhe des Bühnenmodells werden an die Breite und Höhe der PixiJS-Anwendung angepasst.
* Die Modelle des Spiels werden initialisiert.
* Die View des Balls wird initialisiert und auf der PixiJS-Bühne platziert. Dies kann erst jetzt erfolgen, da das Application-Objekt der PixiJS-Anwendung erst jetzt zur Verfügung steht. Mit Hilfe der PixJS-Klasse [http://pixijs.download/dev/docs/PIXI.Graphics.<code>Graphics</code>]wird zunächst ein Grafikobjekt erzeugt. Dieses wird mit Inhalt gefüllt (einem Kreis von bestimmter Farbe mit einem Rand in einer anderen Farbe) und zu guter Letzt zur PixiJS-Bühne ({{dh}} im Prinzip zum zugehörigen Canvaselement) hinzugefügt. Wenn sich später bestimmte Attribute des Grafikobjektes – wie {{zB}} die Position oder die Größe – ändern, wird die graphische Darstellung des Objektes auf dem Canvas automatisch von PixiJS angepasst. Die Änderung der Grafikattribute werden in der Funktion <code>render</code> vorgenommen. Dort wird derzeit allerdings nur die Position aus dem Model in die View übertragen. Andere Attribute der View ändern sich in dieser Anwendung nicht.

===Aufgabe 2===

Erstellen Sie eine erste Version der Lösung der Aufgabe 2, indem Sie die Lösung der Aufgabe 1 kopieren:
* Kopieren Sie <code>src/js/game/game01.js</code> nach <code>src/js/game/game02.js</code>
* Kopieren Sie <code>src/js/app01.js</code> nach <code>src/js/app02.js</code> und ersetzen Sie in dieser Datei <code>'./game/game01.js'</code> durch <code>'./game/game02.js'</code>.
* Kopieren Sie <code>src/index01.html</code> nach <code>src/index02.html</code> und ersetzen Sie in dieser Datei <code><title>Ball02 (app01)</title></code> durch <code><title>Ball02 (app02)</title></code>. (Einen Verweis auf die JavaScript-Datei <code>app02.js</code> gibt es in dieser Datei nicht. Der korrekte Verweis wird von webpack automatisch beim Erstellen der Dateien des Web-Ordners injiziert.)
* Starten Sie <code>npm run watch</code> neu, damit auch die neu erstellten Dateien automatisch von webpack übersetzt werden.

Lösen Sie Aufgabe 2 der [[MMProg: Praktikum: WiSe 2018/19: Ball01#Aufgabe 2|ersten Praktikumsaufgabe]] mit Hilfe von PixiJS. Das heißt, ändern Sie Ihre Version von
Aufgabe 2, die Sie gerade durch Kopieren erstellt haben so ab, dass Folgendes passiert:
''Lassen Sie den Ball nicht waagerecht, sondern in der horizontalen Mitte des Browserfensters senkrecht von Fensterrand zu Fensterrand fliegen.'' Anstelle einer Eule verwenden Sie bitte analog zu Aufgabe 1 einen farbigen „Ball“ mit Rand.

Vergessen Sie nicht auch die Kollisionserkennung und -behandlung für die beiden Bildschirmseiten <code>top</code> und <code>botton</code>
zu implementieren.

Und denken Sie daran, <code>npm run dev</code> oder besser noch <code>npm run watch</code> zu verwenden. :-)

===Aufgabe 2a===

Erstellen Sie zunächst wie in Aufgabe 2 beschrieben eine Kopie der Lösung von Aufgabe 2 und nennen Sie sie 2a (<code>index02a.html</code>, <code>app02a.js</code>, <code>game02a.js</code>).

Ändern Sie nun die View des Balls: Anstelle eines farbigen Kreises stellen Sie bitte eine Eule oder einen Pinguin dar.
Importieren Sie zunächst das gewünschte graphische Objekt in die Datei <code>game02a.js</code>:

<source lang="javascript">
import imgBall from '../../img/owl-150.png';
</source>
oder
<source lang="javascript">
import imgBall from '../../img/tux-150.png';
</source>

(Genau genommen weisen Sie webpack mit dieser Anweisung an, das Grafikobjekt im Ordner <code>web/img</code> zu erzeugen und die zugehörige URL in der
Variablen <code>imgBall</code> zu speichern. Ohne webpack müssten Sie das Bild von Hand in diesem Ordner ablegen und dem Spriteobjekt – siehe unten – die korrekte URL übergeben.)

Darüber hinaus müssen Sie dafür sorgen, das von <code>pixi.js</code> nicht mehr die Klasse <code>Graphics</code>,
sondern stattdessen die Klasse <code>Sprite</code> importiert wird.

Ändern Sie in der Initfunktion die Befehle zur Erstellung der View so ab, dass kein Kreis mehr gezeichnet, sondern das Bild
der Eule oder des Pinguins dargestellt wird.

<source lang="javascript">
let
...
v_ball_view = Sprite.fromImage(imgBall); // imgBall contains the URL of the image
</source>

In der Initfunktion wird nur noch der Ankerpunkt in die Mitte des Viewobjekts verschoben.
Sie müssen die vier Befehle zur ERzeugung des Grafikobjektes also löschen.
Dieses Objekt wird dann wieder zur PixiJS-Bühne hinzugefügt.

<source lang="javascript">
v_ball_view.anchor.set(0.5); // center the anchor
p_pixi_app.stage.addChild(v_ball_view);
</source>

===Aufgabe 3===
Erstellen Sie zunächst wie in Aufgabe 2 beschrieben eine Kopie der Lösung von Aufgabe 2a und nennen Sie sie 3 (<code>index03.html</code>, <code>app03.js</code>, <code>game03.js</code>).

Lösen Sie Aufgabe 3 der [[MMProg: Praktikum: WiSe 2017/18: GameLoop01#Aufgabe 2|ersten Praktikumsaufgabe]] mit Hilfe von PixiJS:
''Lassen Sie der Ball von der Mitte des Browserfensters aus schräg über den Bildschirm fliegen. In x-Richtung soll er doppelt so schnell sein (200 Pixel/s)
wie in y-Richtung (100 Pixel/s).''
(Diesmal sollten Sie gleich eine Eule oder einen Pinguin fliegen lassen und nicht erst einen Kreis.)

===Aufgabe 3a===

Erstellen Sie zunächst wie in Aufgabe 2 beschrieben eine Kopie der Lösung von Aufgabe 3 und nennen Sie sie 3a (<code>index03a.html</code>, <code>app03a.js</code>, <code>game03a.js</code>).

Einen Nachteil hat die Lösung der Aufgaben 2a und 3: Das Bild des Vogels wird mittels <code>Sprite.fromImage</code> synchron vom Web-Server geladen.
Das heißt, solange bis das Bild geladen wurde, ist die Anwendung „eingefroren“. Bei einem kleinen Bild ist das sicher kein Problem, wenn aber
eine Vielzahl von oder große Medien geladen werden müssen – wie dies bei realen Web-Anwendungen der Fall ist –, ist dies sicher keine Option mehr.

Nehmen Sie an Ihrer Kopie 3a folgende Änderung vor:
Laden Sie das Bild des Vogels asynchron mit Hilfe eines PixiJS-Loader-Objektes
([http://pixijs.download/dev/docs/PIXI.loaders.Loader.html MDN web doc: PIXI.loaders.Loader ], [https://github.com/englercj/resource-loader GitHub: resource-loader])<ref>[http://pixijs.download/dev/docs/PIXI.loaders.Loader.html PixiJS API Documentation: PIXI.loaders.Loader]</ref><ref>[https://github.com/englercj/resource-loader GitHub: resource-loader
]</ref>.

Zunächst ein wenige Theorie:

====Asynchronität in EcmaScript 2017====

Eine wesentliche Änderung, die sich wegen der Asynchronität ergibt, ist, dass der Ladevorgang später endet als die Ausführung der Initialisierungsfunktion.
Wenn man direkt im Anschluss an die Ausführung der Initialisierungsfunktion die Game Loop startet, ist die Wahrscheinlichkeit groß, dass die Bilder noch gar nicht
geladen wurden und die Anwendung daher abstürzt. Abhilfe schafft hier der Einsatz von modernen asynchronen JavaScript-Anweisungen:
* <code>Promise</code>-Objekte ([https://developer.mozilla.org/de/docs/Web/JavaScript/Reference/Global_Objects/Promise MDN web docs: Promise])
*<code>async</code>-Funktionen ([https://developer.mozilla.org/de/docs/Web/JavaScript/Reference/Statements/async_function MDN web docs: async function])
* <code>await</code>-Operator ([https://developer.mozilla.org/de/docs/Web/JavaScript/Reference/Operators/await MDN web docs: await])

Diese Konstrukte wurden eingeführt, da man in einem klassischen ES5-Programm häufig den Wald vor lauter Bäumen,
{{dh}} den Code vor lauter Callback-Funktionen nicht mehr gesehen hat, wenn eine Vielzahl von asynchronen Anweisungen benötigt wurden.

Mit ES 2015 wurde die globale Klasse <code>Promise</code> eingeführt.
Ein <code>Promise</code>-Objekt führt eine Aktion, wie das Laden eines Bildes oder das Warten auf ein Timer-Ereignis, asynchron aus. Sobald
die Aktion erfolgreich beendet wird, führt sie eine Callback-Funktion aus, die ihr in der Methode <code>then</code> übergeben wurde.
Der Callback-Funktion wird das Ergebnis der asynchronen Aktion als Ergebnis übergeben, so dass sie damit weiterarbeiten kann.
Falls diese Funktion wieder ein <code>Promise</code>-Objekt als Ergebnis liefert, kann man den nächsten asynchronen Befehl mittels eines
weiteren Aufrufs der Methode <code>then</code> anfügen. Etc. pp. Auf diese Weise konnte man eine Abfolge von asynchronen Anweisungen zumindest
linear notieren:

<source lang="javascript">
myPromise
.then(function(p_value) { ...})
.then(function(p_value) { ...})
.then(function(p_value) { ...})
</source>

Wenn man die kürzere Arrow-Schreibweise für Funktionen verwendet, die mit ES 2015 eingeführt wurde ([https://developer.mozilla.org/de/docs/Web/JavaScript/Reference/Functions/Pfeilfunktionen MDN web doc: Pfeilfunktionen]), wird der oder noch etwas kompakter und damit lesbarer:
<source lang="javascript">
myPromise
.then(p_value => { ...})
.then(p_value => { ...})
.then(p_value => { ...})
</source>

Allerdings ist das auch nicht sonderlich schön zu lesen, vor allem wenn man umfangreiche asynchrone Funktionen zu definieren hat.
Und jede dieser Funktionen muss ein eigenes <code>Promise</code>-Objekt erstellen, was den Code auch nicht gerade lesbarer macht.

Daher wurden in ES 2017 die asynchronen Funktionen eingeführt:
<source lang="javascript">
async function myFunction(...)
{ ...}
</source>

In dieser Funktionen werden Anweisungen geschrieben, wie in jeder anderen Funktion auch. Und diese Anweisungen werden der Reihe nach abgearbeitet.
Allerdings gibt es einen fundamentalen Unterschied. Der Funktionsrumpf wird asynchron ausgeführt. Das Ergebnis der Funktion ist ein (implizites)
<code>Promise</code>-Objekt, dessen <code>then</code>-Funktion erst aufgerufen wird, sobald alle asynchronen Befehle im Rumpf
der Funktion erfolgreich beendet wurden.

Da heißt, bei Aufruf der Funktion wird diese sofort wieder beendet. Der Browser wird durch die Funktion nicht blockiert, wie es {{zB}} beim
synchronen Laden eines Bildes der Fall wäre. Die im Rumpf der Funktion enthaltenen Befehle werden trotzdem der Reihe nach ausgeführt, aber asynchron.

Wenn Sie die Funktion <code>init</code> in der Datei <code>app01.js</code> näher betrachten, fällt Ihnen auf, das sie als <code>async</code>-Funktion
definiert wurde. In ihrem Rumpf befinden sich neben drei Standard-Anweisungen auch die Anweisung <code>await wait(500);</code>. Die Funktion <code>wait</code>
wurde von mir in der Datei <code>src/lib/wk/util/wait.js</code> definiert:

<source lang="javascript">
function wait(p_time)
{ return new Promise(function(p_resolve)
{ setTimeout(p_resolve, p_time); }
)
}
</source>
(In Wirklichkeit habe ich die modernere Arrow-Schreibweise verwendet,
aber das Ergebnis ist dasselbe.)

Die Funktion <code>wait</code> erstellt ein <code>Promise</code>-Objekt, das die
Funktion <code>setTimeout</code> ausführt ([https://developer.mozilla.org/de/docs/Web/API/WindowTimers/setTimeout MDN web doc:
WindowTimers.setTimeout()]). Diese Funktion wartet eine gewisse Zeit <code>p_time</code> und ruft dann eine Callback-Funktion auf.
Das ist die typische ES5-Vorgehensweise zur Behandlung von asynchronen Aktionen. In diesem Fall wird die Callback-Funktion <code>p_resolve</code>
aufgerufen. Das ist eine Funktion, die dem <code>Promise</code>-Objekt mitteilt, dass die asynchrone Aktion erfolgreich beendet wurde
(und das <code>Promise</code>-Objekt nun die <code>then</code>-Funktion ausführen könnte).

Seit ES 2017 kann man in <code>async</code>-Funktionen den <code>await</code>-Operator verwenden, um das Ergebnis eines <code>Promise</code>-Objekts
zu verarbeiten. Das ist '''viel''' eleganter, als mit den (auch schon wieder veralteten) <code>then</code>-Funktionen.
Sie schreiben einfach den Befehl <code>await wait(500);</code> in den Rumpf Ihrer <code>async</code>-Funktion. Dann wird die (asynchrone) Verarbeitung
des Rumpfes dieser funktion um 500 ms ({{dh}} um eine halbe Sekunde) unterbrochen, bevor der nächste Befehl abgearbeitet wird.

====Asynchrones Laden von Bildern für PixiJS====

PixiJS stellt das Object <code>PIXI.loader</code> zur Verfügung
([http://pixijs.download/dev/docs/PIXI.loaders.Loader.html PixiJS API Documentation: PIXI.loaders.Loader]),
mit dem Sie Bilder (oder auch andere Medien) asynchron laden können. Die Bilder werden dabei gleich so gespeichert,
dass sie problemlos von PixiJS weiterverarbeitet werden können.

Importieren Sie diesen Loader in Ihre Datei <code>app03.js</code>.
Ersetzen Sie
<source lang="javascript">
import {Application} from 'pixi.js';
</source>
durch
<source lang="javascript">
import {loader, Application} from 'pixi.js';
</source>

Fügen Sie außerdem folgenden Import-Befehl in die Datei <code>app03.js</code> ein:
<source lang="javascript">
import imgBall from '/img/tux-150.png';
</source>

Diesen Befehl kennen Sie schon. Er befindet sich noch in der Datei <code>game03a.js</code>.
Dort sollten Sie ihn löschen (In der Datei <code>game03.js</code> dürfen sie ihn dagegen nicht löschen.)
Wie Sie wissen, bewirkt dieser Import-Befehl, dass die
URL des Bildes <code>/img/tux-150.png</code> in der Variablen
<code>imgBall</code> gespeichert ist (und das Bild in den
Web-Ordner kopiert wird).

Fügen Sie nun vor der Initfunktion den folgenden Befehl ein.
<source lang="javascript">
loader.add('imgBall', imgBall);
</source>

Damit teilen Sie dem Loader mit, welches Bild er später asynchron laden soll.
Als Argumente erwartet einen Namen, mit dem später auf das Bild zugegriffen werden kann,
sowie die URL des Bildes, under der er es im Web-Auftritt findet.
Es ist durchaus üblich, eine Vielzahl von Medien auf einmal ({{dh}} parallel) zu laden:

<source lang="javascript">
p_pixi.loader
.add(...)
.add(...)
.add(...)
.add(...)...
</source>

Jetzt könnten Sie die Bilder mittels <code>loader.load(geeigneteCallbackFunktion)</code>
asynchron laden. Da PixiJS keine Proimises unterstützt, müsste man hier auf die alte ES-5-Methode zurückgreifen.

Unter <code>/wk_pixi/loader/asyncLoader</code> finden Sie eine kleine Funktion, die das
eleganter mit Hilfe eines <code>Promise</code>-Objektes macht. Importieren Sie diese Funktion:

<source lang="javascript">
import loadResources from '/wk_pixi/loader/asyncLoader';
</source>

Jetzt können Sie die Ressourcen ganz elegant mit <code>await</code> laden.
Fügen Sie folgenden Code als erste Zeile in den Rumpf der Initfunktion ein:
<source lang="javascript">
const c_resources = await loadResources();
</source>

Damit wird die asynchrone Ausführung der Initfunktion solange unterbrochen, bis alle Bilder geladen wurden.
Danach wird der nächste Befehl ausgeführt.
Das ist der Befehl, der das Spiel initialisiert:
<source lang="javascript">
game.init(c_pixi_app);
</source>

Ersetzen Sie ihn durch:
<source lang="javascript">
game.init(c_pixi_app, c_resources);
</source>

Das heißt, übergeben Sie der Initfunktion nicht nur das PixiJS-App-Objekt, sondern auch die Ressourcen (das Bild), das Sie geladen haben.
Jetzt müssen Sie nur noch die Initfunktion in der Datei <code>game03a.js</code> anpassen.

Ersetzen Sie dort in der <code>let</code>-Anweisung
<source lang="javascript">
v_ball = {},
v_ball_view = ...;
</source>
durch
<source lang="javascript">
v_ball = {},
v_ball_view;
</source>

Das heißt, das Ball-View-Objekt wird nicht mehr hier erzeugt, sondern erst in der Initfunktion.
Fügen Sie zu diesem Zweck den Parameter <code>p_resources</code> in die Parameterliste
der Initfunktion ein:
<source lang="javascript">
function init(p_pixi_app, p_resources)
</source>

In diesem Parameter werden der Funktion die Ressourcen (Bilder) übergeben,
die Sie zuvor asynchron) geladen haben. Damit können Sie jetzt die View erzeugen.

Fügen Sie vor die beiden Befehle
<source lang="javascript">
v_ball_view.anchor.set(0.5),
p_pixi_app.stage.addChild(v_ball_view);
</source>
den Befehl
<source lang="javascript">
v_ball_view = new Sprite(p_resources['imgBall'].texture);
</source>

Es wird, wie auch schon in den Aufgaben 2a und 3, ein <code>Sprite</code>-Objekt
erstellt. Diesmal wird jedoch das Bild nicht aus einer Datei gelesen (<code>Sprite.fromImage...)</code>)
sondern aus dem vom Loader erstellten Ressourcen-Objekt unter dem Namen <code>'imgBall'</code>
extrahiert. Warum man nicht direkt das Objekt <code>p_resources['imgBall']</code> verwenden kann, sondern dessen Textur verwenden muss,
ist eines von den unergründlichen Geheimnissen von PixiJS.

BTW: Man bräuchte das Objekt <code>p_resources</code> gar nicht als Argument an die Initfunktion übergeben.
Man könnte auch in der Datei </code>game3a.js</code>, auch wieder den Loader importieren
<source lang="javascript">
import {loader, Sprite} from 'pixi.js';
</source>
und dann mittels <code>load.resources</code> auf dieses Objekt zugreifen.
Allerdings ist die Kommunikation zweier Module über ein globales Objekt (wie das Objekt <code>loader</code>)
''deprecated'', da man nicht weiß, wann und ob überhaupt das darin enthaltene Ressourcenobjekt sauber initialisiert wurde.
Eine direkte Kommunikation mittels Parametern und Argumenten ist dem vorzuziehen.

===Aufgabe 3b===
Erstellen Sie zunächst wie in Aufgabe 2 beschrieben eine Kopie der Lösung von Aufgabe 3a und nennen Sie sie 3b (<code>index03b.html</code>, <code>app03b.js</code>, <code>game03b.js</code>).

Erweitern Sie Ihre Lösung von Aufgabe 3 so, dass 5 unterschiedliche Vögel auf unterschiedlichen Routen über die Bühne fliegen.
(Hier benötigen Sie Ihr Wissen über den Umgang mit Arrays: siehe Praktikumsaufgaben [[MMProg: Praktikum: WiSe 2018/19: EcmaScript01|EcmaScript01]] und [[MMProg: Praktikum: WiSe 2018/19: EcmaScript02|EcmaScript02]].)

Gehen Sie dazu folgendermaßen vor:

* Laden Sie in der Datei <code>app03b.js</code> die beiden Bilder <code>/img/owl-150.png</code> und <code>/img/owl-150.png</code> asynchron mittels des PixiJS-Loaders.
* Bearbeiten Sie nun die Datei <code>game03b.js</code>*
* Legen Sie in einer Variablen oder Konstanten <code>v_ball_nr</code> die Anzahl der Vögel fest, die fliegen sollen. Initialisieren Sie diese mit der Zahl <code>5</code>.
* Ersetzen Sie <code>v_ball</code> und <code>v_ball_view</code> durch <code>v_balls</code> und <code>v_ball_views</code>. Diese Variablen sollen jeweils ein Array mit <code>v_ball_nr</code> Model-Objekten bzw. <code>v_ball_nr</code> zugehörigen View-Objekten beinhalten. Die Variable <code>v_ball_views</code> wird in der Initfunktion initialisiert und die Variable <code>v_balls</code> in der Resetfunktion.
* Initialisieren Sie das Array <code>v_ball_views</code> in der Initfunktion mit Hilfe einer Schleife und des [https://developer.mozilla.org/de/docs/Web/JavaScript/Reference/Global_Objects/Array/push Push-Befehls]. Sie müssen <code>v_ball_nr</code> Sprite-Objekte erzeugen und ins Array einfügen. Als Bild wählen Sie per Zufallsentscheidung (<code>Math.random() < 0.5</code>) jeweils die Eule oder Tux.
* Initialisieren Sie das Array <code>v_balls</code> in der Resetfunktion mit Hilfe einer Schleife und des Push-Befehls. Der Radius aller fünf Bälle sei 75. Die Position wählen Sie zufällig <code>Math.random()</code> innerhalb der Bühne, die Geschwindigkeit in $x$- und $y$-Richtung ebenfalls zufällig jeweils zwischen 100 und 400.
* Sorgen Sie in der Updatefunktion mit Hilfe einer Schleife dafür, dass all 5 Objekte im Array <code>v_balls</code> aktualisiert werden.
* Sorgen Sie in der Renderfunktion mit Hilfe einer Schleife dafür, dass all 5 Objekte im Array <code>v_ball_views</code> rerendert werden.

===Aufgaben 4 bis 10===

Nun können und sollten Sie zur Übung die Aufgaben 4 bis 10 der [[MMProg: Praktikum: WiSe 2017/18: GameLoop01#Aufgabe 2|ersten Praktikumsaufgabe]]
ebenfalls mit Hilfe von PixiJS lösen. Laden Sie dabei die Bilder wieder asynchron und verwenden Sie JSON zur Konfiguration. Sie sollten ruhig auch mal
mehr als einen Vogel animieren, {{zB}} indem Sie mehrere Eulen hintereinander die Wand entlang fliegen lassen.

==Quellen==
<references/>
<ol>
<li value="11"> {{Quelle|Kowarschick, W.: Multimedia-Programmierung}}</li>
</ol>

MMProg: Praktikum: WiSe 2018/19: Ball01

2018-11-21T11:59:44Z

Franzih: /* Aufgabe 1 */

{{MMProg:Praktikum:WiSe 2018/19:Menü}}

'''Musterlösung''': [https://glossar.hs-augsburg.de/beispiel/tutorium/2018/ball/WK_Ball01/web/ Web-Auftritt] ([https://gitlab.multimedia.hs-augsburg.de:8888/kowa/WK_Ball01.git Git-Repository])
==Vorbereitung==

Im Git-Repository finden Sie zwei WebStorm-Projekte zum Thema GameLoop:
* [https://gitlab.multimedia.hs-augsburg.de:8888/kowa/WK_GameLoop01.git WK_GameLoop01]
* [https://gitlab.multimedia.hs-augsburg.de:8888/kowa/WK_GameLoop02.git WK_GameLoop02]

Machen Sie sich mit den Projekten vertraut. Die Web-Anwendung <code>src/js/app</code> des zweiten Projektes dient als Ausgangsbasis für diese Praktikumsaufgabe.

Im ersten Beispiel finden Sie diverse Game-Loop-Varianten. Schrittweise werden potentielle
Probleme behoben. Dieses Projekt verfolgt das didaktische Ziel, Ihnen die Probleme und potentielle
Lösungen im Zusammenhang mit JavaScript-Animationen zu verdeutlichen.

Im zweiten Beispiel wurde eine Game-Loop-Klasse realisiert, die sie für dieses Praktikum
nutzen können und sollten. Diese Klasse basiert auf den Ergebnissen des ersten Projektes,
stellt aber – im Gegensatz zu einigen Web-Anwendungen des ersten Projekt – bislang keine Informationen
über die aktuelle Frame-Rate bereit. Dies ist aber für diese Praktikumsaufgabe nicht von Interesse.

Importieren Sie das leere Git-Projekt [https://gitlab.multimedia.hs-augsburg.de:8888/kowa/Ball01.git Ball01] in WebStorm.
Laden Sie annschließend mittels <code>npm i</code> alle benötigten Node.js-Module in das Projekt.

Sie können Ihr Projekt zur Übung auch in Ihrem Git-Repository speichern. Das ist aber nicht so wichtig.
Falls Sie da machen möchten, müssen Sie es zuvor von meinem (schreibgeschützten) Repository lösen:

<source lang="javascript">
git remote remove origin
git remote add origin https://gitlab.multimedia.hs-augsburg.de:8888/BENUTZER/Ball01.git
</source>

==Aufgaben==

In Ihrem Projekt finden Sie 10 Web-Anwendungen vor: <code>index01.html</code> verwendet die JavaScript-Datei <code>app01.js</code>,
die ihrerseits das Spiel <code>ball01.js</code> einbindet. <code>index02.html</code>, <code>index03.html</code> etc. sind analog aufgebaut.
Wenn Sie irgendeine dieser Anwendungen im Browser öffnen, sehen Sie eine Eule in der linken oberen Bildschirmecke. Diese sollen
sie auf unterschiedliche Art und Weise animieren. Beachten Sie, dass im Folgenden der Avatar nicht „Eule“, sondern „Ball“ genannt wird.
Die Eule ist lediglich eine View des ballartigen Objektes.

Lösen Sie jede der folgenden Aufgaben in einer der vorgegebenen Apps.
Scheuen Sie sich nicht davor, eigene Experimente durchzuführen. Wenn die vorgegebenen Apps nicht ausreichen sollten, legen Sie einfach
noch ein paar an.

Schreiben Sie Ihre Lösungen der Aufgabe $i$ in die Datei <code>src/js/ball/ball</code>$i$<code>.js</code>.
Am einfachsten ist es, wenn Sie jeweils die Lösung der vorangegangenen Aufgabe kopieren und diese Kopie dann weiterentwickeln.

===Aufgabe 1===
Passen Sie zur Lösung dieser Aufgabe die Datei <code>src/js/ball/ball01.js</code> an.
Lassen Sie sich durch den Code der Datei <code>ball.js</code> aus dem Beispiel <code>WK_GameLoop02</code> inspirieren.
(Sie könnten auch <code>ball_interpolate.js</code> verwenden, aber das verwirrt Sie vermutlich zurzeit deutlich mehr, als dass es
Ihnen nützt.)

'''Lassen Sie den Ball horizontal vom linken bis zum rechten Fensterrand des Browsers fliegen.'''

Tipp: http://ryanve.com/lab/dimensions/

Berücksichtigen Sie, dass der Ball 150 Pixel breit ist, {{dh}} einen Radius von 75 Pixel hat,
und dass der Ankerpunkt im linken oberen Eck des zugehörigen Bildes liegt.
Sie müssen im Ball-Objekt auch die Radius des Balls speichern und diesen Wert bei der Kollissionserkennung
und -behandlung berücksichtigen. Übrigens, wenn Sie <code>v_ball_view</code> wie in <code>ball.js</code>
von <code>WK_GameLoop02</code> definieren, können Sie mittels <code>v_ball_view.offsetWidth/2;</code>
die aktuelle Breite des Ballobjektes aus der View auslesen.

Ein Tipp noch: Wenn Sie das Ball-Objekt zunächst als leeres Objekt definieren und danach in der
Reset-Funktion initialisieren, funktionieren Ihre Anwendungen auch noch, wenn Sie später einen
Start/Stopp- und einen Pause-Button einfügen (vgl. {{zB}} <code>index_start_stop_toggling.html</code> in <code>WK_GameLoop02</code>).
Sollten Sie keine Buttons zur Steuerung einfügen wollen, können Sie die Objekte auch direkt bei
der Definition initialisieren.

Vergessen Sie nicht, die Sourcen mittels <code>npm run watch</code> zu übersetzen. Und beachten Sie,
dass im Browser nur die Dateien <code>web/index</code>$i$<code>.html</code> funktionieren. Wenn Sie versuchen,
<code>src/index</code>$i$<code>.html</code> erhalten Sie im Browser einen leeren Screen und in der Browser-Konsole drei Fehlermeldungen,
dass gewissen Dateien nicht geladen werden können.

===Aufgabe 2===

Lassen Sie den Ball nicht waagerecht, sondern in der horizontalen Mitte des Browserfensters senkrecht von Fensterrand zu Fensterrand fliegen.

Um die Aufgabe zu lösen, müssen Sie für der Ball zusätzlich eine y-Position und eine y-Geschwindigkeit definieren. Die Berechnung der aktuellen y-Position funktioniert
analog zur Berechnung der aktuellen x-Position.

Vergessen Sie nicht, auch die Kollissionserkennung und -behandlung für die beiden Bildschirmseiten <code>top</code> und <code>botton</code>
zu implementieren.

Und Sie müssen natürlich die Render-Funktion anpassen, sodass die aktuelle y-Position beim Rendern auch berücksichtigt wird.

===Aufgabe 3===

Lassen Sie der Ball von der Browsermitte aus schräg über den Bildschirm fliegen. In x-Richtung soll er doppelt so schnell sein (200 Pixel/s)
wie in y-Richtung (100 Pixel/s).

===Aufgabe 4===

Setzen Sie die x-Start-Position des Balls auf <code>-100</code> und starten Sie die Web-App. Den Effekt, den Sie sehen, nennt
man [[Kollisionserkennung und -behandlung|Penetration]]. Die Eule hängt in der Wand fest, da sie nicht den Kollissionsbereich
(die linke Wand) in einem Schritt verlässt. Daher besteht die Kollission fort und im nächsten Schritt ändert sie wieder ihre Flugrichtung.

Verbessern Sie das, indem Sie die Kollisionserkennung und -behandlung verbessern:

<source lang="javascript">
if (v_ball.x <= v_stage.left)
{ v_ball.vx = Math.abs(v_ball.vx);
}
if (v_ball.x >= v_stage.right - 2*v_ball.r)
{ v_ball.vx = -Math.abs(v_ball.vx);
}
</source>

Passen Sie die Kollisionserkennung und -behandlung in y-Richtung analog an.

Sie können und sollten sogar noch einen Schritt weiter gehen und den Ball
wieder zurück auf die Bühne schieben, wenn er in die Wand eingedrungen ist.
In die Wand einzudringen ist zwar physikalisch nicht möglich, aber leider in
einer Simulation der physikalischen Welt nur schwer zu vermeiden, da die
Position nur alle 16,7 ms berechnet wird. War der Ball zu einem Zeitpunkt
noch vor der Mauer, kann er beim nächsten Schritt schon drinnen stecken.
Insbesondere bei sehr schnellen Objekten kann das dann zu den
beobachteten Penetrationseffekten führen.

Also schieben Sie den Ball besser zurück auf die Bühne.

<source lang="javascript">
if (v_ball.x <= v_stage.left)
{ v_ball.x = v_stage.left;
v_ball.vx = Math.abs(v_ball.vx);
}
if (v_ball.x >= v_stage.right - 2*v_ball.r)
{ v_ball.x = v_stage.right - 2*v_ball.r;
v_ball.vx = -Math.abs(v_ball.vx);
}
</source>

Passen Sie die Kollisionserkennung und -behandlung in y-Richtung wiederum analog an.

===Aufgabe 5===

Ändern Sie die Kollisionserkennung und -behandlung so ab, dass sich der Ball ausgehend von der linken oberen Fensterecke
im Uhrzeigersinn immer entlang des Fensterrandes bewegt.

Beachten Sie bitte: Hier ist es besonders wichtig, dass Sie den Ball wieder auf die Bühne zurückschieben, wenn er mit einer
Wand kollidiert. Ansonsten verschwindet der Ball schnell im Nirgendwo.

(Anmerkung: Dies war einmal eine Aufgabe im Rahmen des Prüfungspraktikums, wobei die Lösung zur 3. Aufgabe vorgegeben war.)

===Aufgabe 6===

Kopieren Sie diesmal nicht die Lösung von Aufgabe 5, sondern die von Aufgabe 4. Im Folgenden arbeiten Sie
wieder mit der normalen Kollissionserkennung und -behandlung. Positionieren Sie den Ball allerdings wieder im linken oberen Eck
(in Aufgabe 4 hatten Sie sie außerhalb der Bühne platziert).

Die neue Position des Balls berechnen Sie mit Hilfe der Geschwindigkeit (velocity, <code>vx</code>, <code>vy</code>). Doch auch die
Geschwindigkeig kann sich im Laufe der Zeit ändern. Dazu benötigt man die Beschleunigung (acceleration, <code>ax</code>, <code>ay</code>).

Fügen Sie zu Ihrem Ball zwei weitere Attribute <code>ax</code> (Beschleunigung in x-Richtung) und
<code>ay</code> (Beschleunigung in y-Richtung) hinzu. Setzen Sie die Initialwerte auf
<code>400</code> (Pixel pro Sekunde) bzw. <code>200</code> (Pixel pro Sekunde). Das heißt, Sie möchten,
dass der Ball in jeder Sekunde um 400 bzw. 200 Pixel pro Sekunde mehr zurücklegt als zuvor.

Wenn Sie jetzt die Web-App starten, beschleunigt der Ball allerdings noch nicht.

In Ihrem Code wird die Position 60 mal pro Sekunde mit Hilfe des folgenden Codes aktualisiert:

<source lang="javascript">
v_ball.x += v_ball.vx * p_delta_s;
v_ball.y += v_ball.vy * p_delta_s;
</source>

Die Geschwindigkeit wird zur Position hinzuaddiert. Allerdings ist die Geschwindigkeit
in Pixeln pro Sekunde angegeben. Die Modellaktualisierung passiert jedoch alle $0,0167$
Sekunden. In dieser Zeit bewegt sich der Ball nur um das $0,0167$-fache (= $1,67$%) der Sekundengeschwindigkeit weiter.
Dieser Faktor ist im Attribut <code>p_delta_s</code> enthalten. Dieser wird mit
$1/60 = 0,0167$ initialisiert, sofern der Update-Methode kein anderer Wert übergeben wird.

Auf genau dieselbe Weise wird die aktuelle Geschwindigkeit mit Hilfe der Beschleunigung
berechnet:

<source lang="javascript">
v_ball.vx += v_ball.ax * p_delta_s;
v_ball.vy += v_ball.ay * p_delta_s;
</source>

Fügen Sie diesen Code in Ihre Model-Update-Funktion ein und starten Sie den Ball erneut.
Wenn Sie jetzt Ihre Web-App laufen lassen, stellen Sie fest, dass der Ball zunächst beschleunigt,
nach eine Kollision aber wieder abbremst. Nach der nächsten Kollision beschleunigt er wieder.

Um diesen Effekt zu vermeiden, müssen Sie jedes mal, wenn Sie bei der Kollissionsbehandlung das Vorzeichen
der Geschwindigkeit ändern, das Vorzeichen der zugehörigen Beschleunigung analog ändern.

Beispielsweise muss der Code

<source lang="javascript">
v_ball.vx = -Math.abs(v_ball.vx);
</source>

um

<source lang="javascript">
v_ball.ax = -Math.abs(v_ball.ax);
</source>

ergänzt werden.

===Aufgabe 7===

Schreiben Sie die Kollissionsbehandlung so um, dass im Falle einer Kollission des Balls
mit dem unteren Fensterrand sowohl die Geschwindigkeit als auch die Beschleunigung
jeweils in x- und in y-Richtung auf Null gesetzt wird. Das heißt, der
Ball bleibt bei einer Kollision mit dem unteren Rand stehen.

===Aufgabe 8===

Positionieren Sie der Ball im linken oberen Eck, geben Sie ihm eine Geschwindigkeit von
300 Pixeln in x-Richtung und von 0 Pixeln in y-Richtung. Die Beschleunigung in x-Richtung beträgt 0,
die Beschleunigung in y-Richtung 800. (Diese Zahlen sind gut für meinen Monitor geeignet,
der eine Auflösung von 1600x900 hat. Wenn Sie einen deutlich kleineren oder größeren
Monitor haben, müssen Sie die Zahlen evtl. anpassen.)

Welche Kurve beschreibt der Ball, wenn Sie die Web-App starten?

===Aufgabe 9===

Positionieren Sie den Ball im linken unteren Eck, geben Sie ihm eine Geschwindigkeit von
300 Pixeln in x-Richtung und von -400 Pixeln in y-Richtung. Die Beschleunigung in x-Richtung beträgt 0,
die Beschleunigung in y-Richtung 200.

Welche Kurve beschreibt der Ball, wenn Sie die Web-App starten?

Allerdings ist es nicht ganz sauber, die Erdanziehung mittels <code>v_ball.ax</code> zu simulieren.
Diese Beschleunigung ist die Beschleunigung, die vom Ball selbst ausgeht (die also von der Eule
per Muskelkraft geleistet wird). Wenn der Ball seine Bewegungsrichtung ändert, ändert sich auch die Richtung der Beschleunigung (eine Eule beschleunigt immer in Flugrichtung, vgl. Aufgabe 6).
Die Richtung der Erbbeschleunigung ändert jedoch bei einer Kollision nicht.

Verbessern Sie daher Ihre Anwendung vorlgendermaßen:

* Fügen Sie eine Variable <code>v_g = 981</code> in die <code>let</code>-Anweisung ein. (981 wurde in Anlehnung an die Gravitationskonstante der Erde gewählt.)
* Reduzieren Sie die Eigenbeschleunigung der Eule in $y$-Richtung auf <code>0</code>. (Jetzt sollte sich die Eule wieder geradlinig bewegen.)
* Ersetzen Sie un der Update-Funktion <source lang="javascript">v_ball.vy += v_ball.ay * p_delta_s;</source> durch <source lang="javascript">v_ball.vy += (v_ball.ay+v_g) * p_delta_s;</source>

Das heißt, berücksichtigen Sie bei der Berechnung der $y$-Geschwindigkeit des Balles zusätzlich die Erdanziehungskraft. Nun sollte die Eule wieder einen sauberen Parabelflug vollführen.

Alles, was jetzt noch fehlt, ist ein Gummiband, mit dem Sie die Eule beschleunigen können. :-)

===Aufgabe 10===

Machen Sie eigene Experimente. Bringen Sie {{zB}} den Ball dazu, wie ein Flummi
zu springen, indem sie seine Geschwindigkeit in x- und y-Richtung bei einem Bodenkontakt
um einen gewissen Prozentsatz reduzieren, aber nicht gleich auf null setzen.
(Die Beschleunigung, die die Erdanziehung simuliert, bleibt die ganze Zeit über gleich).
Achtung: Bei einem Bodenkontakt, dreht sich das Vorzeichen der y-Geschwindigkeit um,
das der x-Geschwindigkeit ändert sich dagegen nicht.

Nervig ist, dass der Ball zum Schluss immer noch ganz leicht hüpft und gar nicht
zur Ruhe kommt. Vielleicht können Sie auch dieses Problem beheben.

Oder probieren Sie etwas ganz anderes aus.

==Quellen==
<references/>
<ol>
<li value="1"> {{Quelle|Kowarschick, W.: Multimedia-Programmierung}}</li>
</ol>

MMProg: Praktikum: WiSe 2018/19: Ball01

2018-11-21T11:26:40Z

Franzih: /* Aufgabe 2 */

{{MMProg:Praktikum:WiSe 2018/19:Menü}}

'''Musterlösung''': [https://glossar.hs-augsburg.de/beispiel/tutorium/2018/ball/WK_Ball01/web/ Web-Auftritt] ([https://gitlab.multimedia.hs-augsburg.de:8888/kowa/WK_Ball01.git Git-Repository])
==Vorbereitung==

Im Git-Repository finden Sie zwei WebStorm-Projekte zum Thema GameLoop:
* [https://gitlab.multimedia.hs-augsburg.de:8888/kowa/WK_GameLoop01.git WK_GameLoop01]
* [https://gitlab.multimedia.hs-augsburg.de:8888/kowa/WK_GameLoop02.git WK_GameLoop02]

Machen Sie sich mit den Projekten vertraut. Die Web-Anwendung <code>src/js/app</code> des zweiten Projektes dient als Ausgangsbasis für diese Praktikumsaufgabe.

Im ersten Beispiel finden Sie diverse Game-Loop-Varianten. Schrittweise werden potentielle
Probleme behoben. Dieses Projekt verfolgt das didaktische Ziel, Ihnen die Probleme und potentielle
Lösungen im Zusammenhang mit JavaScript-Animationen zu verdeutlichen.

Im zweiten Beispiel wurde eine Game-Loop-Klasse realisiert, die sie für dieses Praktikum
nutzen können und sollten. Diese Klasse basiert auf den Ergebnissen des ersten Projektes,
stellt aber – im Gegensatz zu einigen Web-Anwendungen des ersten Projekt – bislang keine Informationen
über die aktuelle Frame-Rate bereit. Dies ist aber für diese Praktikumsaufgabe nicht von Interesse.

Importieren Sie das leere Git-Projekt [https://gitlab.multimedia.hs-augsburg.de:8888/kowa/Ball01.git Ball01] in WebStorm.
Laden Sie annschließend mittels <code>npm i</code> alle benötigten Node.js-Module in das Projekt.

Sie können Ihr Projekt zur Übung auch in Ihrem Git-Repository speichern. Das ist aber nicht so wichtig.
Falls Sie da machen möchten, müssen Sie es zuvor von meinem (schreibgeschützten) Repository lösen:

<source lang="javascript">
git remote remove origin
git remote add origin https://gitlab.multimedia.hs-augsburg.de:8888/BENUTZER/Ball01.git
</source>

==Aufgaben==

In Ihrem Projekt finden Sie 10 Web-Anwendungen vor: <code>index01.html</code> verwendet die JavaScript-Datei <code>app01.js</code>,
die ihrerseits das Spiel <code>ball01.js</code> einbindet. <code>index02.html</code>, <code>index03.html</code> etc. sind analog aufgebaut.
Wenn Sie irgendeine dieser Anwendungen im Browser öffnen, sehen Sie eine Eule in der linken oberen Bildschirmecke. Diese sollen
sie auf unterschiedliche Art und Weise animieren. Beachten Sie, dass im Folgenden der Avatar nicht „Eule“, sondern „Ball“ genannt wird.
Die Eule ist lediglich eine View des ballartigen Objektes.

Lösen Sie jede der folgenden Aufgaben in einer der vorgegebenen Apps.
Scheuen Sie sich nicht davor, eigene Experimente durchzuführen. Wenn die vorgegebenen Apps nicht ausreichen sollten, legen Sie einfach
noch ein paar an.

Schreiben Sie Ihre Lösungen der Aufgabe $i$ in die Datei <code>src/js/ball/ball</code>$i$<code>.js</code>.
Am einfachsten ist es, wenn Sie jeweils die Lösung der vorangegangenen Aufgabe kopieren und diese Kopie dann weiterentwickeln.

===Aufgabe 1===
Passen Sie zur Lösung dieser Aufgabe die Datei <code>src/js/ball/ball01.js</code> an.
Lassen Sie sich durch den Code der Datei <code>ball.js</code> aus dem Beispiel <code>WK_GameLoop02</code> inspirieren.
(Sie könnten auch <code>ball_interpolate.js</code> verwenden, aber das verwirrt Sie vermutlich zurzeit deutlich mehr, als dass es
Ihnen nützt.)

'''Lassen Sie den Ball horizontal vom linken bis zum rechten Fensterrand des Browsers fliegen.'''

Tipp: http://ryanve.com/lab/dimensions/

Berücksichtigen Sie, dass der Ball 150 Pixel breit ist, {{dh}} einen Radius von 75 Pixel hat,
und das der Ankerpunkt im linken oberen Eck des zugehörigen Bildes liegt.
Sie müssen im Ball-Objekt auch die Radius des Balls speichern und diesen Wert bei der Kollissionserkennung
und -behandlung berücksichtigen. Übrigens, wenn Sie <code>v_ball_view</code> wie in <code>ball.js</code>
von <code>WK_GameLoop02</code> definieren, können Sie mittels <code>v_ball_view.offsetWidth/2;</code>
die aktuelle Breite des Ballobjektes aus der View auslesen.

Ein Tipp noch: Wenn Sie das Ball-Objekt zunächst als leeres Objekt definieren und danach in der
Reset-Funktion initialisieren, funktionieren Ihre Anwendungen auch noch, wenn Sie später einen
Start/Stopp- und einen Pause-Button einfügen (vgl. {{zB}} <code>index_start_stop_toggling.html</code> in <code>WK_GameLoop02</code>).
Sollten Sie keine Buttons zur Steuerung einfügen wollen, können Sie die Objekte auch direkt bei
der Definition initialisieren.

Vergessen Sie nicht, die Sourcen mittels <code>npm run watch</code> zu übersetzen. Und beachten Sie,
dass im Browser nur die Dateien <code>web/index</code>$i$<code>.html</code> funktionieren. Wenn Sie versuchen,
<code>src/index</code>$i$<code>.html</code> erhalten Sie im Browser einen leeren Screen und in der Browser-Konsole drei Fehlermeldungen,
dass gewissen Dateien nicht geladen werden können.

===Aufgabe 2===

Lassen Sie den Ball nicht waagerecht, sondern in der horizontalen Mitte des Browserfensters senkrecht von Fensterrand zu Fensterrand fliegen.

Um die Aufgabe zu lösen, müssen Sie für der Ball zusätzlich eine y-Position und eine y-Geschwindigkeit definieren. Die Berechnung der aktuellen y-Position funktioniert
analog zur Berechnung der aktuellen x-Position.

Vergessen Sie nicht, auch die Kollissionserkennung und -behandlung für die beiden Bildschirmseiten <code>top</code> und <code>botton</code>
zu implementieren.

Und Sie müssen natürlich die Render-Funktion anpassen, sodass die aktuelle y-Position beim Rendern auch berücksichtigt wird.

===Aufgabe 3===

Lassen Sie der Ball von der Browsermitte aus schräg über den Bildschirm fliegen. In x-Richtung soll er doppelt so schnell sein (200 Pixel/s)
wie in y-Richtung (100 Pixel/s).

===Aufgabe 4===

Setzen Sie die x-Start-Position des Balls auf <code>-100</code> und starten Sie die Web-App. Den Effekt, den Sie sehen, nennt
man [[Kollisionserkennung und -behandlung|Penetration]]. Die Eule hängt in der Wand fest, da sie nicht den Kollissionsbereich
(die linke Wand) in einem Schritt verlässt. Daher besteht die Kollission fort und im nächsten Schritt ändert sie wieder ihre Flugrichtung.

Verbessern Sie das, indem Sie die Kollisionserkennung und -behandlung verbessern:

<source lang="javascript">
if (v_ball.x <= v_stage.left)
{ v_ball.vx = Math.abs(v_ball.vx);
}
if (v_ball.x >= v_stage.right - 2*v_ball.r)
{ v_ball.vx = -Math.abs(v_ball.vx);
}
</source>

Passen Sie die Kollisionserkennung und -behandlung in y-Richtung analog an.

Sie können und sollten sogar noch einen Schritt weiter gehen und den Ball
wieder zurück auf die Bühne schieben, wenn er in die Wand eingedrungen ist.
In die Wand einzudringen ist zwar physikalisch nicht möglich, aber leider in
einer Simulation der physikalischen Welt nur schwer zu vermeiden, da die
Position nur alle 16,7 ms berechnet wird. War der Ball zu einem Zeitpunkt
noch vor der Mauer, kann er beim nächsten Schritt schon drinnen stecken.
Insbesondere bei sehr schnellen Objekten kann das dann zu den
beobachteten Penetrationseffekten führen.

Also schieben Sie den Ball besser zurück auf die Bühne.

<source lang="javascript">
if (v_ball.x <= v_stage.left)
{ v_ball.x = v_stage.left;
v_ball.vx = Math.abs(v_ball.vx);
}
if (v_ball.x >= v_stage.right - 2*v_ball.r)
{ v_ball.x = v_stage.right - 2*v_ball.r;
v_ball.vx = -Math.abs(v_ball.vx);
}
</source>

Passen Sie die Kollisionserkennung und -behandlung in y-Richtung wiederum analog an.

===Aufgabe 5===

Ändern Sie die Kollisionserkennung und -behandlung so ab, dass sich der Ball ausgehend von der linken oberen Fensterecke
im Uhrzeigersinn immer entlang des Fensterrandes bewegt.

Beachten Sie bitte: Hier ist es besonders wichtig, dass Sie den Ball wieder auf die Bühne zurückschieben, wenn er mit einer
Wand kollidiert. Ansonsten verschwindet der Ball schnell im Nirgendwo.

(Anmerkung: Dies war einmal eine Aufgabe im Rahmen des Prüfungspraktikums, wobei die Lösung zur 3. Aufgabe vorgegeben war.)

===Aufgabe 6===

Kopieren Sie diesmal nicht die Lösung von Aufgabe 5, sondern die von Aufgabe 4. Im Folgenden arbeiten Sie
wieder mit der normalen Kollissionserkennung und -behandlung. Positionieren Sie den Ball allerdings wieder im linken oberen Eck
(in Aufgabe 4 hatten Sie sie außerhalb der Bühne platziert).

Die neue Position des Balls berechnen Sie mit Hilfe der Geschwindigkeit (velocity, <code>vx</code>, <code>vy</code>). Doch auch die
Geschwindigkeig kann sich im Laufe der Zeit ändern. Dazu benötigt man die Beschleunigung (acceleration, <code>ax</code>, <code>ay</code>).

Fügen Sie zu Ihrem Ball zwei weitere Attribute <code>ax</code> (Beschleunigung in x-Richtung) und
<code>ay</code> (Beschleunigung in y-Richtung) hinzu. Setzen Sie die Initialwerte auf
<code>400</code> (Pixel pro Sekunde) bzw. <code>200</code> (Pixel pro Sekunde). Das heißt, Sie möchten,
dass der Ball in jeder Sekunde um 400 bzw. 200 Pixel pro Sekunde mehr zurücklegt als zuvor.

Wenn Sie jetzt die Web-App starten, beschleunigt der Ball allerdings noch nicht.

In Ihrem Code wird die Position 60 mal pro Sekunde mit Hilfe des folgenden Codes aktualisiert:

<source lang="javascript">
v_ball.x += v_ball.vx * p_delta_s;
v_ball.y += v_ball.vy * p_delta_s;
</source>

Die Geschwindigkeit wird zur Position hinzuaddiert. Allerdings ist die Geschwindigkeit
in Pixeln pro Sekunde angegeben. Die Modellaktualisierung passiert jedoch alle $0,0167$
Sekunden. In dieser Zeit bewegt sich der Ball nur um das $0,0167$-fache (= $1,67$%) der Sekundengeschwindigkeit weiter.
Dieser Faktor ist im Attribut <code>p_delta_s</code> enthalten. Dieser wird mit
$1/60 = 0,0167$ initialisiert, sofern der Update-Methode kein anderer Wert übergeben wird.

Auf genau dieselbe Weise wird die aktuelle Geschwindigkeit mit Hilfe der Beschleunigung
berechnet:

<source lang="javascript">
v_ball.vx += v_ball.ax * p_delta_s;
v_ball.vy += v_ball.ay * p_delta_s;
</source>

Fügen Sie diesen Code in Ihre Model-Update-Funktion ein und starten Sie den Ball erneut.
Wenn Sie jetzt Ihre Web-App laufen lassen, stellen Sie fest, dass der Ball zunächst beschleunigt,
nach eine Kollision aber wieder abbremst. Nach der nächsten Kollision beschleunigt er wieder.

Um diesen Effekt zu vermeiden, müssen Sie jedes mal, wenn Sie bei der Kollissionsbehandlung das Vorzeichen
der Geschwindigkeit ändern, das Vorzeichen der zugehörigen Beschleunigung analog ändern.

Beispielsweise muss der Code

<source lang="javascript">
v_ball.vx = -Math.abs(v_ball.vx);
</source>

um

<source lang="javascript">
v_ball.ax = -Math.abs(v_ball.ax);
</source>

ergänzt werden.

===Aufgabe 7===

Schreiben Sie die Kollissionsbehandlung so um, dass im Falle einer Kollission des Balls
mit dem unteren Fensterrand sowohl die Geschwindigkeit als auch die Beschleunigung
jeweils in x- und in y-Richtung auf Null gesetzt wird. Das heißt, der
Ball bleibt bei einer Kollision mit dem unteren Rand stehen.

===Aufgabe 8===

Positionieren Sie der Ball im linken oberen Eck, geben Sie ihm eine Geschwindigkeit von
300 Pixeln in x-Richtung und von 0 Pixeln in y-Richtung. Die Beschleunigung in x-Richtung beträgt 0,
die Beschleunigung in y-Richtung 800. (Diese Zahlen sind gut für meinen Monitor geeignet,
der eine Auflösung von 1600x900 hat. Wenn Sie einen deutlich kleineren oder größeren
Monitor haben, müssen Sie die Zahlen evtl. anpassen.)

Welche Kurve beschreibt der Ball, wenn Sie die Web-App starten?

===Aufgabe 9===

Positionieren Sie den Ball im linken unteren Eck, geben Sie ihm eine Geschwindigkeit von
300 Pixeln in x-Richtung und von -400 Pixeln in y-Richtung. Die Beschleunigung in x-Richtung beträgt 0,
die Beschleunigung in y-Richtung 200.

Welche Kurve beschreibt der Ball, wenn Sie die Web-App starten?

Allerdings ist es nicht ganz sauber, die Erdanziehung mittels <code>v_ball.ax</code> zu simulieren.
Diese Beschleunigung ist die Beschleunigung, die vom Ball selbst ausgeht (die also von der Eule
per Muskelkraft geleistet wird). Wenn der Ball seine Bewegungsrichtung ändert, ändert sich auch die Richtung der Beschleunigung (eine Eule beschleunigt immer in Flugrichtung, vgl. Aufgabe 6).
Die Richtung der Erbbeschleunigung ändert jedoch bei einer Kollision nicht.

Verbessern Sie daher Ihre Anwendung vorlgendermaßen:

* Fügen Sie eine Variable <code>v_g = 981</code> in die <code>let</code>-Anweisung ein. (981 wurde in Anlehnung an die Gravitationskonstante der Erde gewählt.)
* Reduzieren Sie die Eigenbeschleunigung der Eule in $y$-Richtung auf <code>0</code>. (Jetzt sollte sich die Eule wieder geradlinig bewegen.)
* Ersetzen Sie un der Update-Funktion <source lang="javascript">v_ball.vy += v_ball.ay * p_delta_s;</source> durch <source lang="javascript">v_ball.vy += (v_ball.ay+v_g) * p_delta_s;</source>

Das heißt, berücksichtigen Sie bei der Berechnung der $y$-Geschwindigkeit des Balles zusätzlich die Erdanziehungskraft. Nun sollte die Eule wieder einen sauberen Parabelflug vollführen.

Alles, was jetzt noch fehlt, ist ein Gummiband, mit dem Sie die Eule beschleunigen können. :-)

===Aufgabe 10===

Machen Sie eigene Experimente. Bringen Sie {{zB}} den Ball dazu, wie ein Flummi
zu springen, indem sie seine Geschwindigkeit in x- und y-Richtung bei einem Bodenkontakt
um einen gewissen Prozentsatz reduzieren, aber nicht gleich auf null setzen.
(Die Beschleunigung, die die Erdanziehung simuliert, bleibt die ganze Zeit über gleich).
Achtung: Bei einem Bodenkontakt, dreht sich das Vorzeichen der y-Geschwindigkeit um,
das der x-Geschwindigkeit ändert sich dagegen nicht.

Nervig ist, dass der Ball zum Schluss immer noch ganz leicht hüpft und gar nicht
zur Ruhe kommt. Vielleicht können Sie auch dieses Problem beheben.

Oder probieren Sie etwas ganz anderes aus.

==Quellen==
<references/>
<ol>
<li value="1"> {{Quelle|Kowarschick, W.: Multimedia-Programmierung}}</li>
</ol>

MMProg: Praktikum: WiSe 2018/19: Ball01

2018-11-21T11:26:21Z

Franzih: /* Aufgabe 1 */

{{MMProg:Praktikum:WiSe 2018/19:Menü}}

'''Musterlösung''': [https://glossar.hs-augsburg.de/beispiel/tutorium/2018/ball/WK_Ball01/web/ Web-Auftritt] ([https://gitlab.multimedia.hs-augsburg.de:8888/kowa/WK_Ball01.git Git-Repository])
==Vorbereitung==

Im Git-Repository finden Sie zwei WebStorm-Projekte zum Thema GameLoop:
* [https://gitlab.multimedia.hs-augsburg.de:8888/kowa/WK_GameLoop01.git WK_GameLoop01]
* [https://gitlab.multimedia.hs-augsburg.de:8888/kowa/WK_GameLoop02.git WK_GameLoop02]

Machen Sie sich mit den Projekten vertraut. Die Web-Anwendung <code>src/js/app</code> des zweiten Projektes dient als Ausgangsbasis für diese Praktikumsaufgabe.

Im ersten Beispiel finden Sie diverse Game-Loop-Varianten. Schrittweise werden potentielle
Probleme behoben. Dieses Projekt verfolgt das didaktische Ziel, Ihnen die Probleme und potentielle
Lösungen im Zusammenhang mit JavaScript-Animationen zu verdeutlichen.

Im zweiten Beispiel wurde eine Game-Loop-Klasse realisiert, die sie für dieses Praktikum
nutzen können und sollten. Diese Klasse basiert auf den Ergebnissen des ersten Projektes,
stellt aber – im Gegensatz zu einigen Web-Anwendungen des ersten Projekt – bislang keine Informationen
über die aktuelle Frame-Rate bereit. Dies ist aber für diese Praktikumsaufgabe nicht von Interesse.

Importieren Sie das leere Git-Projekt [https://gitlab.multimedia.hs-augsburg.de:8888/kowa/Ball01.git Ball01] in WebStorm.
Laden Sie annschließend mittels <code>npm i</code> alle benötigten Node.js-Module in das Projekt.

Sie können Ihr Projekt zur Übung auch in Ihrem Git-Repository speichern. Das ist aber nicht so wichtig.
Falls Sie da machen möchten, müssen Sie es zuvor von meinem (schreibgeschützten) Repository lösen:

<source lang="javascript">
git remote remove origin
git remote add origin https://gitlab.multimedia.hs-augsburg.de:8888/BENUTZER/Ball01.git
</source>

==Aufgaben==

In Ihrem Projekt finden Sie 10 Web-Anwendungen vor: <code>index01.html</code> verwendet die JavaScript-Datei <code>app01.js</code>,
die ihrerseits das Spiel <code>ball01.js</code> einbindet. <code>index02.html</code>, <code>index03.html</code> etc. sind analog aufgebaut.
Wenn Sie irgendeine dieser Anwendungen im Browser öffnen, sehen Sie eine Eule in der linken oberen Bildschirmecke. Diese sollen
sie auf unterschiedliche Art und Weise animieren. Beachten Sie, dass im Folgenden der Avatar nicht „Eule“, sondern „Ball“ genannt wird.
Die Eule ist lediglich eine View des ballartigen Objektes.

Lösen Sie jede der folgenden Aufgaben in einer der vorgegebenen Apps.
Scheuen Sie sich nicht davor, eigene Experimente durchzuführen. Wenn die vorgegebenen Apps nicht ausreichen sollten, legen Sie einfach
noch ein paar an.

Schreiben Sie Ihre Lösungen der Aufgabe $i$ in die Datei <code>src/js/ball/ball</code>$i$<code>.js</code>.
Am einfachsten ist es, wenn Sie jeweils die Lösung der vorangegangenen Aufgabe kopieren und diese Kopie dann weiterentwickeln.

===Aufgabe 1===
Passen Sie zur Lösung dieser Aufgabe die Datei <code>src/js/ball/ball01.js</code> an.
Lassen Sie sich durch den Code der Datei <code>ball.js</code> aus dem Beispiel <code>WK_GameLoop02</code> inspirieren.
(Sie könnten auch <code>ball_interpolate.js</code> verwenden, aber das verwirrt Sie vermutlich zurzeit deutlich mehr, als dass es
Ihnen nützt.)

'''Lassen Sie den Ball horizontal vom linken bis zum rechten Fensterrand des Browsers fliegen.'''

Tipp: http://ryanve.com/lab/dimensions/

Berücksichtigen Sie, dass der Ball 150 Pixel breit ist, {{dh}} einen Radius von 75 Pixel hat,
und das der Ankerpunkt im linken oberen Eck des zugehörigen Bildes liegt.
Sie müssen im Ball-Objekt auch die Radius des Balls speichern und diesen Wert bei der Kollissionserkennung
und -behandlung berücksichtigen. Übrigens, wenn Sie <code>v_ball_view</code> wie in <code>ball.js</code>
von <code>WK_GameLoop02</code> definieren, können Sie mittels <code>v_ball_view.offsetWidth/2;</code>
die aktuelle Breite des Ballobjektes aus der View auslesen.

Ein Tipp noch: Wenn Sie das Ball-Objekt zunächst als leeres Objekt definieren und danach in der
Reset-Funktion initialisieren, funktionieren Ihre Anwendungen auch noch, wenn Sie später einen
Start/Stopp- und einen Pause-Button einfügen (vgl. {{zB}} <code>index_start_stop_toggling.html</code> in <code>WK_GameLoop02</code>).
Sollten Sie keine Buttons zur Steuerung einfügen wollen, können Sie die Objekte auch direkt bei
der Definition initialisieren.

Vergessen Sie nicht, die Sourcen mittels <code>npm run watch</code> zu übersetzen. Und beachten Sie,
dass im Browser nur die Dateien <code>web/index</code>$i$<code>.html</code> funktionieren. Wenn Sie versuchen,
<code>src/index</code>$i$<code>.html</code> erhalten Sie im Browser einen leeren Screen und in der Browser-Konsole drei Fehlermeldungen,
dass gewissen Dateien nicht geladen werden können.

===Aufgabe 2===

Lassen Sie der Ball nicht waagerecht, sondern in der horizontalen Mitte des Browserfensters senkrecht von Fensterrand zu Fensterrand fliegen.

Um die Aufgabe zu lösen, müssen Sie für der Ball zusätzlich eine y-Position und eine y-Geschwindigkeit definieren. Die Berechnung der aktuellen y-Position funktioniert
analog zur Berechnung der aktuellen x-Position.

Vergessen Sie nicht, auch die Kollissionserkennung und -behandlung für die beiden Bildschirmseiten <code>top</code> und <code>botton</code>
zu implementieren.

Und Sie müssen natürlich die Render-Funktion anpassen, sodass die aktuelle y-Position beim Rendern auch berücksichtigt wird.

===Aufgabe 3===

Lassen Sie der Ball von der Browsermitte aus schräg über den Bildschirm fliegen. In x-Richtung soll er doppelt so schnell sein (200 Pixel/s)
wie in y-Richtung (100 Pixel/s).

===Aufgabe 4===

Setzen Sie die x-Start-Position des Balls auf <code>-100</code> und starten Sie die Web-App. Den Effekt, den Sie sehen, nennt
man [[Kollisionserkennung und -behandlung|Penetration]]. Die Eule hängt in der Wand fest, da sie nicht den Kollissionsbereich
(die linke Wand) in einem Schritt verlässt. Daher besteht die Kollission fort und im nächsten Schritt ändert sie wieder ihre Flugrichtung.

Verbessern Sie das, indem Sie die Kollisionserkennung und -behandlung verbessern:

<source lang="javascript">
if (v_ball.x <= v_stage.left)
{ v_ball.vx = Math.abs(v_ball.vx);
}
if (v_ball.x >= v_stage.right - 2*v_ball.r)
{ v_ball.vx = -Math.abs(v_ball.vx);
}
</source>

Passen Sie die Kollisionserkennung und -behandlung in y-Richtung analog an.

Sie können und sollten sogar noch einen Schritt weiter gehen und den Ball
wieder zurück auf die Bühne schieben, wenn er in die Wand eingedrungen ist.
In die Wand einzudringen ist zwar physikalisch nicht möglich, aber leider in
einer Simulation der physikalischen Welt nur schwer zu vermeiden, da die
Position nur alle 16,7 ms berechnet wird. War der Ball zu einem Zeitpunkt
noch vor der Mauer, kann er beim nächsten Schritt schon drinnen stecken.
Insbesondere bei sehr schnellen Objekten kann das dann zu den
beobachteten Penetrationseffekten führen.

Also schieben Sie den Ball besser zurück auf die Bühne.

<source lang="javascript">
if (v_ball.x <= v_stage.left)
{ v_ball.x = v_stage.left;
v_ball.vx = Math.abs(v_ball.vx);
}
if (v_ball.x >= v_stage.right - 2*v_ball.r)
{ v_ball.x = v_stage.right - 2*v_ball.r;
v_ball.vx = -Math.abs(v_ball.vx);
}
</source>

Passen Sie die Kollisionserkennung und -behandlung in y-Richtung wiederum analog an.

===Aufgabe 5===

Ändern Sie die Kollisionserkennung und -behandlung so ab, dass sich der Ball ausgehend von der linken oberen Fensterecke
im Uhrzeigersinn immer entlang des Fensterrandes bewegt.

Beachten Sie bitte: Hier ist es besonders wichtig, dass Sie den Ball wieder auf die Bühne zurückschieben, wenn er mit einer
Wand kollidiert. Ansonsten verschwindet der Ball schnell im Nirgendwo.

(Anmerkung: Dies war einmal eine Aufgabe im Rahmen des Prüfungspraktikums, wobei die Lösung zur 3. Aufgabe vorgegeben war.)

===Aufgabe 6===

Kopieren Sie diesmal nicht die Lösung von Aufgabe 5, sondern die von Aufgabe 4. Im Folgenden arbeiten Sie
wieder mit der normalen Kollissionserkennung und -behandlung. Positionieren Sie den Ball allerdings wieder im linken oberen Eck
(in Aufgabe 4 hatten Sie sie außerhalb der Bühne platziert).

Die neue Position des Balls berechnen Sie mit Hilfe der Geschwindigkeit (velocity, <code>vx</code>, <code>vy</code>). Doch auch die
Geschwindigkeig kann sich im Laufe der Zeit ändern. Dazu benötigt man die Beschleunigung (acceleration, <code>ax</code>, <code>ay</code>).

Fügen Sie zu Ihrem Ball zwei weitere Attribute <code>ax</code> (Beschleunigung in x-Richtung) und
<code>ay</code> (Beschleunigung in y-Richtung) hinzu. Setzen Sie die Initialwerte auf
<code>400</code> (Pixel pro Sekunde) bzw. <code>200</code> (Pixel pro Sekunde). Das heißt, Sie möchten,
dass der Ball in jeder Sekunde um 400 bzw. 200 Pixel pro Sekunde mehr zurücklegt als zuvor.

Wenn Sie jetzt die Web-App starten, beschleunigt der Ball allerdings noch nicht.

In Ihrem Code wird die Position 60 mal pro Sekunde mit Hilfe des folgenden Codes aktualisiert:

<source lang="javascript">
v_ball.x += v_ball.vx * p_delta_s;
v_ball.y += v_ball.vy * p_delta_s;
</source>

Die Geschwindigkeit wird zur Position hinzuaddiert. Allerdings ist die Geschwindigkeit
in Pixeln pro Sekunde angegeben. Die Modellaktualisierung passiert jedoch alle $0,0167$
Sekunden. In dieser Zeit bewegt sich der Ball nur um das $0,0167$-fache (= $1,67$%) der Sekundengeschwindigkeit weiter.
Dieser Faktor ist im Attribut <code>p_delta_s</code> enthalten. Dieser wird mit
$1/60 = 0,0167$ initialisiert, sofern der Update-Methode kein anderer Wert übergeben wird.

Auf genau dieselbe Weise wird die aktuelle Geschwindigkeit mit Hilfe der Beschleunigung
berechnet:

<source lang="javascript">
v_ball.vx += v_ball.ax * p_delta_s;
v_ball.vy += v_ball.ay * p_delta_s;
</source>

Fügen Sie diesen Code in Ihre Model-Update-Funktion ein und starten Sie den Ball erneut.
Wenn Sie jetzt Ihre Web-App laufen lassen, stellen Sie fest, dass der Ball zunächst beschleunigt,
nach eine Kollision aber wieder abbremst. Nach der nächsten Kollision beschleunigt er wieder.

Um diesen Effekt zu vermeiden, müssen Sie jedes mal, wenn Sie bei der Kollissionsbehandlung das Vorzeichen
der Geschwindigkeit ändern, das Vorzeichen der zugehörigen Beschleunigung analog ändern.

Beispielsweise muss der Code

<source lang="javascript">
v_ball.vx = -Math.abs(v_ball.vx);
</source>

um

<source lang="javascript">
v_ball.ax = -Math.abs(v_ball.ax);
</source>

ergänzt werden.

===Aufgabe 7===

Schreiben Sie die Kollissionsbehandlung so um, dass im Falle einer Kollission des Balls
mit dem unteren Fensterrand sowohl die Geschwindigkeit als auch die Beschleunigung
jeweils in x- und in y-Richtung auf Null gesetzt wird. Das heißt, der
Ball bleibt bei einer Kollision mit dem unteren Rand stehen.

===Aufgabe 8===

Positionieren Sie der Ball im linken oberen Eck, geben Sie ihm eine Geschwindigkeit von
300 Pixeln in x-Richtung und von 0 Pixeln in y-Richtung. Die Beschleunigung in x-Richtung beträgt 0,
die Beschleunigung in y-Richtung 800. (Diese Zahlen sind gut für meinen Monitor geeignet,
der eine Auflösung von 1600x900 hat. Wenn Sie einen deutlich kleineren oder größeren
Monitor haben, müssen Sie die Zahlen evtl. anpassen.)

Welche Kurve beschreibt der Ball, wenn Sie die Web-App starten?

===Aufgabe 9===

Positionieren Sie den Ball im linken unteren Eck, geben Sie ihm eine Geschwindigkeit von
300 Pixeln in x-Richtung und von -400 Pixeln in y-Richtung. Die Beschleunigung in x-Richtung beträgt 0,
die Beschleunigung in y-Richtung 200.

Welche Kurve beschreibt der Ball, wenn Sie die Web-App starten?

Allerdings ist es nicht ganz sauber, die Erdanziehung mittels <code>v_ball.ax</code> zu simulieren.
Diese Beschleunigung ist die Beschleunigung, die vom Ball selbst ausgeht (die also von der Eule
per Muskelkraft geleistet wird). Wenn der Ball seine Bewegungsrichtung ändert, ändert sich auch die Richtung der Beschleunigung (eine Eule beschleunigt immer in Flugrichtung, vgl. Aufgabe 6).
Die Richtung der Erbbeschleunigung ändert jedoch bei einer Kollision nicht.

Verbessern Sie daher Ihre Anwendung vorlgendermaßen:

* Fügen Sie eine Variable <code>v_g = 981</code> in die <code>let</code>-Anweisung ein. (981 wurde in Anlehnung an die Gravitationskonstante der Erde gewählt.)
* Reduzieren Sie die Eigenbeschleunigung der Eule in $y$-Richtung auf <code>0</code>. (Jetzt sollte sich die Eule wieder geradlinig bewegen.)
* Ersetzen Sie un der Update-Funktion <source lang="javascript">v_ball.vy += v_ball.ay * p_delta_s;</source> durch <source lang="javascript">v_ball.vy += (v_ball.ay+v_g) * p_delta_s;</source>

Das heißt, berücksichtigen Sie bei der Berechnung der $y$-Geschwindigkeit des Balles zusätzlich die Erdanziehungskraft. Nun sollte die Eule wieder einen sauberen Parabelflug vollführen.

Alles, was jetzt noch fehlt, ist ein Gummiband, mit dem Sie die Eule beschleunigen können. :-)

===Aufgabe 10===

Machen Sie eigene Experimente. Bringen Sie {{zB}} den Ball dazu, wie ein Flummi
zu springen, indem sie seine Geschwindigkeit in x- und y-Richtung bei einem Bodenkontakt
um einen gewissen Prozentsatz reduzieren, aber nicht gleich auf null setzen.
(Die Beschleunigung, die die Erdanziehung simuliert, bleibt die ganze Zeit über gleich).
Achtung: Bei einem Bodenkontakt, dreht sich das Vorzeichen der y-Geschwindigkeit um,
das der x-Geschwindigkeit ändert sich dagegen nicht.

Nervig ist, dass der Ball zum Schluss immer noch ganz leicht hüpft und gar nicht
zur Ruhe kommt. Vielleicht können Sie auch dieses Problem beheben.

Oder probieren Sie etwas ganz anderes aus.

==Quellen==
<references/>
<ol>
<li value="1"> {{Quelle|Kowarschick, W.: Multimedia-Programmierung}}</li>
</ol>

MMProg: Praktikum: WiSe 2018/19: Ball01

2018-11-21T11:25:57Z

Franzih: /* Aufgaben */

{{MMProg:Praktikum:WiSe 2018/19:Menü}}

'''Musterlösung''': [https://glossar.hs-augsburg.de/beispiel/tutorium/2018/ball/WK_Ball01/web/ Web-Auftritt] ([https://gitlab.multimedia.hs-augsburg.de:8888/kowa/WK_Ball01.git Git-Repository])
==Vorbereitung==

Im Git-Repository finden Sie zwei WebStorm-Projekte zum Thema GameLoop:
* [https://gitlab.multimedia.hs-augsburg.de:8888/kowa/WK_GameLoop01.git WK_GameLoop01]
* [https://gitlab.multimedia.hs-augsburg.de:8888/kowa/WK_GameLoop02.git WK_GameLoop02]

Machen Sie sich mit den Projekten vertraut. Die Web-Anwendung <code>src/js/app</code> des zweiten Projektes dient als Ausgangsbasis für diese Praktikumsaufgabe.

Im ersten Beispiel finden Sie diverse Game-Loop-Varianten. Schrittweise werden potentielle
Probleme behoben. Dieses Projekt verfolgt das didaktische Ziel, Ihnen die Probleme und potentielle
Lösungen im Zusammenhang mit JavaScript-Animationen zu verdeutlichen.

Im zweiten Beispiel wurde eine Game-Loop-Klasse realisiert, die sie für dieses Praktikum
nutzen können und sollten. Diese Klasse basiert auf den Ergebnissen des ersten Projektes,
stellt aber – im Gegensatz zu einigen Web-Anwendungen des ersten Projekt – bislang keine Informationen
über die aktuelle Frame-Rate bereit. Dies ist aber für diese Praktikumsaufgabe nicht von Interesse.

Importieren Sie das leere Git-Projekt [https://gitlab.multimedia.hs-augsburg.de:8888/kowa/Ball01.git Ball01] in WebStorm.
Laden Sie annschließend mittels <code>npm i</code> alle benötigten Node.js-Module in das Projekt.

Sie können Ihr Projekt zur Übung auch in Ihrem Git-Repository speichern. Das ist aber nicht so wichtig.
Falls Sie da machen möchten, müssen Sie es zuvor von meinem (schreibgeschützten) Repository lösen:

<source lang="javascript">
git remote remove origin
git remote add origin https://gitlab.multimedia.hs-augsburg.de:8888/BENUTZER/Ball01.git
</source>

==Aufgaben==

In Ihrem Projekt finden Sie 10 Web-Anwendungen vor: <code>index01.html</code> verwendet die JavaScript-Datei <code>app01.js</code>,
die ihrerseits das Spiel <code>ball01.js</code> einbindet. <code>index02.html</code>, <code>index03.html</code> etc. sind analog aufgebaut.
Wenn Sie irgendeine dieser Anwendungen im Browser öffnen, sehen Sie eine Eule in der linken oberen Bildschirmecke. Diese sollen
sie auf unterschiedliche Art und Weise animieren. Beachten Sie, dass im Folgenden der Avatar nicht „Eule“, sondern „Ball“ genannt wird.
Die Eule ist lediglich eine View des ballartigen Objektes.

Lösen Sie jede der folgenden Aufgaben in einer der vorgegebenen Apps.
Scheuen Sie sich nicht davor, eigene Experimente durchzuführen. Wenn die vorgegebenen Apps nicht ausreichen sollten, legen Sie einfach
noch ein paar an.

Schreiben Sie Ihre Lösungen der Aufgabe $i$ in die Datei <code>src/js/ball/ball</code>$i$<code>.js</code>.
Am einfachsten ist es, wenn Sie jeweils die Lösung der vorangegangenen Aufgabe kopieren und diese Kopie dann weiterentwickeln.

===Aufgabe 1===
Passen Sie zur Lösung dieser Aufgabe die Datei <code>src/js/ball/ball01.js</code> an.
Lassen Sie sich durch den Code der Datei <code>ball.js</code> aus dem Beispiel <code>WK_GameLoop02</code> inspirieren.
(Sie könnten auch <code>ball_interpolate.js</code> verwenden, aber das verwirrt Sie vermutlich zurzeit deutlich mehr, als dass es
Ihnen nützt.)

'''Lassen Sie der Ball horizontal vom linken bis zum rechten Fensterrand des Browsers fliegen.'''

Tipp: http://ryanve.com/lab/dimensions/

Berücksichtigen Sie, dass der Ball 150 Pixel breit ist, {{dh}} einen Radius von 75 Pixel hat,
und das der Ankerpunkt im linken oberen Eck des zugehörigen Bildes liegt.
Sie müssen im Ball-Objekt auch die Radius des Balls speichern und diesen Wert bei der Kollissionserkennung
und -behandlung berücksichtigen. Übrigens, wenn Sie <code>v_ball_view</code> wie in <code>ball.js</code>
von <code>WK_GameLoop02</code> definieren, können Sie mittels <code>v_ball_view.offsetWidth/2;</code>
die aktuelle Breite des Ballobjektes aus der View auslesen.

Ein Tipp noch: Wenn Sie das Ball-Objekt zunächst als leeres Objekt definieren und danach in der
Reset-Funktion initialisieren, funktionieren Ihre Anwendungen auch noch, wenn Sie später einen
Start/Stopp- und einen Pause-Button einfügen (vgl. {{zB}} <code>index_start_stop_toggling.html</code> in <code>WK_GameLoop02</code>).
Sollten Sie keine Buttons zur Steuerung einfügen wollen, können Sie die Objekte auch direkt bei
der Definition initialisieren.

Vergessen Sie nicht, die Sourcen mittels <code>npm run watch</code> zu übersetzen. Und beachten Sie,
dass im Browser nur die Dateien <code>web/index</code>$i$<code>.html</code> funktionieren. Wenn Sie versuchen,
<code>src/index</code>$i$<code>.html</code> erhalten Sie im Browser einen leeren Screen und in der Browser-Konsole drei Fehlermeldungen,
dass gewissen Dateien nicht geladen werden können.

===Aufgabe 2===

Lassen Sie der Ball nicht waagerecht, sondern in der horizontalen Mitte des Browserfensters senkrecht von Fensterrand zu Fensterrand fliegen.

Um die Aufgabe zu lösen, müssen Sie für der Ball zusätzlich eine y-Position und eine y-Geschwindigkeit definieren. Die Berechnung der aktuellen y-Position funktioniert
analog zur Berechnung der aktuellen x-Position.

Vergessen Sie nicht, auch die Kollissionserkennung und -behandlung für die beiden Bildschirmseiten <code>top</code> und <code>botton</code>
zu implementieren.

Und Sie müssen natürlich die Render-Funktion anpassen, sodass die aktuelle y-Position beim Rendern auch berücksichtigt wird.

===Aufgabe 3===

Lassen Sie der Ball von der Browsermitte aus schräg über den Bildschirm fliegen. In x-Richtung soll er doppelt so schnell sein (200 Pixel/s)
wie in y-Richtung (100 Pixel/s).

===Aufgabe 4===

Setzen Sie die x-Start-Position des Balls auf <code>-100</code> und starten Sie die Web-App. Den Effekt, den Sie sehen, nennt
man [[Kollisionserkennung und -behandlung|Penetration]]. Die Eule hängt in der Wand fest, da sie nicht den Kollissionsbereich
(die linke Wand) in einem Schritt verlässt. Daher besteht die Kollission fort und im nächsten Schritt ändert sie wieder ihre Flugrichtung.

Verbessern Sie das, indem Sie die Kollisionserkennung und -behandlung verbessern:

<source lang="javascript">
if (v_ball.x <= v_stage.left)
{ v_ball.vx = Math.abs(v_ball.vx);
}
if (v_ball.x >= v_stage.right - 2*v_ball.r)
{ v_ball.vx = -Math.abs(v_ball.vx);
}
</source>

Passen Sie die Kollisionserkennung und -behandlung in y-Richtung analog an.

Sie können und sollten sogar noch einen Schritt weiter gehen und den Ball
wieder zurück auf die Bühne schieben, wenn er in die Wand eingedrungen ist.
In die Wand einzudringen ist zwar physikalisch nicht möglich, aber leider in
einer Simulation der physikalischen Welt nur schwer zu vermeiden, da die
Position nur alle 16,7 ms berechnet wird. War der Ball zu einem Zeitpunkt
noch vor der Mauer, kann er beim nächsten Schritt schon drinnen stecken.
Insbesondere bei sehr schnellen Objekten kann das dann zu den
beobachteten Penetrationseffekten führen.

Also schieben Sie den Ball besser zurück auf die Bühne.

<source lang="javascript">
if (v_ball.x <= v_stage.left)
{ v_ball.x = v_stage.left;
v_ball.vx = Math.abs(v_ball.vx);
}
if (v_ball.x >= v_stage.right - 2*v_ball.r)
{ v_ball.x = v_stage.right - 2*v_ball.r;
v_ball.vx = -Math.abs(v_ball.vx);
}
</source>

Passen Sie die Kollisionserkennung und -behandlung in y-Richtung wiederum analog an.

===Aufgabe 5===

Ändern Sie die Kollisionserkennung und -behandlung so ab, dass sich der Ball ausgehend von der linken oberen Fensterecke
im Uhrzeigersinn immer entlang des Fensterrandes bewegt.

Beachten Sie bitte: Hier ist es besonders wichtig, dass Sie den Ball wieder auf die Bühne zurückschieben, wenn er mit einer
Wand kollidiert. Ansonsten verschwindet der Ball schnell im Nirgendwo.

(Anmerkung: Dies war einmal eine Aufgabe im Rahmen des Prüfungspraktikums, wobei die Lösung zur 3. Aufgabe vorgegeben war.)

===Aufgabe 6===

Kopieren Sie diesmal nicht die Lösung von Aufgabe 5, sondern die von Aufgabe 4. Im Folgenden arbeiten Sie
wieder mit der normalen Kollissionserkennung und -behandlung. Positionieren Sie den Ball allerdings wieder im linken oberen Eck
(in Aufgabe 4 hatten Sie sie außerhalb der Bühne platziert).

Die neue Position des Balls berechnen Sie mit Hilfe der Geschwindigkeit (velocity, <code>vx</code>, <code>vy</code>). Doch auch die
Geschwindigkeig kann sich im Laufe der Zeit ändern. Dazu benötigt man die Beschleunigung (acceleration, <code>ax</code>, <code>ay</code>).

Fügen Sie zu Ihrem Ball zwei weitere Attribute <code>ax</code> (Beschleunigung in x-Richtung) und
<code>ay</code> (Beschleunigung in y-Richtung) hinzu. Setzen Sie die Initialwerte auf
<code>400</code> (Pixel pro Sekunde) bzw. <code>200</code> (Pixel pro Sekunde). Das heißt, Sie möchten,
dass der Ball in jeder Sekunde um 400 bzw. 200 Pixel pro Sekunde mehr zurücklegt als zuvor.

Wenn Sie jetzt die Web-App starten, beschleunigt der Ball allerdings noch nicht.

In Ihrem Code wird die Position 60 mal pro Sekunde mit Hilfe des folgenden Codes aktualisiert:

<source lang="javascript">
v_ball.x += v_ball.vx * p_delta_s;
v_ball.y += v_ball.vy * p_delta_s;
</source>

Die Geschwindigkeit wird zur Position hinzuaddiert. Allerdings ist die Geschwindigkeit
in Pixeln pro Sekunde angegeben. Die Modellaktualisierung passiert jedoch alle $0,0167$
Sekunden. In dieser Zeit bewegt sich der Ball nur um das $0,0167$-fache (= $1,67$%) der Sekundengeschwindigkeit weiter.
Dieser Faktor ist im Attribut <code>p_delta_s</code> enthalten. Dieser wird mit
$1/60 = 0,0167$ initialisiert, sofern der Update-Methode kein anderer Wert übergeben wird.

Auf genau dieselbe Weise wird die aktuelle Geschwindigkeit mit Hilfe der Beschleunigung
berechnet:

<source lang="javascript">
v_ball.vx += v_ball.ax * p_delta_s;
v_ball.vy += v_ball.ay * p_delta_s;
</source>

Fügen Sie diesen Code in Ihre Model-Update-Funktion ein und starten Sie den Ball erneut.
Wenn Sie jetzt Ihre Web-App laufen lassen, stellen Sie fest, dass der Ball zunächst beschleunigt,
nach eine Kollision aber wieder abbremst. Nach der nächsten Kollision beschleunigt er wieder.

Um diesen Effekt zu vermeiden, müssen Sie jedes mal, wenn Sie bei der Kollissionsbehandlung das Vorzeichen
der Geschwindigkeit ändern, das Vorzeichen der zugehörigen Beschleunigung analog ändern.

Beispielsweise muss der Code

<source lang="javascript">
v_ball.vx = -Math.abs(v_ball.vx);
</source>

um

<source lang="javascript">
v_ball.ax = -Math.abs(v_ball.ax);
</source>

ergänzt werden.

===Aufgabe 7===

Schreiben Sie die Kollissionsbehandlung so um, dass im Falle einer Kollission des Balls
mit dem unteren Fensterrand sowohl die Geschwindigkeit als auch die Beschleunigung
jeweils in x- und in y-Richtung auf Null gesetzt wird. Das heißt, der
Ball bleibt bei einer Kollision mit dem unteren Rand stehen.

===Aufgabe 8===

Positionieren Sie der Ball im linken oberen Eck, geben Sie ihm eine Geschwindigkeit von
300 Pixeln in x-Richtung und von 0 Pixeln in y-Richtung. Die Beschleunigung in x-Richtung beträgt 0,
die Beschleunigung in y-Richtung 800. (Diese Zahlen sind gut für meinen Monitor geeignet,
der eine Auflösung von 1600x900 hat. Wenn Sie einen deutlich kleineren oder größeren
Monitor haben, müssen Sie die Zahlen evtl. anpassen.)

Welche Kurve beschreibt der Ball, wenn Sie die Web-App starten?

===Aufgabe 9===

Positionieren Sie den Ball im linken unteren Eck, geben Sie ihm eine Geschwindigkeit von
300 Pixeln in x-Richtung und von -400 Pixeln in y-Richtung. Die Beschleunigung in x-Richtung beträgt 0,
die Beschleunigung in y-Richtung 200.

Welche Kurve beschreibt der Ball, wenn Sie die Web-App starten?

Allerdings ist es nicht ganz sauber, die Erdanziehung mittels <code>v_ball.ax</code> zu simulieren.
Diese Beschleunigung ist die Beschleunigung, die vom Ball selbst ausgeht (die also von der Eule
per Muskelkraft geleistet wird). Wenn der Ball seine Bewegungsrichtung ändert, ändert sich auch die Richtung der Beschleunigung (eine Eule beschleunigt immer in Flugrichtung, vgl. Aufgabe 6).
Die Richtung der Erbbeschleunigung ändert jedoch bei einer Kollision nicht.

Verbessern Sie daher Ihre Anwendung vorlgendermaßen:

* Fügen Sie eine Variable <code>v_g = 981</code> in die <code>let</code>-Anweisung ein. (981 wurde in Anlehnung an die Gravitationskonstante der Erde gewählt.)
* Reduzieren Sie die Eigenbeschleunigung der Eule in $y$-Richtung auf <code>0</code>. (Jetzt sollte sich die Eule wieder geradlinig bewegen.)
* Ersetzen Sie un der Update-Funktion <source lang="javascript">v_ball.vy += v_ball.ay * p_delta_s;</source> durch <source lang="javascript">v_ball.vy += (v_ball.ay+v_g) * p_delta_s;</source>

Das heißt, berücksichtigen Sie bei der Berechnung der $y$-Geschwindigkeit des Balles zusätzlich die Erdanziehungskraft. Nun sollte die Eule wieder einen sauberen Parabelflug vollführen.

Alles, was jetzt noch fehlt, ist ein Gummiband, mit dem Sie die Eule beschleunigen können. :-)

===Aufgabe 10===

Machen Sie eigene Experimente. Bringen Sie {{zB}} den Ball dazu, wie ein Flummi
zu springen, indem sie seine Geschwindigkeit in x- und y-Richtung bei einem Bodenkontakt
um einen gewissen Prozentsatz reduzieren, aber nicht gleich auf null setzen.
(Die Beschleunigung, die die Erdanziehung simuliert, bleibt die ganze Zeit über gleich).
Achtung: Bei einem Bodenkontakt, dreht sich das Vorzeichen der y-Geschwindigkeit um,
das der x-Geschwindigkeit ändert sich dagegen nicht.

Nervig ist, dass der Ball zum Schluss immer noch ganz leicht hüpft und gar nicht
zur Ruhe kommt. Vielleicht können Sie auch dieses Problem beheben.

Oder probieren Sie etwas ganz anderes aus.

==Quellen==
<references/>
<ol>
<li value="1"> {{Quelle|Kowarschick, W.: Multimedia-Programmierung}}</li>
</ol>