Aufbauend auf unserem vorherigen Ausflug in P5.js für SVG-Vektorgrafiken wagen wir uns nun mit neuem Elan und Zielstrebigkeit in die Welt der digitalen Kunstprogrammierung. Motiviert von der symbiotischen Beziehung zwischen Technologie und künstlerischem Ausdruck, wird unsere Forschung durch die Nachfrage nach innovativen Werkzeugen zur Erstellung von SVG-formatierten Kunstwerken, maßgeschneidert für iDraw Pen Plotter, vorangetrieben. Als Verfechter der Kreativität im Programmieren möchten wir Digitalkünstlern die notwendigen Fähigkeiten und Kenntnisse vermitteln, um das volle Potenzial von P5.js auszuschöpfen und so ihre Fantasie in greifbare Meisterwerke auf digitaler Leinwand zu verwandeln. Benötigen Sie SVG-Dateien mit Code? Hier herunterladen>>>
Schritt 1: Erstellen der Leinwand
Um unsere Reise in die digitale Kunst mit P5.js zu beginnen, legen wir zunächst die Leinwand fest, auf der unser Kunstwerk zum Leben erweckt wird. Mithilfe createCanvas() Funktion von P5.js definieren wir eine 400 x 400 Pixel große Leinwand mit schwarzem Hintergrund und ohne Füllung und schaffen so die Grundlage für unsere kreative Erkundung.
Funktion setup() {
Leinwand erstellen(400,400);
keine Füllung(0);
Schlaganfall(255);
}
Schritt 2: Kreise zeichnen, die in der Mitte in einem Quadrat angeordnet sind
Wir beobachten den inneren Kreis der kleinen Kreise sorgfältig und erkennen ein Muster: Er besteht aus 64 gleichmäßig entlang eines Umfangs mit einem Durchmesser von 75 mm verteilten Kreisen. An dieser Stelle können wir eine For-Schleife verwenden, um die Koordinaten (X, Y) der Mittelpunkte der kleinen Kreise zu definieren. Konkret erhöht sich der Wert von 'i' bei jedem Schleifendurchlauf um π/32, bis 'i' den Wert von TAU (was einem vollständigen Kreis entspricht) überschreitet. Der Schleifenkörper lässt sich wie folgt schreiben.
sei r=75;
sei x=sin(i)*r+200;
sei y=cos(i)*r+200;
Ellipse (x, y, 6,6);
Die X- und Y-Werte sind Polarkoordinaten. Warum 200 hinzufügen? Weil in P5.js der Ursprung des Koordinatensystems in der oberen linken Ecke liegt und positive Y-Werte nach unten hin ansteigen.
Um es in der Mitte zu positionieren, müssen wir die Hälfte der Breite und Höhe der Leinwand, also 200, hinzufügen. Mit dem Befehl ellipse(x,y,6,6) zeichnen wir einen Kreis mit einem Durchmesser von 6 Pixeln. Betrachten wir als Nächstes die Kreise im mittleren Bereich. Die Mittelpunkte befinden sich auf den Seiten eines Quadrats mit einer Seitenlänge von 280, das auf der Leinwand zentriert ist. Wir können die Position der Kreismittelpunkte mit einer IF-Anweisung wie folgt einschränken:
wenn(X>320) X=320;
wenn (X < 80) X = 80;
wenn (Y>320) Y=320;
wenn (Y < 80) Y = 80;
wenn(X>320) X=320;
Wenn die X-Koordinate größer als 320 ist, setzen Sie die X-Koordinate auf 320. Die Y-Koordinate bleibt unverändert. Das bedeutet, dass die Kreise im äußersten Ring ihre Y-Koordinaten unverändert behalten, während ihre X-Koordinaten alle auf 320 gesetzt werden. Dies führt dazu, dass der rote Teil in den grünen Teil verschoben wird, wie in der Abbildung dargestellt.
Ähnlich gilt: if(X<80) X=80;
wenn (Y>320) Y=320;
wenn (Y < 80) Y = 80;
Schritt 3 : Verbinden Sie die Formen aus Schritt 1 und 2 mit Linien
Da die Werte von X und Y nun auf dem Umfang des innersten kleinen Kreises liegen und X und Y die Mittelpunkte der Kreise im mittleren Quadrat darstellen, können wir sie mit dem Linienbefehl verbinden: line(x,y,X,Y);
Schritt 4 : Zeichnen Sie kleine Kreise in den äußersten Ring und verbinden Sie sie direkt mit den Kreisen aus Schritt 2
Da wir die äußersten Kreise in die Mitte verschoben haben, fügen wir sie wieder hinzu. Die Werte von x und y ergeben sich nun aus r * sin(i) und r = cos(i). Ursprünglich war r mit 78 angegeben, jetzt ist es 170. Wir müssen also nur noch x und y Werte zuweisen: x=sin(i)*r+200; y=cos(i)*r+200; Nun stellen x und y die Mittelpunkte der äußersten kleinen Kreise dar. Durch das Zeichnen der Kreise und Linien wird dieses einfache digitale Kunstwerk vervollständigt. Der Code lautet wie folgt: circle(x,y,6); line(x,y,X,Y);
Sie können den Unterteilungswert von PI in der For-Schleife anpassen, um das digitale Kunstwerk kompakter oder spärlicher zu gestalten.
Der vollständige Code lautet wie folgt:
Funktion setup() {
Leinwand erstellen(400,400);
keine Füllung(0);
Schlaganfall(255);
}
Funktion zeichnen() {
Hintergrund(0);
für(i=0;i<TAU;i+=PI/36){
sei r=75;
sei x=sin(i)*r+200;
sei y=cos(i)*r+200;
Ellipse (x, y, 6,6);
r=78;
x=sin(i)*r+200;
y=cos(i)*r+200;
r=170;
sei X=sin(i)*r+200;
sei Y=cos(i)*r+200;
wenn(X>320) X=320;
wenn (X < 80) X = 80;
wenn (Y>320) Y=320;
wenn (Y < 80) Y = 80;
Kreis(X,Y,6);
Linie (x, y, X, Y);
x=sin(i)*r+200;
y=cos(i)*r+200;
Kreis(x,y,6);
Linie (x, y, X, Y);
}
}
Zusammenfassung
Zusammenfassend lässt sich sagen, dass unsere Erkundung der digitalen Kunst mit P5.js ein Reich grenzenloser Kreativität und unbegrenzter Möglichkeiten eröffnet hat. Wenn wir über das komplexe Zusammenspiel von Code und Fantasie nachdenken, das unsere Kunstwerke zum Leben erweckt hat, werden wir an die transformative Kraft der Technologie in den Händen von Künstlern erinnert. Inspiriert von dieser Reise laden wir andere Kreative ein, sich auf ihre eigene Programmier-Odysee zu begeben und die von uns entdeckten Werkzeuge und Techniken zu nutzen, um ihre einzigartigen Meisterwerke zu schaffen. Und allen, die ihre digitalen Kreationen in die physische Welt bringen möchten, empfehlen wir wärmstens unser Produkt – die iDraw Pen Plotter –, um ihre Kunstwerke präzise und elegant zu rendern und so die Kluft zwischen digitaler und physischer Welt zu überbrücken und so künstlerische Exzellenz zu erreichen.
Weitere verwandte Artikel: