Siemens-Stern

Siemens-Stern

Zielgruppe sind StudentInnen und ambitionierte Informatik-Amateure
Das Beispiel setzt keine Kenntnisse voraus. Zum Verständnis der Programmierung werden Kenntnisse von SVG und Javascript vorausgesetzt.


Steuerung

Größe
Sektoren
Hintergrund    
Animation  

Siemens-Stern


Die Kreis-Sektoren laufen in der Mitte des Sterns theoretisch unendlich eng zusammen. Es gibt kein optisches Gerät, welches die Figur komplett scharf darstellen kann. In der Mitte ergibt sich ein 'Grauer Fleck'. Durch Messung seiner Größe kann man die Auflösung des optischen Geräts berechnen.


Beispiel:
Anzahl der Sektoren n=300
Fleck-Durchmesser d=25mm
Ergebnis:
l[mm] = 3.1416 * 25 / 300 = 0.26
l[dpi] = (300 * 25.4) / (3.1416 * 25) = 96

Die Methode bietet bei digitalen Medien wie z.B. bei einem PC-Bildschirm nur geringe Genauigkeit. Andere Methoden ( Details) sind wesentlich genauer. Der Siemens-Stern ist allerdings unabhängig von irgend welchen mit einem Programm gemessenen Werten und eignet sich u.a. gut zur Kontrolle anderer Methoden.

Experimente mit dem HTTP-QueryString


Dieser ↗ Link fordert die Objekt-Grafik mit einem umfangreichen QueryString an:
siemens_star.html?d=500&s=100&a=1&t=50
Die Trennzeichen werden rot dargestellt, damit man die einzelnen 'GET'-Argumente besser erkennen kann:
Das ? Zeichen trennt den Datei-Namen vom QueryString. Die einzelnen GET-Argumente werden durch & Zeichen voneinander getrennt. Jedes Argument ist in der Form name=wert angegeben.

Experimentieren sie mit dem QueryString:
Die QueryString-Variablen bedeuten:
d...Durchmesser in Pixeln
s...Anzahl der Sektoren
a...Animation (1⇨Ein, 0⇨Aus)
t...Animations-Periode in ms



Wenn die Web-App in einem eigenen Fenster geöffnet wird, und wenn kein QueryString angegeben ist, dann wird die Grafik in maximaler Größe gezeichnet.
Test: Öffnen sie die Web-App mit RechtsKlick auf diesen → Link in einem eigenen Fenster (nicht in einem Tab) und ändern sie Breite oder Höhe des Fensters.



Im Zentrum bilden sich Interferenzen durch Überlagerung des Siemens-Sterns mit den Pixeln des Bildschirms.
Weitere Moiré-Beispiele


Verwandte Themen auf anderen Seiten dieses Webs:
→ HTTP-GET-Methode mit PHP
→ Live HTTP Experimente
→ HTTP-Diagramm

HTML-Progammierung


Das HTML-Dokument dient hier nur als Behälter für andere Technologien:
  • Ein <style>-Element enthält die → CSS-Regeln zur Formatierung.
  • Ein umfangreiches <script>-Element enthält → Javascript Funktionen. Damit wird die Grafik gezeichnet und die Animation ausgeführt.
  • Ein <svg>-Element dient zur → Einbettung der Grafik in die Web-App.
HTML ist ideal geeignet, um diese Technologien zusammenzufassen. Die Lösung einer Aufgabe (z.B. 'Siemens-Stern') ist damit besonders rasch und einfach zu programmieren.

CSS-Programmierung


CSS ist auch auf alle anderen Mitglieder der → XML-Familie anwendbar. In der Web-App 'Siemens-Stern' werden CSS-Regeln sowohl auf HTML-Elemente als auch auf SVG-Elemente (z.B. <path> ) angewendet.

Javascript-Programmierung


Auch javascript ist auf alle Mitglieder der → XML-Familie anwendbar.
Die Details der Javascript-Funktionen sind (nur) für fortgeschrittene EntwicklerInnen interessant. Hier werden daher die wesentlichen Aufgaben der Funktionen allgemein beschrieben.



Aufgaben des onload-Event-Handlers:
  • Analyse und Verarbeitung allfälliger HTTP-Querystring-Argumente.
  • Zeichnen der Grafik.


  • Nach dem erstmaligen Laden kann man alle Vorgaben durch die übergeordnete parent-Seite (=diese Webseite) ändern. Nach jeder Änderung der Vorgaben wird die aktuelle Grafik gelöscht und eine neue gezeichnet.
  • Wenn die App in einem eigenen Fenster oder in einem Smartphone geöffnet wird, dann wird die Grafik in maximaler Größe des jeweiligen Fensters gezeichnet.
  • Wenn in der HTTP-Anforderung ein QueryString enthalten ist, dann werden dessen Angaben decodiert, geprüft und zum Zeichnen verwendet.



Danach wird das vorbereitete Element in einer Schleife wiederholt erzeugt, gedreht und in die Grafik eingesetzt.

Die gesamte Zeichnung wird mit Javascript sehr rasch erzeugt. Das kann man beobachten, wenn man die Vorgaben im ↑ Live-Beispiel mit den Schiebereglern ändert:  Bereits während der Bewegung der Regler wird die Grafik einige 10- bis 100-mal neu gezeichnet.

SVG-Programmierung


Alle Grafik-Objekte werden Live von ↑ Javascript-Funktionen erzeugt, daher findet man kein Element des Siemens-Sterns im Quelltext. Hier wird daher nur 'virtuell' gezeigt, wie die Grafik-Objekte des Sterns aussehen.



<g id="star" transform="translate(50,50)">
<!-- Alle Stern-Elemente
werden hier eingesetzt -->
</g>
Das transform-Attribut wird mit einer Javascript-Funktion Live an die jeweilis gewünschte Größe der Grafik angepasst.



Mit den Vorgaben
r = 100
sectors = 10
ergibt sich dieses gleichschenkelige Dreieck:
A(-31,-95), B(31,95), C(0,0)

Mit diesen Angaben kann man ein SVG <path>-Element als Muster eines Kreis-Sektors zeichnen:
<path d="M0,0 L-31,-95 L31,-95 Z" />
Kurzfassung des d-Attributs:
Moveto(0,0), Lineto(-31,-95), Lineto(31,95) ClosePath = Return to (0,0)



in diesem Fall ist es einfach hübscher, Kreis-Sektoren an Stelle von Dreiecken zu zeichnen. Sie finden beide Elemente (Dreieck und Kreis-Sektor) im Original-Quelltext.



Mit den Vorgaben
sectors = 10
werden diese 5 <path>-Elemente erzeugt:
<path d="..." transform="rotate(0)"/>
<path d="..." transform="rotate(72)"/>
<path d="..." transform="rotate(144)"/>
<path d="..." transform="rotate(216)"/>
<path d="..." transform="rotate(288)"/>



Diese Aufgabe erfordert lediglich Grundkenntnisse von SVG, man kommt jedoch ohne Javascript aus.