Recursion, we must go deeper!

Bäume und Schneeflocken

Diese Woche haben wir uns mit Rekursion befasst und die folgenden Übungen aufbekommen. Hier musste man versuchen durch Rekursion Baum- und Schneeflockenartige Formen zu realisieren, was nicht einfach war.

Zusätzlich sollte die mathematische Funktion Fakultät iterativ und rekursiv programmiert werden.

Es gilt also:
n!=1·2·3··n=k=1nk

Das selbe gilt auch rekursiv:
n!=1,n=0n·(n-1)!,n>0

Hilfreich war dieses Tool (Recursive Drawing) um das Konzept der Rekusion visuell darzustellen.

Rekursion in Snap

recursion

Tags & Transitions

Wir sollten auch zusätzlich CSS Transitions und HTML5 Tags ausprobieren und in die Website einbinden.

Eine transition sieht man schon oben links am Hamburger-Menü: Wenn man darauf klicked verändert sich die Form. Ich habe den meinen Code (HTML, SCSS, jQuery) in CodePen hochgeladen, falls jemand sich das anschauen möchte.

See the Pen hamburger-pirate by Dustin K (@miduku) on CodePen.

Den <math> tag habe ich oben für die mathematischen Funktionen verwendet. Mit Hilfe Dieser Website http://www.wiris.com/editor/demo/en/mathml-latex waren sie Gott sei Dank relativ einfach zu erstellen.

So Abstract

Abstraction, Testing and Tic-Tac-Toe

Die nächsten Übungen zu Abstraktion und Testen wurden bewältigt und eine Tic-Tac-Toe Spielfläche wurde mit mehreren Blöcken programmiert.

abstraction-and-testing

"All in all it's just another brick in the wall"

Die schwierigste Aufgabe war eine Mauer auf dem Canvas zu zeichnen. Hierfür sollte man auch die Möglichkeit haben Parameter für die Anzahl von Reihen oder die Dicke des Mörtels einzugeben.

Ziegelsteinmauer Zeichnen

Cars and Conditionals

Conditionals

Nach einigen Übungen aus diesem Kurs und einem jetzt etwas besseren Verständniss von Snap! habe ich mich an die Aufgabe gewagt einen bestehenden Algorithmus, welcher ein Auto eine Strecke zurücklegen muss, zu verbessern.

conditionals

Auto fahren

Ich habe den Algorithmus in diesem Projekt implementiert. Verbessert das Programm so, dass die zurückgelegte Strecke minimal wird. Die beste Lösung küren wir nächste Woche. ;) Hier findet ihr die Strecke als png, als svg und das Auto.

- Käpt’n Matthias Graf

Hierfür habe ich mich von selbstfahrenden Autos inspirieren lassen die mit Sensoren wie LiDAR und einem Reglersystem autonom fahren können.

Ich habe dementsprechend für jeweils die rechte und linke Seite des Autos einen Sensor hinzugefügt die die Distanz zum Straßenrand messen. Anhand dieser Messungen regelt der PID-Regler wie das Auto lenken soll. Hier wird 'I' nicht verwendet, da ein PD-Regler ausreichend ist.

Selbstfahrendes Auto mit Sensoren

Es war überhaupt nicht einfach den Regler zu programmieren und musste mir einige Beispiele die in JavaScript geschrieben wurden anschauen um es in Snap! umzusetzen.

Der fertige und relativ rechenintensive Algorithmus findet ihr hier. Wundert euch nicht warum es langsam läuft oder aufeinmal der Browser abstürzt :P :

car

Das erste mal mit Snap!

Introduction to Snap! and a Kaleidoskop!

Die erste Übung mit Snap! war anhand dieser Aufgabe eine Kaleidoskop-Funktion zu programmieren.

Kaleidoskop-Funktion in Snap!

Hierfür habe ich versucht so wenig wie möglich vom Code auf die anderen drei Sprites zu duplizieren und die Position dieser eher vom ersten Sprite abhängig zu machen.

Mit der Leertaste fängt man alles an und man kann mit der Maus auf dem Canvas Zeichnen.

Mit y pausiert man alles, mit x wird alles zurückgesetzt.

kaleidoskop

Scary Loops And Nice Sprites

Die zweite Übung bestand darin loops zu verstehen. Hierfür musste ich mehrere Funktionen programmieren, welche hauptsächlich diverse Arten von Polygone auf dem Canvas zeichnen.

Polygon-Funktion und Block Editor in Snap!
Funktion um mit Quadraten eine Blume zu machen in Snap!
Eine Blume mit Stamm in Snap!
Zufallsbedingte Bewegungen in Snap!

Die fertigen Funktion findet man hier:

polygon square-flower full-flower random-movement