Do it yourself: Bunte geometrische Objekte mit JSLogo
Im Netz stehen unzählige geometrische Bilder zur Verfügung. Das Besondere an dieser Seite ist, dass sie nicht nur hübsche bunte Bilder zeigt, sondern den User in die Lage versetzt, diese Bilder selbst herzustellen.

Es geht also um das Selbermachen, zumindest das Nachmachen und Variieren. Das bedeutet auch, dass man danach auf seine Ergebnisse stolz sein kann - wie ein Handwerker nach vollbrachter Leistung.

Logo ist eine Programmiersprache, die für Programmier-Laien geeignet ist, weil sie vergleichsweise einfach und anschaulich ist.

Typisch für LOGO ist die virtuelle Schildkröte (engl. Turtle), die der Programmierer mit eckigen Bewegungen über den Bildschirm laufen lässt, wobei sie eine Linie hinter sich herzieht. Auf diese Art können die tollsten Zeichnungen erstellt werden.

Logo gibt es in vielen Dialekten. Die Vorteile des Dialekts JSLogo für den User, also für SIE, sind folgende:
  • kostenlos
  • keine Anmeldung, keine Registrierung
  • kein Herunterladen von Dateien
  • relativ einfach zu lernen, auch für Kinder
  • Auch ohne die geringsten Kenntnisse kann man tolle Objekte auf den Bildschirm zaubern.
  • Automatisch werden alle selbst gebauten Programme gespeichert.
Dem User steht das Programm jederzeit im Nullkommanix online fix und fertig zur Verfügung.

Nachteile gibt es natürlich auch. So basiert JSLogo auf Englisch, ohne Arbeit und Lernen kann man best. gewünschte Ergebnisse nicht erzeugen, das Programm hat seine Grenzen, die Farb-Möglichkeiten sind begrenzt, aus anderen Dialekten muss erst in den JSLogo-Dialekt übersetzt werden bzw. umgekehrt, usw.


Also nichts wie ran!

So sieht die Startseite von JSLogo aus
Wie gehen Sie vor?

Sie möchten in 2 Minuten ein tolles Bild erzeugen? Wie geht das?
  1. JSLogo öffnen
  2. Einen Programmcode (z.B. einen Code weiter unten auf dieser Seite) durch copy und paste (kopieren und einfügen) in das Feld links unten einfügen.
  3. Das Programm laufen lassen, indem man auf den Knopf "Run" unten in der Mitte drückt
  4. Das Ergebnis entsteht im Ergebnisfenster oben links.
  5. Das Ergebnis bei Bedarf speichern oder in die Zwischenablage kopieren und seinen Freunden schicken.
Sie öffnen JSLogo in einem neuen Fenster, also auf einer zweiten Seite. Das geht am einfachsten, indem Sie auf diesen Link zu JSLogo klicken. Das Ergebnis ist ein Bildschirm, der wie auf dem Bild in der Mitte aussieht. Links ist das Ergebnis-Fenster, unten das Fenster für den Programm-Code, rechts findet man allerlei Nützliches wie den Befehlsvorrat, Links etc.

Beispiel 1 - Kreiselkreise: Programm-Code

to kreis.boegen :r :anz :dir
  ; h=:r/2*3
  ; h^2+s^2/4=s^2
  make "h :r/2*3
  make "s 2*:h*sqrt(1/3)
  setpw 1
  setpc 0
  ;Kreis ============================
  filled 7 [
    arc 360 :r]
  ;Start im Center
  ;filled 4[
    repeat 6[
    pu fd :r rt 150+30*:dir pd
  arc 60 :r ;stop
    pu lt 150+30*:dir bk :r pd
    rt 60*:dir ] ;stop
  ; Zusatz-Kreisbögen ========================
  setpc (list (random 100)(random 100 )(random 100))
    repeat 6[
    repeat :anz-1 [
  pu fd :r lt 60/:anz*repcount*:dir
      bk :r   lt 30+30*:dir  pd
  arc 60 :r ;===============================
 pu rt 30+30*:dir  fd :r
  rt 60/:anz*repcount*:dir
  bk :r pd ;stop
    ; Teil-Bogen fertig ;===============================
    ]
    rt 360/6*:dir
  ]
  End

to kreis.bogen.show
  cs ht window
  pu setxy -200 0 pd
  kreis.boegen 400 50 pick [1 -1]
  pu setxy  200 0 pd
  kreis.boegen 400 50 pick [1 -1]
    forever [
    pu setxy (random -450 450) (random -300 300) pd
  kreis.boegen (random 20 80) (random 20 30) pick [1 -1]
  ;wait 50
    ;cs
  ]
end

cs
;kreis.boegen 100 6 1
kreis.bogen.show
 
Kreiselkreise - Ergebnis

Die Kreiselkreise haben Zufallsfarben. Sie haben verschiedene Größen und Positionen. Sie sind mal nach rechts, mal nach links gedreht.

Kein Bild ist wie das andere, denn alles wird jedesmal wieder frisch auf der Basis von Zufallszahlen erstellt.

Stellen Sie sich vor, Sie hätten alle diese Kreise per Hand zeichnen sollen - bloß das nicht!

Man sieht daran: Die kreative Denkarbeit steckt im Quell-Code - die Sklavenarbeit macht der Computer.

Wenn man wenige Zeilen im Quellprogramm verändert, kann sich das Ergebnis schon stark verändern. Ersetzen Sie doch mal die Zeilen
setpc (list (random 100)(random 100 )(random 100))
    repeat 6[

durch die Zeilen
make "hurz (random 1 6)
repeat 6[
setpc  item (remainder :hurz+repcount 6)+1 [1 13 4 14 6 2]

Beispiel 2: Perfektes Quadrat

Ein "perfektes Quadrat" (auch: "quadriertes Quadrat") ist ein Quadrat, das sich vollständig in kleinere Quadrate aufteilen lässt, wobei keine zwei dieser Teilquadrate einander gleich sein dürfen - oder, etwas mathematischer formuliert: Ein Quadrat, das sich in lauter paarweise verschieden große Quadrate zerlegen lässt, heißt perfekt.

Lange war ungewiss, ob es überhaupt ein perfektes Quadrat gibt. Schließlich fand Roland Sprague eine Lösung mit 55 Quadraten. (Siehe hier) 1978 gelang es dem holländischen Mathematiker A.J.W.Duijvestijn auf der Basis eines 112x112-Quadrats, den Nachweis zu erbringen, dass ein perfektes Quadrat auch mit 21 Teilen darstellbar ist. Die 21 Teilquadrate haben die Kantenlängen 2, 4, 6, 7, 8, 9, 11, 15, 16, 17, 18, 19, 24, 25, 27, 29, 33, 35, 37, 42 und 50. Oben haben wir 50, 35 und 27, unten 33, 37 und 42, links 50, 29 und 33 und rechts 27, 19, 24 und 42. (Quelle: Ivan Moscovich, Formenrätsel, S. 65 ff. Weitere Infos findet man unter dem Stichwort Quadratur_des_Quadrates.)

Das Perfekte Quadrat ist mit den LOGOtypischen Rechts-Links Befehlen programmiert worden. Das erscheint auf den ersten Blick etwas plump. Es hat aber gegenüber der Verwendung von Koordinaten (was in JSLogo auch möglich ist) den Riesen-Vorteil, dass man die Grafik vergrößern, in einem Winkel darstellen kann und deshalb gut in weiteren LOGO-Programmen verwenden kann.
Perfektes Quadrat: Programm-Code

to quad.perf.show
  forever [
    cs
    window
    ht
    seth pick [0 90 180 270]
    pu setxy 0 40 pd
  quad.perf 4
    wait 150
  ]
End

to quad.perf :t
  ; From Center
  pu  fd :t*56 lt 90 fd :t*56 rt 90 pd
  ;pick [0 1 2 3 4 6 13 14]
  ; (list (random 100) (random 100) (random 100))
  ; Reihe oben
  filled (list (random 100) (random 100) (random 100)) [quad :t*50]
  ;filled pick [0 1 2 3 4 6 13 14] [quad :t*50]
  pu rt 90 fd :t*50 lt 90 pd
  filled (list (random 100) (random 100) (random 100)) [quad :t*35]
     pu rt 90 fd :t*35 lt 90 pd
  filled (list (random 100) (random 100) (random 100)) [quad :t*27]
    pu lt 90 fd :t*85 rt 90 pd
  ; Spalte links
  pu bk :t*50 pd
  filled (list (random 100) (random 100) (random 100)) [quad :t*29]
   pu bk :t*29 pd
  filled (list (random 100) (random 100) (random 100)) [quad :t*33]
    ; Reihe unten
  pu rt 90 fd :t*33 lt 90 fd :t*4 pd
  filled (list (random 100) (random 100) (random 100)) [quad :t*37]
   pu rt 90 fd :t*37 lt 90 fd :t*5 pd
  filled pick [0 1 2 3 4 6 13 14] [quad :t*42]
   ; rechts nach oben
  pu fd :t*18 pd
  filled (list (random 100) (random 100) (random 100))  [quad :t*18]
    pu rt 90 fd :t*18 lt 90 fd :t*6 pd
   filled (list (random 100) (random 100) (random 100))  [quad :t*24]
    pu fd :t*19 rt 90 fd :t*5 lt 90 pd
  filled (list (random 100) (random 100) (random 100))  [quad :t*19]
    pu lt 90 fd :t*8 rt 90 pd
  filled (list (random 100) (random 100) (random 100))  [quad :t*8]
    pu bk :t*8 lt 90 fd :t*3 rt 90 pd
   filled (list (random 100) (random 100) (random 100))  [quad :t*11]
    pu bk :t*11 pd
  filled (list (random 100) (random 100) (random 100)) [quad :t*6]
    pu fd :t*11 lt 90 fd :t*17 rt 90 pd
  filled (list (random 100) (random 100) (random 100)) [quad :t*17]
   pu lt 90 fd :t*15 rt 90 pd
  filled (list (random 100) (random 100) (random 100)) [quad :t*15]
    pu bk :t*15 lt 90 fd :t*21 rt 90 pd
  filled (list (random 100) (random 100) (random 100)) [quad :t*25]
  pu bk :t*25 pd
  filled (list (random 100) (random 100) (random 100)) [quad :t*4]
  pu rt 90 fd :t*25 lt 90 fd :t*16 pd
  filled (list (random 100) (random 100) (random 100)) [quad :t*16]
  pu fd :t*9 pd
  filled (list (random 100) (random 100) (random 100)) [quad :t*9]
  pu rt 90 fd :t*9 lt 90 pd
  filled (list (random 100) (random 100) (random 100)) [quad :t*2]
  pu bk :t*2 pd
  filled (list (random 100) (random 100) (random 100)) [quad :t*7]
  pu rt 90 bk :t*63 lt 90 fd :t*52 pd
  ; To Center
  pu  rt 90 fd :t*56 lt 90 bk :t*56 pd
end

to quad :s
  ; Start ende oben links
  repeat 4[
   rt 90 fd :s ]
end

quad.perf.show 
Perfektes Quadrat: Ergebnis



Möchten Sie ein Bild wie dieses selbst erzeugen?
  • Den Quellcode links markieren und kopieren
  • Die Seite JSLogo aufrufen
  • Den Quellcode unten links einfügen
  • Auf den Button "Run" drücken
  • Auf Wunsch ein besonders hübsches Bild speichern über Extras-Download Drawing auf der rechten Bildschirm-Seite
Weiterentwicklung des Programms:
  • Andere Farb-Kombinationen
  • Das Programm viel eleganter programmieren
  • Andere Flächen programmieren: Andere perfekte und unperfekte Quadrate oder perfekte und unperfekte Rechtecke
Beispiel 3: Tiling - Quadrat im Quadrat

In dem Rätselbuch "Die Sphinx" von Heinrich Hemme fand ich die Aufgabe "Das Quadrat im Quadrat" (S. 38). Sie lautet: "Wenn man bei einem Quadrat die Ecken und die Seitenmittelpunkte miteinander verbindet, (...) entsteht in seinem Inneren ein kleines Quadrat. In welchem Verhältnis stehen die Flächeninhalte des inneren und des äußeren Quadrats?"

Das Bild des Quadrats im Quadrat inspirierte mich zu folgender Aufgabe:

Wenn man eine beliebige Länge auf der Seite eines Quadrats entlanggeht und den erreichten Punkt mit der gegenüberliegenden Ecke verbindet und dieses auf allen vier Seiten gleichermaßen tut, dann entsteht ein Innenquadrat. Ist der Punkt nur wenig weit von der Ecke entfernt, so entsteht ein rel. großes Innenquadrat. Je näher er der Seitenmitte kommt, desto kleiner wird das Innenquadrat.

Die Aufgabenstellung:
  • Variable Größe der Innenquadrate
  • Variable Farben der Teilflächen
  • Mit diesen Zufalls-Quadraten eine Fläche parkettieren.
Programm-Code: Tiling - Quadrat im Quadrat

to quady :s :alpha :col1 :col2 :col3
  make "beta 90-:alpha
  make "gegen :s*(tan :alpha)
  make "an2 :gegen*(cos :alpha)
  make "gegen2 :gegen*(sin :alpha)
  make "hyp sqrt(:s^2+:gegen^2)
    ; Große Dreiecke ========================
    repeat 4[
    filled :col1 [
  fd :s rt 90
  fd :gegen rt 90+:alpha
  fd :hyp lt :alpha rt 180
        fd :s rt 90]]
  ; Kleine Dreiecke ========================
  repeat 4[
    filled :col2 [
  rt :alpha
  fd :an2 lt 90
  fd :gegen2 lt :alpha+90
  fd :gegen rt 180
  fd :s rt 90
    ]]
  ; Mittelquadrat ========================
  rt :alpha fd :an2
  filled :col3 [
  repeat 4[
      fd :hyp-:an2-:gegen2 rt 90]]
  bk :an2 lt :alpha
end

to quady.tile :s :m :n
  repeat :n [
    repeat :m [
     quady :s (random 4 44)
     item (random 1 6) [1 13 4 14 6 2]
     item (random 1 6) [1 13 4 14 6 2]
     item (random 1 6) [1 13 4 14 6 2]
      pu rt 90 fd :s lt 90 pd ]
    pu lt 90 fd :s*:m rt 90
     pu bk :s  pd
  ]
end

cs
window
pu setxy -460 185 pd
quady.tile 100 9 5
;quady 200 25 4 1 2 
Ergebnis: Tiling - Quadrat im Quadrat



Möchten Sie ein Bild wie dieses selbst erzeugen?
  • Den Quellcode links markieren und kopieren
  • Die Seite JSLogo aufrufen
  • Den Quellcode unten links einfügen
  • Auf den Button "Run" drücken
  • Auf Wunsch ein besonders hübsches Bild speichern über Extras-Download Drawing auf der rechten Bildschirm-Seite
Ideen zur Weiterentwicklung des Programms:
  • Bei Parkettierungen muss die Turtle jeweilse wieder an den Ausgangspunkt zurückkommen. Das lässt sich viel eleganter lösen durch ein push-pop-Verfahren: Das Programm merkt sich die Koordinaten des Ausgangspunktes und die Richtung der Turtle; Wenn die Turtle dahin zurückspringen soll, sagt man ihr das über den Befehl setpos. Modifizieren Sie den Programmcode in dieser Weise!
  • Nur wenige unterschiedliche Größen des Innenquadrats zulassen!
  • Andere Farb-Kombinationen
  • Innenquadrat wahlweise auch in die andere Richtung zeigen lassen
  • Die Verbindung von Ecke zum Punkt auf der Seite in beide Richtungen nacheinander durchführen. Dadurch entstehen innen ein Achtstern und ein Achteck. Und das Ganze noch in Farbe - ein Traum!
  • Quadrate wahlweise mit anderen Mustern füllen
Beispiel 4: Unmögliches Objekt

Programm-Code: Unmögliches Objekt

to sexer :s
  repeat 3[
; innen ======================
    filled 4[
  fd :s*4 rt 120
  fd :s*3 rt 120
  fd :s*1 rt 60
  fd :s*1 lt 120
  fd :s*2 lt 60
  fd :s*2 lt 120
  fd :s*1 rt 60
  fd :s*1 rt 120
  fd :s*3 rt 120
      fd :s*4 rt 60]
  ; außen  ===========================
  pu rt 60 fd :s pd
    filled 6[
  fd :s*4 rt 120
  fd :s*5 rt 60
  fd :s*5 rt 120
  fd :s*4 rt 120
  fd :s*1 rt 60
  fd :s*2 lt 120
  fd :s*3 lt 60
  fd :s*3 lt 120
  fd :s*2 rt 60
      fd :s*1 lt 60]
  pu fd :s*1 rt 120 pd
  ; drei ==============================
 pu rt 60 fd :s rt 60
  fd :s lt 60 pd
  fd :s rt 120
  fd :s rt 120
  fd :s
  pu fd :s lt 60
  fd :s rt 120 pd
    rt 120]
end

cs
sexer 30
 
Ergebnis: Unmögliches Objekt



Möchten Sie ein Bild wie dieses selbst erzeugen?
  • Den Quellcode links markieren und kopieren
  • Die Seite JSLogo aufrufen
  • Den Quellcode unten links einfügen
  • Auf den Button "Run" drücken
  • Auf Wunsch das Bild speichern über Extras-Download Drawing auf der rechten Bildschirm-Seite
Ideen zur Weiterentwicklung des Programms:
  • Andere Farb-Kombinationen
  • Eins der zwei kleinen Dreiecke ist nicht programmiert worden. Für welchen Zweck wäre es sinnvoll, dieses noch hinzuzufügen?
  • Modifizieren Sie das Objekt so, dass es ein mögliches Objekt (ein Würfel) wird!
  • Das Objekt hat die Grundform eines Sechsecks. Kacheln Sie eine Fläche mit solchen Sechsecken!
  • Weitere unmögliche Objekte programmieren! Dazu "Unmögliche Objekte", "Impossible object", "Unmögliche Figuren" etc. googlen.
Beispiel 5: Stern-Galaxie

Programm-Code: Stern-Galaxie

to dreieck.gleichschenklig :alpha :hoehe
  setpencolor "black
  fd :hoehe / ( cos :alpha / 2 )
  rt 180 - ( 90 - :alpha / 2 )
  fd 2 * sqrt ( ( :hoehe / ( cos :alpha / 2 ) ) ^ 2 - :hoehe ^ 2 )
  rt 180 - ( 90 - :alpha / 2 )
  fd :hoehe / ( cos :alpha / 2 )
  lt :alpha + 180
end

to drachen :alpha :hoehe1 :hoehe2
  filled (list random 100 random 100 random 100)
  [
  dreieck.gleichschenklig :alpha :hoehe1]
  fd :hoehe1 / ( cos :alpha / 2 )
  rt 180 - ( 90 - :alpha / 2 ) - arctan :hoehe2 /
     sqrt ( ( :hoehe1 / ( cos :alpha / 2 ) ) ^ 2 - :hoehe1 ^ 2 )
  filled (list random 100 random 100 random 100)[
  fd sqrt ( :hoehe2 ^ 2 + ( sqrt ( ( :hoehe1 /
     ( cos :alpha / 2 ) ) ^ 2 - :hoehe1 ^ 2 ) ) ^ 2 )
  rt  2*arctan (:hoehe2 / sqrt ( ( :hoehe1 /
     ( cos :alpha / 2 ) ) ^ 2 - :hoehe1 ^ 2 ) )
  fd sqrt ( :hoehe2 ^ 2 + ( sqrt ( ( :hoehe1 /
     ( cos :alpha / 2 ) ) ^ 2 - :hoehe1 ^ 2 ) ) ^ 2 )]
  rt 180 - ( 90 - :alpha / 2 ) - arctan :hoehe2 /
     sqrt ( ( :hoehe1 / ( cos :alpha / 2 ) ) ^ 2 - :hoehe1 ^ 2 )
  fd :hoehe1 / ( cos :alpha / 2 )
  rt 180-:alpha
end

to rotation :hoehe1 :hoehe2 :peaks
  repeat :peaks [
 drachen 360/:peaks :hoehe1 :hoehe2
  rt 360/:peaks
  ]
 hideturtle
end

to starshow
cs
  window
  setsc 9
  forever [
    pu setxy (random -600 600) (random -300 300) pd
 rotation (random 10 50) (random 20 160) (random 5 30)
  wait 50]
 end

cs
;drachen 37 50 200
;rotation 50 125 19
starshow
;rotation (random 10 50) (random 20 125) (random 5 19)
 
Ergebnis: Stern-Galaxie



Möchten Sie ein Bild wie dieses selbst erzeugen?
  • Den Quellcode links markieren und kopieren
  • Die Seite JSLogo aufrufen
  • Den Quellcode unten links einfügen
  • Auf den Button "Run" drücken
  • Auf Wunsch das Bild speichern über Extras-Download Drawing auf der rechten Bildschirm-Seite
Ideen zur Weiterentwicklung des Programms:
  • Andere Farb-Kombinationen
  • Wenn die Sterne schneller erscheinen sollen, modifizieren Sie die Zeile "wait 50"! (z.B. wait 10 oder 0)
  • Wie wäre es mit Sternen mit abgeknickten Zacken?
  • Oder mit Sternen mit unterschiedlich langen Zacken?
  • Statt Sternen können Blumen programmiert und eingesetzt (oder Sterne und Blumen) werden (siehe unten).
  • Statt Sternen können Hypozykloide programmiert und eingesetzt werden.
Blumen-Feld

LOGO lernen von der Pike auf

Es gibt ausreichend Einführungen in Logo. Denen muss ich nicht noch eine weitere hinzufügen. Es genügt, auf ausgewählte Einführungen zu verlinken.
Links zum LOGO Lernen von der Pike auf

Tipps zum Programmieren

  • Programmcode mit Kommentaren versehen. Sie werden einfach durch ein Semikolon eingeleitet. Man kann sie auch gebrauchen, wenn man das Programm strukturieren möchte durch z.B. Striche. Auch praktisch, wenn man einen Teil nur vorläufig unterdrücken möchte.
  • Zum Fehler-Finden (Debuggen) ist das Einfügen von STOP praktisch. Dann findet man leichter, an welcher Stelle etwas schiefläuft. Eventuell hilft es auch, wait 100 einzufügen, so dass das Programm langsam abläuft.
Eine LOGO-Seite mit Appetithäppchen von Volker Pöhls

Möchten Sie den Webmaster freundlich kontaktieren? Mail an den Webmaster

First published: 08.04.2019
Last Update:    16.07.2019
Andere Angebote vom selben Autor: