Archimedische Spirale mit Canvas

Archimedische Spirale mit Canvas-Grafik


Archimedische Spirale mit Canvas

Spirale bis zu den Seiten Ecken
Die Spirale wird Live nach dieser Formel berechnet und gemalt:
r = 4.48 * φ
Dazu wurden 0 einzelne Punkte für 0 Umdrehungen berechnet.

◀  Diese Grafik wird von einem Programm in der Programmiersprache → Javascript berechnet und in ein Canvas-Element gemalt. Sie wird bei jeder Änderung der Eingabe (des SchiebeReglers) neu berechnet.

Das Javascript-Programm wird Live an ihrem Arbeits-PC ausgeführt. Nur so ist die für eine rasche Reaktion notwendige (Rechen)-Geschwindigkeit auch unter schwierigen Bedingungen zuverlässig erreichbar.


Für diese Demonstration wurde das Beispiel in eine Mini-Webseite eingebettet: Die Grafik lässt sich dann mehrfach verwenden, außerdem kann man den Quelltext ohne den störenden Overhead dieser Webseite anzeigen:

Mit diesem Link wird die Mini-Webseite mit Canvas-Grafik in einem eigenen Browser-Tab geladen.

Mit diesem Link wird der Quelltext der Mini-Webseite angezeigt: Aus diesem Text hat ihr Browser die Grafik hergestellt.

Es gibt mehrere Arten von Spiralen.
Die Archimedische Spirale ist besonders einfach zu berechnen.
Die hier verwendete Formel wird im Beispiel angezeigt.

Die 'Steigung' der Windungen ist konstant, d.h. die Linien haben einen konstanten Abstand voneinander.

In der Natur kommt fast ausschließlich die Logarithmische Spirale (SchneckenLinie) vor.

Eine 'Entfernte Verwandte' ist die weit komplizierter zu berechnende → Klothoide.

HTML



Das <canvas>-Element sollte alle 3 hier angegebenen Attribute enthalten:

Das id-Attribut muss eindeutig sein und dient zur Identifikation des Elerments mit Javascript.

Die Größe in Bildpunkten (Pixeln) sollte mit den Attributen width und height programmiert werden.


Formatierung mit CSS

Man kann Canvas-Elemente mit → CSS formatieren, z.B. mit den Eigenschaften border, float, margin, etc.

Die Angabe des Hintergrunds ist möglich, aber nicht sinnvoll: Er wird besser mit Javascript Canvas-Anweisungen programmiert.

Die Angabe von Breite und Höhe (width, heright) ist möglich, derzeit jedoch nicht zuverlüssig: Verwenden sie dazu die gleichnamigen Attribute, so wie im Beispiel gezeigt.


Javascript

Die Funktion do_f1() dient zur 'Fernsteuerung' der Canvas-Grafik:
function do_f1() {
var c = document.f1.rng1.value;
c = Math.exp(c/100);
spir.paint(c);
}

Der aktuelle Wert (value) des SchiebeReglers wird gelesen und an die Variable c zugewiesen. Das Eingabe-Element wird mit seinem hierarchisch aufgebauten Objekt-Namen adressiert (document.f1.rng1)
Details zur → Programmierung eines SchiebeReglers

Eine Besonderheit dieses SchiebeReglers ist seine 'Logarithmische Kennlinie': Mit der Formel wird bewirkt, dass man kleinere Werte genauer einstellen kann.

Die letzte Zeile startet die Funktion paint() des eingebetteten Dokuments, welches mit seinem name-Attribut (spir) adressiert wird.

Die hier angeführten Quelltext-Beispiele sind gekürzt. Die Originale sind im Quelltext dieser Webseite enthalten.

Javascript


Canvas-Grafik wird Live gemalt. Die Methode eignet sich daher gut für Animationen (so wie das Beispiel dieser Seite) oder für interaktiv erstellte Grafik.

Es ist nicht sinnvoll, damit eine statische (gleichbleibende) Grafik herzustellen: Sie wird besser in einer 'statischen' → Grafik-Datei verwaltet und nicht bei jeder einzelnen Anforderung neu hergestellt.


HTML + Javascript-Quelltext

 Aus diesem Quelltext hat ihr Browser die Canvas-Grafik hergestellt.
Das Canvas-Element ist in einer eigenen Mini-Webseite enthalten: So lässt sich der Text ohne störenden Overhead analysieren.

Mit diesem Link wird die ↗ Mini-Webseite mit Canvas-Grafik in einem eigenen Browser-Tab geladen.

Mit diesem Link wird der ↗ Quelltext der Mini-Webseite angezeigt: Aus diesem Text hat ihr Browser die Grafik + Animation hergestellt.

Der winzige HTML <body>-Teil (am Ende des Quelltextes) enthält nur das <canvas>-Element.

Das Javascript-Programm paint() nimmt fast den gesamten Quelltext ein: Damit wird die Grafik gemalt.

Man kann den Quelltext in einer Datei *.html am eigenen PC speichern (Zeilen-Nummern vorher mit Klick abschalten): Die Datei lässt sich mit jedem Browser öffnen und zeigt die Grafik an.
Zur Steuerung muss man entweder in die Mini-Webseite oder in die übergeordnete (parent)-Seite entsprechende ↑ Bedienungs-Elemente und / oder Programme einfügen.



Mit der Methode clearRect() wird ein Rechteck der angegebenen Größe gelöscht - In diesem Fall wird die gesamte im Canvas-Element vorhandene Grafik gelöscht.

Mit der Methode translate() wird der Ursprung des Koordinaten-Systems in den Mittelpunkt der Grafik verschoben. Das erleichtert die Berechnung: Man sollte in jeder Grafik-Aufgabe den Ursprung so wählen, dass alle Rechnungen möglichst einfach und übersichtlich werden.

Der Hintergrund wird mit einem radialen Farb-Gradienten angelegt. Das hat keinen Bezug zur Spirale und dient nur zur Demonstration der Möglichkeiten von Canvas-Grafik. Bei Ansicht als Kreis wird ein Gradient von 2 Farben verwendet, bei Ansicht der Ecken eine dritte Farbe.

Die Spirale wird als Pfad-Element programmiert. Nach Festlegung der Anfangs-Werte beginnt der Pfad im Zentrum mit Methode moveTo(0,0)
Danach werden in einer while-Schleife mit Methode lineTo(x,y) so viele Segmente angefügt, bis der Rand des Canvas-Elements erreicht ist.
Zuletzt wird der Pfad mit Methode stroke() gemalt.

PHP

Das Beispiel lässt sich problemlos als 'statische' Datei verwenden, d.h. genauso wie im ↑ Quelltext des vorigen Kapitels angegeben.
In diesem Fall ist allerdings keine interaktive Steuerung möglich.

In diesem Web werden die meisten Beispiele mehrfach verwendet. Sie sind daher in eigenen unabhängigen Dokumenten organisiert.
PHP wird hier lediglich dazu verwendet, um das Beispiel an den jeweiligen Zweck anzupassen.

Die Größe der erzeugten Grafik ist im Quelltext fixiert (Hardcoded). Das lässt sich zwar auch mit Javascript variabel gestalten, der Aufwand ist jedoch relativ hoch. MIT → PHP ist es wesentlich einfacher, schon am Server die passende Größe der Grafik festzulegen.
Beispiel: Mit diesen Links werden die Spirale in Größen von 100px, 200px, 500px geladen.

Das Beispiel ist besonders gut für ↓ einfache eigene Experimente geeignet. In diesem Fall können sie auf Server und PHP verzichten und mit eigenen Mitteln am eigenen PC arbeiten.

Standalone-Experimente


Anregungen

Ändern sie die Farbe der Funktions-Linie.
Ändern sie die Farben des Hintergrund-Gradienten.

Ersetzen sie den radialen Gradienten durch einen linearen Gradienten (z.B. unten dunkel, oben hell).
Vergrößern sie die Schrittweite (Änderung des Winkels pro Berechnungs-Schritt) radikal. Experimentieren sie mit dieser Version und erklären sie die entstehenden Muster.

Programmieren sie eine Version mit interaktiver Auswahl einer Farbe durch einen → FarbSelektor <input type="color">
Programmieren sie alternative Versionen zum Malen einer logarithmischen, hyperbolischen oder Fermat'schen Spirale.
Programmieren sie eine Version, die wahlweise verschiedene Arten von Spiralen malt.