In p5js haben wir Funktionen um die Basis Shapes ganz einfach zu zeichnen. Hier gibt
es folgende Möglichkeiten: das einfachste ist der Punkt. Dafür müssen wir einfach das
"point" command aufrufen. Müssen nun auf unserem Canvas lediglich das X und die Y
Koordinaten angeben. Also wenn ich jetzt hier zum beispiel 100/100 eintrage, bekommen wir auf
unserem Canvas jetzt hier einen kleinen Punkt gezeichnet. Der Punkt ist ein bisschen seltsam,
weil man würde jetzt vielleicht erwarten, dass der Punkt eigentlich ein Kreis ist,
mit einer Breite und Höhe und einem Radius. Dafür haben wir aber spezifische Funktionen.
Der Punkt ist tatsächlich einfach nur, man muss es sich wie eine Linie vorstellen,
die nur ein Pixel lang ist. Um den größer zu machen, müssen wir die Linienstärke vergrößern.
Was ich euch im nächsten Video dann nochmal zeige. Um diese ein Pixel lange Linie fortzusetzen,
gibt es natürlich dann auch eine "line" Funktion. Damit können wir eine ganz einfache
linien zeichnen. Müssen nun einfach sozusagen zwei, eine Start- und eine End-Koordinate
angeben. Jeweils mit x/y. Also hier sozusagen start-x, start-y und dann end-x und end-y
Haben jetzt hier sozusagen unsere Linie gezeichnet. Als nächstes gibt es die Ellipse
Funktion. Damit können wir nämlich jetzt tatsächlich einen richtigen Kreis zeichnen.
Auch hier müssen wir wieder die x/y-Koordinate angeben, wo das ganze positioniert sein soll.
Und jetzt können wir die Breite und die Höhe unserer Ellipse angeben.
Mache das in dem Fall rund sehen jetzt hier unsere Ellipse. Ganz
wichtig unsere Ellipse wird per default so positioniert, dass die X- und Y-Koordinaten,
die wir als die ersten zwei Parameter angeben im Mittelpunkt unseres Kreises ist und nicht
oben links in der Ecke wie es zum Beispiel beim Rechteck ist. Natürlich ist es irgendwie
ein bisschen dämlich, dass man sozusagen den kreis mit zwei werten definieren muss,
deswegen gibt es hierfür auch ein Shortcut. Dafür haben wir die Circle
Funktion. Können hier sozusagen dass nochmal an der selben Position aber ein bisschen größer.
Natürlich falsch: wir brauchen nämlich nur einen Wert und haben jetzt sozusagen den
Kreis und sparen uns einen Parameter. Sonst ist das vom Prinzip her genau dieselbe Funktion.
Genau neben dem Kreis brauchen wir natürlich jetzt auch noch ein Rechteck. Dafür gibt es das "rect"
Command. Auch hier brauchen wir wieder ein x/y, wo das Ganze positioniert sein soll. Und können dann
die Größe also die Breite und die Höhe unseres Rechtecks angeben. Und genau wie beim Kreis:
wenn wir ein Quadrat zeichnen wollen, gibt es auch hier wieder einen Shortcut den wir
benutzen können, um das zu definieren und zwar die "square" Funktion. Müssen also hier einfach
nur "square" eintragen und machen das dann auf 50 und müssen hier dann auch wieder nur
einen Wert eintragen, weil wir ja sozusagen ein genaues Rechteck haben wollen. Es gibt
darüber hinaus auch noch ein paar andere Shapes die ihr einfach in der Reference
nachschauen können dies hier sind sozusagen die wichtigsten einfachen Shapes für den Anfang