Zeichnen mit dem miniworlds - Grundlagen#
Vorwort#
Dieses Tutorial ist stark inspiriert vom großartigen Vorlesungsskript von Prof. Dr. Michael Kipp https://michaelkipp.de/processing/, welches sich auf Processing bezieht.
Der miniworlds-Port von processing übernimmt einige Ideen und Konzepte von Processing, setzt dies aber oft auf leicht abweichende Art um. In diesem Tutorial lernst du das Programmieren mit dem miniworlds kennen. Der miniworlds hat einen Processing-Modus, der sich an der populären Grafikprogrammierumgebung orientiert.
Wie zeichnet man auf einem PC?#
Monitore bestehen aus einem Gitter kleinester Quadrate. Diese Quadrate sind so klein, dass sie für uns wie Punkte aussehen. Man nennt diese kleinsten Quadrate Pixel.
Die Pixel sind in einem Koordinatensystem angeordnet. Dieses ist allerdings leicht anders aufgebaut, denn in der Regel ist der Ursprung in der oberen linken Ecke:
Note
Informatiker zählen in der Regel beginnend mit 0, d.h. die obere linke Ecke hat die Koordinaten (0,0). Ist das Bildschirmfenster 800x600 groß, so hat die untere rechte Ecke die Koordinaten (799, 599)
Das erste Programm#
Ein miniworlds-Programm besteht aus mehreren Teilen:
1from miniworlds import *
2world = World()
3
4# Your code here
5
6world.run()
1: Die miniworlds Bibliothek wird importiert
2: Ein Spielfeld wird erstellt.
6: Am Ende wird die mainloop gestartet, dies muss immer die letzte Zeile deines Programms sein.
Dazwischen findet sich ein Kommentar - Kommentare beginnen immer mit einer # und werden vom Computer ignoriert und sind für Menschen gemacht. Sie dienen dazu, Programmierern Hinweise zu geben, hier z.B. das an diese Stelle dein eigener Code kommt.
Dieser könnte z.B. so aussehen:
from miniworlds import *
world = World()
Point((10,10))
world.run()
Du kannst auch die Größe des Worlds anpassen, indem du dem World beim erstellen zwei Argumente übergibst:
from miniworlds import *
world = World(200, 400)
world.run()
Zeichnen geometrischer Grundformen.#
Als nächstes lernst du, geometrische Grundformen zu zeichnen.
Linien#
Die Syntax zum Zeichnen einer Linie sieht folgendermaßen aus:
Line(startpoint, endpoint)
Die Parameter startpoint und endpoint sind jeweils Tupel, z.B. (1, 2) für x=1 und y=2.
Wenn du eine Linie von (10,10) zu (100, 200) zeichnen willst so musst du z.B. folgendes schreiben:
from miniworlds import *
world = World()
Line((10,10), (100, 200))
world.run()
Kreise#
Kreise kannst du allgemein folgendermaßen erstellen:
Line(position, radius)
Note
Die übergebene Position bei Kreisen ist der Mittelpunkt des Kreises
Wenn du einen Kreis an der Stelle (100,200) mit Radius 20 erstellen willst, musst du folgendes schreiben:
from miniworlds import *
world = World()
Circle((100,200), 20)
world.run()
Rechteck#
Ein Rechteck wird beschrieben durch Position, Breite und Höhe:
Rectangle(position, width, height)
Der Parameter position beschreibt die obere linke Ecke des Rechtecks.
Willst du ein Rechteck an der Position (100, 100) mit Breite 20 und Höhe 100 zeichnen, so musst du folgendes schreiben:
from miniworlds import *
world = World()
Rectangle((100, 100), 20, 100)
world.run()
Ellipse#
Ellipsen werden im Prinzip wie Rechtecke beschrieben, d.h. die Ellipse wird dann so gezeichnet, dass sie genau in das Rechteck hineinpasst. width und height beziehen sich hier jeweils auf den Durchmesser der Ellipse
Ellipse(position, width, height)
Willst du eine Ellipse an der Position (100, 100) mit Breite 20 und Höhe 100 zeichnen, so musst du folgendes schreiben:
from miniworlds import *
world = World()
Ellipse((100, 100), 20, 100)
world.run()
Rechteck und Ellipse in die Mitte verschieben.#
Oft will man ein Rechteck oder eine Ellipse nicht an der oberen linken Position erstellen, sondern am Mittelpunkt. Es gibt mehrere Möglichkeiten, wie man dies erreichen kann, ohne die Position manuell auszurechnen.
1. from_center#
Mit der Klassenmethode from_center kannst du eine Ellipse am Zentrum erstellen.
from miniworlds import *
world = World()
Ellipse.from_center((50, 100), 100, 200)
world.run()
2. Verschieben mit ellipse.center#
Du kannst die Ellipse nach dem Verschieben an den Mittelpunkt verschieben;
from miniworlds import *
world = World()
Ellipse((50, 100), 100, 200)
ellipse.center = ellipse.position
world.run()
Komplexere geometrische Grundformen#
Arc#
Kreisbögen und Kreisausschnitte zeichnest du mit folgendem Befehl:
Arc(position, width, height, start_angle, end_angle)
Bedeutung der Parameter:
position: Die Position als 2-Tupelwidth,height: Breite und Höhe bei Erstellung einer Ellipse. Wähle beide gleich, damit sich der Radius für einen Kreisbogen ergibt oder wähle unterschiedle Werte, damit sich der Bogen und Ausschnitt einer Ellipse ergibt.start_angle,end_angle: Die Winkel des Ausschnitts. Die Winkel werden von einer gedachten Linie gegen den Uhrzeigersinn gemessen.
Beispiel:#
from miniworlds import *
world = World()
a1 = Arc.from_center((200, 200), 200, 200, 30, 242)
world.run()
Triangle#
Ein Dreieck erstellst du mit folgendem Befehl:
Triangle(p1,p2, p3)
p1, p2 und p3 sind Punkte, die du jeweils als Tupel schreiben kannst.
Beispiel:#
from miniworlds import *
world = World()
Triangle((10,10), (100,100), (200,10))
world.run()
Polygon#
Ein Polygon (d.h. ein n-Eck) erstellst du mit folgendem Befehl:
Polygon(pointlist)
pointlist ist eine Liste von Punkten. Das Dreieck aus dem vorherigen Beispiel kannst du z.B. folgendermaßen als Polygon erstellen:
Beispiel:#
from miniworlds import *
world = World()
Polygon([(10,10), (100,100), (200,10)])
world.run()
Training
Übung 1.1: Haus mit Grundformen
Zeichne ein Haus mit Grundformen:
Lösungsansatz
from miniworlds import *
world = World()
world.size = (120,210)
Rectangle((10,100), 100, 100)
Triangle((10,100), (60, 50), (110, 100))
world.run()
Übung 1.2: Gesicht
Zeichne ein Gesicht mit Grundformen
Lösungsansatz
from miniworlds import *
import random
world = World((100,100))
world.size = (100, 100)
Circle.from_center((50,50),50)
Arc.from_center((50,80),40,20, 180, 360)
Circle.from_center((30,30),10)
Circle.from_center((70,30),10)
Line((50,50),(50,70))
world.run()