Übergabeparameter und Rückgabewerte


Hilfsbibliotheken verwenden

Oft möchte man bei einem Programm eine Funktionalität programmieren, hat aber keine Ahnung, wie man so etwas schaffen soll. Ein kleines Beispiel:

Ich möchte eine Hügellandschaft gestalten. Die folgenden Punkte sollen die Kuppen der Hügel darstellen.

Kein Problem, programmiere ich mal kurz. Die Kuppen werden mit Linien verbunden und eine Sonne gibt es auch schon:

Hmm, sieht schon nicht schlecht aus, aber viel schöner wäre es, wenn die Linien gekrümmt wären. Nur wie soll ich das machen. Im Mathematik-Unterricht habe ich Regressionen kennengelernt und Splines und,... ein leichtes Gefühl von Überforderung!

Also öffne ich einen Browser und suche nach einer Bibliothek von einem netten Profi, der das alles schon einmal durchdacht hat:

Suchbegriffe: "Kurve durch Punkte".

Die Suchergebnisse sind recht trostlos. Da ich weiß, dass die Sprache der Programmierer Englisch ist und ich eine Bibliothek für JavaScript suche, versuche ich es diesmal auf Englisch:

Suchbegriffe: "javascript curve through points"

Eines der Suchergebnisse liefert folgenden Internet-Link: Smooth.js. Der erste Link führt zu einer GitHub-Seite: Github: Smooth.js mit einer Aussage die vielversprechend klingt:

What is this for? Smooth.js takes an array of numbers or vectors and returns a parametric function that continuously interpolates that array. Smooth.js supports several interpolation methods, and flexible options for boundary behavior. Smooth.js is written in clean, easy-to-read CoffeeScript, and has no external dependencies. It is licensed under the permissive MIT license, so you can use it in just about any project.

Genau das was ich suche! Ich übergebe ein Array von Punkten und Smooth.js liefert mir eine Funktion, die mir passend zu meinen Punkten die Punkte einer schönen Kurve berechnet. Die Lizenz ist die MIT-Lizenz, so dass ich die Bibliothek verwenden kann, solange ich den Namen am Anfang der Bibliothek nicht entferne.

Dann will ich mal die Smooth.js-Funktion in mein Programm einbauen. Da ich jetzt eine externe Bibliothek verwende, kann ich nicht mehr den p5-Web-Editor verwenden. Die Webseite Plunker bietet eine freiere Entwicklungsumgebung, bei der ich leicht externe Bibliotheken einbetten kann.

Nach einigem Experimentieren habe ich das Programm mit der Smooth.js-Funktion zum Laufen gebracht. Zusätzlich habe ich noch die Bibliothek quicksettings.js eingebunden, damit ich mit einer hübschen Oberfläche die Punkte, Linien und Kurve einblenden und ausblenden kann. Jetzt sind Sie dran:

Aufgabe 01:

Starten Sie die Plunker-Umgebung in einem eigenen Fenster und diskutieren Sie mit den anderen Kursteilnehmer*innen den Quellcode der Dateien index.html und script.js, bis Sie jede Zeile verstanden haben. Die anderen Dateien sind die importierten Bibliotheken, deren Inhalt Sie nicht zu verstehen brauchen.

Eine kurze Erklärung zu den wichtigen Zeilen:

kurvenFunktion = Smooth(yPunkteArray);

Das Array yPunkteArray mit den y-Werten wird an die Funktion Smooth übergeben. Die Funktion Smooth ermittelt auf der Basis der übergebenen Werte eine Funktion, mit deren Hilfe die Kurvenpunkte berechnet werden können. Diese Funktion wird in der Variablen kurvenFunktion gespeichert.

if (smoothieAn) {
  for (let i=0; i<=500; i++) {
    strokeWeight(0);
    fill('STEELBLUE');
    ellipse(i, height-kurvenFunktion(i/50), 3, 3);
  } 
}

Ich will jetzt die Kurve zeichnen. Wenn die Boolsche Variable smoothieAn den Wert wahr hat, dann zeichne 501 Ellipsen. Der x-Wert ist i, der y-Wert wird mit Hilfe der kurvenFunktion berechnet. Am Anfang der draw-Funktion habe ich die Koordinaten mit translate(50, 0); um 50 nach rechts verschoben. Die y-Werte ziehe ich von height ab, da der Koordinatenursprung ja oben links liegt.

Als Übergabeparameter an die kurvenFunktion wähle ich i/50, da ich ja 10 Bezugspunkte habe, aber 501 y-Werte benötige. Der Rückgabewert der kurvenFunktion ist der interpolierte y-Wert, den die Funktion ellipse verwendet, so dass eine hübsche Kurve entsteht.


Aufgabe 02:

Denken Sie sich ein Programm aus, bei dem eine gegebene Punktmenge durch eine Kurve verbunden wird. Und noch eine Info für M. und N.: bitte nicht nur die Farbe der Sonne ändern ;-).


Lösungsvorschlag von Nico und Moritz:


Lösungsvorschlag von Gerke und Celina: