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.
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
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
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
Ein Kreis ist eine Ellipse, dessen Höhe und Breite gleich sind
ellipse(250,150,200,200);
Zeichne eine Ellipse
dessen Mittelpunkt bei X=250 und Y=150 liegt
die Breite = 200 Pixel
die Höhe = 200 Pixel
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
triangle (250,250,240,260,260,260);
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?
line(250,260,250,390);
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);
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);
//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);
//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);
Gut gemacht ! Du hast das Tutorial vollendet.
Wir würden uns freuen, wenn du uns sagst, wie wir es noch besser machen können.