Programmierung der Samen einer Sonnenblume

In diesem Tutorial werden Sie einige grundlegende Anwendungen von CindyScript, der internen Programmiersprache von Cinderella, kennenlernen. Sie sollten sich bewusst sein, dass dieses Tutorial nur einen sehr kleinen Teil der CindyScript-Funktionalität behandelt. Nichtsdestotrotz werden Sie einen Eindruck davon erhalten, wie CindyScript verwendet werden kann.

Das folgende Beispiel wird Schritt für Schritt entwickelt. In jedem Schritt werden wir ein konzeptionell neues Element hinzufügen. Am Ende werden wir zu einer interaktiven Visualisierung des Packungsmusters der Samen in einem Sonnenblumenkopf gelangen.

Eine erste Zeile CindyScript¶

Wir beginnen mit einer äußerst einfachen Aufgabe. Wir möchten einen Punkt mit CindyScript zeichnen, der an einen bestimmten geometrischen Punkt gebunden ist. Wir beginnen, indem wir einen Punkt mit dem Punkt hinzufügen-Modus hinzufügen. Für das folgende Beispiel ist es eine gute Idee, auch das Snap-Gitter zu aktivieren, indem Sie auf die Schaltfläche in der Schaltflächenleiste unter der Zeichenfläche drücken. Nach diesem Schritt sollte Ihre Zeichnung wie in Abbildung 1 aussehen.

CindyScript ist (unter anderem) fähig, graphische Elemente zu Ihrer Konstruktion hinzuzufügen. Jetzt möchten wir einen einzelnen Punkt zeichnen, der um (1,1) von Punkt A versetzt ist. Um dies zu erreichen, müssen wir den CindyScript-Editor im Menü Scripting --> Edit Scripts öffnen. Dann wird das unten gezeigte Fenster angezeigt. Dies ist der Ort, an dem CindyScript-Code hauptsächlich eingegeben wird.

Sie werden bemerken, dass auf der linken Seite dieses Fensters eine Liste mit vielen Gelegenheiten vorhanden ist. Jedes Stück CindyScript ist einem dieser Ereignisse zugeordnet und wird ausgeführt, wenn ein entsprechendes Ereignis auftritt. Wir werden ein Stück Script im draw-Ereignis hinzufügen. Dies bedeutet, dass das Script direkt vor dem Zeichnen ausgeführt wird. Dies ist der richtige Ort, um Code hinzuzufügen, der zusätzliche graphische Ausgabe erzeugt. Um das Stück Code hinzuzufügen, klicken wir auf das draw-Ereignis (siehe Abbildung 3).

Danach können wir ein Stück Code in den Hauptteil des Editors eingeben. Um den gewünschten Punkt zu zeichnen, ist das in Abbildung 4 gezeigte Code-Snippet bereits ausreichend.

Wir werden diese Zeile Code kurz kommentieren. Die draw(...)-Anweisung akzeptiert einen zweidimensionalen Vektor. Sie zeichnet einen Punkt an der entsprechenden Position auf der Zeichenfläche. Standardmäßig ist dieser Punkt grün und klein. (Es ist auch möglich, die draw-Anweisung mit zwei Vektoren als Argumente zu verwenden. Dann wird ein Segment zwischen den entsprechenden Punkten gezeichnet.) In unserem Code ist das Argument A+(1,1). Diese Summationsanweisung verwendet automatisch die xy-Koordinaten von Punkt A. Zu diesen Koordinaten addieren wir den Vektor '(1,1)'. In arithmetischen Ausdrücken werden geometrische Elemente automatisch in ihre Koordinaten umgewandelt.

Nach der Eingabe der Code-Zeile müssen Sie die Script-Startschaltfläche (diejenige mit den zwei Zahnrädern) im Script-Editor drücken. Danach sollte Ihre Zeichnung ungefähr wie in Abbildung 5 aussehen.

Schleifen¶

Jetzt werden wir unserer Script eine einfache Kontrollstruktur hinzufügen. Statt eines einzelnen Punktes möchten wir eine ganze Reihe von Punkten zeichnen. Dafür werden wir die repeat(...)-Anweisung verwenden, um eine einfache Schleife zu generieren. repeat(...) kann mit drei Argumenten verwendet werden. Das erste ist die Anzahl der Schleifen. Das zweite ist der Name der Laufvariablen. Das letzte Argument ist das Stück Code, das während der Schleife ausgeführt wird. Die Argumente werden durch Kommas getrennt. In unserem Fall werden wir das in Abbildung 6 gezeigte Code-Stück verwenden. (Denken Sie daran, die Start-Schaltfläche erneut zu drücken, um die Änderungen an Ihrem Script zu aktivieren.)

Dieser Code zeichnet insgesamt 10 Punkte. Die Variable i wird als Laufvariable verwendet. Während der Schleife nimmt sie die Werte 1,2,3,4,5,6,7,8,9,10 an. Im Gegensatz zum letzten Schritt berechnen wir nun den Vektor A+(i,i). Insgesamt erzeugt dies eine diagonale Kette von Punkten.

Im nächsten Schritt möchten wir die Punkte zyklisch um Punkt A anordnen. Der Abstand von A sollte 1 sein und die Punkte sollten eine Winkelverschiebung von 10° haben. Dafür definieren wir eine neue Variable w, die die Rolle des Winkels spielt. Wir fügen die Zeile w=i*10° zu unserer Schleife hinzu. Dies erzeugt automatisch die Variable w (es ist keine explizite Typisierung erforderlich) und ordnet den Winkel ihr zu. Dann ändern wir unseren Code, indem wir den Vektor (sin(w),cos(w)) hinzufügen. Das Ergebnis ist in Abbildung 7 unten dargestellt.

Einen Schieberegler hinzufügen¶

Wir möchten die Anzahl der hinzugefügten Punkte nun interaktiv mit einem Schieberegler auf der Zeichenfläche steuern. Schieberegler werden explizit als geometrische Objekte konstruiert. Dafür fügt man normalerweise ein Liniensegment hinzu und platziert einen Punkt darauf. Es sind jedoch auch andere Arten von Schiebereglern (z.B. Kreisschieberegler) mögliche Varianten. Wir fügen ein einfaches Segment hinzu, indem wir den Segment hinzufügen -Modus verwenden. Die Endpunkte dieses Segments sind B und C. Dann fügen wir einen Punkt auf diesem Segment hinzu, indem wir den Punkt hinzufügen -Modus verwenden. Dieser Punkt ist Punkt D. Wir werden nun den Abstand von C zu D als Kontrollgröße für die Anzahl der Punkte verwenden. Der Abstand kann durch |C,D| gemessen werden. Wir multiplizieren diesen Wert mit 10 und runden ihn, um den Wert n der Anzahl der zu zeichnenden Punkte zu erhalten. Dies kann mit dem einfachen Ausdruck n=round(|C,D|*10) geschehen. Beachten Sie wieder, dass keine explizite Deklaration von Variablen oder Typisierung erforderlich ist. Variablen wie n sind einfach Container für Werte, egal was diese Werte sind. Außerdem müssen wir die Anzahl der Schleifen vom Wert 10 zu n ändern. Das entsprechende Code-Stück zusammen mit einem Bild des aktuellen Zustandes unserer Zeichnung ist in Abbildung 8 dargestellt. In dieser Zeichnung kann die Anzahl der Punkte interaktiv gesteuert werden, indem man Punkt B bewegt.

Ein seltsamer Winkel¶

Wir werden jetzt etwas tun, dessen Bedeutung möglicherweise nicht sofort klar ist. Wir ändern die Winkelverschiebung zu einem Wert von 137,508°. Das Ergebnis dieser Aktion ist in Abbildung 9 unten dargestellt.

Die Punkte scheinen fast zufällig verteilt zu sein. Tatsächlich hat der Wert von 137,508° eine gewisse mathematische Bedeutung. Es ist 360° mal das Quadrat des Goldenen Schnitts. Es hat die seltsame Eigenschaft, dass es die Punkte auf optimale Weise verteilt. Jeder neue Punkt wird an einer Position platziert, die so weit wie möglich von den vorherigen Punkten entfernt ist. Wir können dies sehen, indem wir den Abstand jedes Punktes zum Mittelpunkt A ändern. Eine gute Wahl dieser radialen Verschiebung ist sqrt(i)*0.2. Wir tun dies, indem wir den Vektor, den wir addieren, mit einem Faktor r multiplizieren, den wir auf diesen Wert setzen. Das Ergebnis ist in Abbildung 10 dargestellt. Beachten Sie, dass die Punkte in der Zeichnung so angeordnet sind, dass jeder der Punkte ungefähr die gleiche Menge an freiem Raum um sich herum hat.

Lassen Sie uns ehrgeizig sein und die Anzahl der Punkte erheblich erhöhen. Wir ändern unseren Faktor 10 in der ersten Zeile zu einem Wert von 80. Wir empfehlen, die Punkte A und D zu verschieben, um die Geschwindigkeit der Visualisierung zu sehen. Eine Situation mit ungefähr 400 Punkten ist in Abbildung 11 dargestellt.

Spiralen in einer Sonnenblume¶

Die Punkte, die wir zeichneten, sind ungefähr wie die Samen im Kopf einer Sonnenblume angeordnet. Sie werden auch die typischen Spiralstrukturen beobachten, die man in einer Sonnenblume sieht. Der Faktor der Winkelverschiebung von 137,508° ist entscheidend für dieses Muster. Wir werden dies exemplifizieren, indem wir diesen Winkel leicht stören und sehen, was passiert. Dafür fügen wir einen weiteren Schieberegler hinzu, mit dem wir die Menge der Störung steuern können. Wir zeichnen wieder ein Segment mit einem Punkt darauf und definieren einen (kleinen!) Störungswert durch dd=|E,G|*0.1°. Wir addieren diesen Wert zur Winkelverschiebung, indem wir den Winkel zu w=i*(137.508+dd) ändern. Die Auswirkung einer solchen kleinen Störung ist in Abbildung 12 dargestellt. Wir beobachten, dass die leichte Änderung der Winkelverschiebung zu offensichtlichen Spiralstrukturen in der Anordnung der Samen führt.

Die Anzahl der Spiralen ist eng mit dem Goldenen Schnitt und seiner Entwicklung durch Kettenbrüche verbunden. Wir werden dies nicht näher erläutern (ziemlich tiefe mathematische Struktur). Wir erwähnen nur, dass die sogenannten Fibonacci-Zahlen 1,1,2,3,5,8,13,21,34,... eine Rolle spielen. Hier ist jede Zahl die Summe ihrer zwei Vorgänger. Das Teilen zweier aufeinanderfolgender Fibonacci-Zahlen ergibt eine bessere Annäherung des Goldenen Schnitts, je größer diese beiden Zahlen sind. Erstaunlicherweise wird die Anzahl der prominenten Spiralen eine Fibonacci-Zahl sein (nehmen Sie sich eine echte Sonnenblume und überprüfen Sie es!).

Wir werden dies exemplifizieren, indem wir die Farbe der Punkte in unserer Visualisierung ändern. Viele CindyScript-Funktionen (und insbesondere draw(...)) erlauben die Verwendung von sogenannten Modifiern. Mit ihnen kann man beispielsweise die Farbe, Größe oder Deckkraft des gezeichneten Elements ändern. In unserem speziellen Beispiel fügen wir das folgende Code-Stück zur draw-Anweisung hinzu: color->hue(i/21). Die Funktion hue(...) erzeugt eine Regenbogenfarbe mit voller Sättigung. Während das Argument von 0,0 bis 1,0 läuft, durchläuft die Farbe einen vollständigen Zyklus im Farbkreis. Indem wir die Farbe auf hue(i/21) setzen, färben wir die Samen mit Farben, die zyklisch mit einer Periode von 21 (einer Fibonacci-Zahl) sind. Wir beobachten visuell, dass das gestörte Muster 21 prominente Spiralen hat.

Diese Seite wurde automatisch mit KI (Claude) übersetzt und wartet noch auf Überprüfung. → Alle KI-übersetzten Seiten