Kreatives Coding: Zeichnen mit Processing.

Schritt 1: Hello Processing!

Mit dem Processing Online-Editor kannst du sofort mit dem Programmieren beginnen, ohne dass du Software herunterladen oder installieren musst. Es ist eine großartige Möglichkeit, mit dem Programmieren zu beginnen, und du kannst mit nur ein paar Zeilen Code erstaunliche Grafiken und Animationen erstellen.

1. Zum Processing Online-Editor gehen.

Zur Website gehen

2. Verwende den Hello Processing Editor

Deine Leinwand ist 500 Pixel breit und 400 Pixel hoch
Die Position (0;0) befindet sich in der oberen linken Ecke.

Beispiel: Um ein Rechteck in der linken oberen Ecke zu zeichnen, musst du die Koordinaten des Rechtecks auf die Position x=0 und y=0 (0;0) setzen ​hervorgehoben ​hervorgehoben ​hervorgehoben

3. Verwende den Hello Processing Editor

Die Textbox unten links ist der Ort, an dem du deinen Code schreiben wirst
In unserem Beispiel haben wir geschrieben:
rect(0,0,100,100).
Du kannst es ausprobieren und auf die Schaltfläche „Run Code“ klicken ​hervorgehoben

Schritt 2: Zeichnen wir einen Luftballon

Hier ist der Algorithmus, den wir kodieren wollen:

Zeichne einen großen Kreis
Zeichne ein kleines Dreieck unter den Kreis, dessen Spitze den Kreis berührt
Ziehe eine Linie von der Mitte der Basis des Dreiecks zum unteren Rand der Seite

1. „Zeichne einen großen Kreis“

Ein Kreis ist eine Ellipse, dessen Höhe und Breite gleich sind

Wir können die Ellipsenfunction verwenden

Tippe: 

				
					 ellipse(250,150,200,200);

Diese Anweisung bedeutet:

Zeichne eine Ellipse
dessen Mittelpunkt bei X=250 und Y=150 liegt
die Breite = 200 Pixel
die Höhe = 200 Pixel

2. Zeichne ein kleines Dreieck unter den Kreis, dessen Spitze den Kreis berührt

Um ein Dreieck zu zeichnen, benötigen wir folgende Anweisung

Wenn sich der Mittelpunkt des Kreises an der Position (250, 150) befindet und der Radius des Kreises 100 beträgt, dann sollte sich die Spitze des Dreiecks an der Position (250, 250) befinden
​hervorgehoben
Die Anweisung beginnt wie folgt:
​hervorgehoben
Dreieck (250,250,?,?,?,?,?).
​hervorgehoben Die nächsten 2 Punkte müssen auf jeder Seite des ersten Punktes liegen.
Ersetze die Fragezeichen durch die Koordinaten der 2 verbleibenden Punkte. ​hervorgehoben

Dies ist eine Lösung

				
					triangle (250,250,240,260,260,260);

Aber es ist nicht die einzige Lösung!

3. Zeichne eine Linie von der Mitte der Basis des Rechtecks zum unteren Rand der Seite

Um eine Linie zu zeichnen, brauchen wir diese Anweisung

Die Mitte der Basis des Dreiecks liegt (in unserem Beispiel) an der Koordinate: (250,260)

Die Anweisung beginnt wie folgt.
line (250,260,?,?);​
Der Endpunkt muss sich an der gleichen X-Position und einer niedrigeren Y-Position befinden.

Kannst du die Anweisung vervollständigen?

Dies ist eine Lösung: 

				
					line(250,260,250,390);

Aber es ist nicht die einzige Lösung!

Schritt 3: Kodiere deine eigenen Zeichnungen

Illustration of the fill function

Fill() Methode

Diese Funktion füllt alle Formen gemäß deinen Anweisungen mit der ausgewählten Farbe. Die Standardfarbe ist Weiß.

				
					fill(92);//fills with shades of grey
ellipse(200,200,50,50);

fill(0, 128, 162);//fills with RGB colors
ellipse(150,150,50,50);

Stroke() Methode

Diese Funktion zeichnet den Umriss aller Formen gemäß deiner Anweisung in der ausgewählten Farbe. Die Standardfarbe ist Schwarz.

				
					stroke(92);//will draw the outline in grey
ellipse(100,100,90,90);

//will draw the outline in the selected RGB color
stroke(255, 20, 11);
ellipse(150,150,50,50);

Zusätzliche Details:

  • Code wird von oben nach unten ausgeführt. Was später gezeichnet wird, wird über bereits vorhandene Formen gezeichnet.
  • Um Linien zu entfernen, kannst du eine Linie mit der gleichen Farbe wie die des Hintergrundes darüberzeichnen.

Versuche, die folgenden Bilder in Processing nachzustellen:

Dog drawn in Processing 
				
					//draw the face
triangle(190,120,250,240,310,120);

//add the ears
triangle(340,125,295,190,295,105);
triangle(160,125,205,190,205,105);

//add the nose
ellipse(250, 248, 16, 16);

//draw the eyes
fill(0);//fill the following shapes in black
ellipse(230, 150, 12, 12);
ellipse(270, 152, 12, 12);
Ghost drawn in Processing 
				
					//draw the outline of the ghost
stroke(0); //draw the following shapes in black
ellipse(255, 150, 90, 80);
rect(210, 150, 90, 100);
triangle(210, 250, 240, 250, 225, 265);
triangle(240, 250, 270, 250, 255, 265);
triangle(270, 250, 300, 250, 285, 265);

//erase the undesired lines
stroke(255); //draw in white
line(211,150,299,150); //top line of the rectangle
line(211,250,299,250); //bottom line ot the rectangle
line(211,249,299,249); //top line of the triangles

// draw the eyes
stroke(0); //draw in black
ellipse(235, 150, 12, 12);
ellipse(275, 152, 12, 12);
Zurück zu den Tutorials

Feedback-Formular

Gut gemacht ! Du hast das Tutorial vollendet.

Wir würden uns freuen, wenn du uns sagst, wie wir es noch besser machen können.