Aufbauend auf unserem vorherigen Ausflug in P5.js für SVG-Vektorgrafiken, wagen wir uns nun mit neuer Energie und Zielstrebigkeit in die Welt der digitalen Kunstprogrammierung. Angetrieben von der symbiotischen Beziehung zwischen Technologie und künstlerischem Ausdruck, wird unsere Erkundung durch die Nachfrage nach innovativen Werkzeugen zur Erstellung von SVG-formatierten Kunstwerken für iDraw Pen Plotter befeuert. Als Verfechter kreativen Codings möchten wir digitale Künstler mit den Fähigkeiten und dem Wissen ausstatten, um das volle Potenzial von P5.js zu nutzen und so Vorstellungskraft in greifbare Meisterwerke auf einer digitalen Leinwand zu verwandeln. Brauchen Sie einige SVG-Dateien mit Code? Hier herunterladen>>>
Schritt 1: Die Leinwand erstellen
Um unsere Reise in die Programmierung digitaler Kunst mit P5.js zu beginnen, legen wir zunächst die Leinwand fest, auf der unser Kunstwerk zum Leben erweckt wird. Mit der Funktion createCanvas() von P5.js definieren wir eine 400x400-Leinwand mit schwarzem Hintergrund und ohne Füllung, um die Bühne für unsere kreative Erkundung zu bereiten.
function setup() {
createCanvas(400,400);
noFill(0);
stroke(255);
}
Schritt 2: Kreise, die in der Mitte in einem Quadrat angeordnet sind, zeichnen
Wir beobachten sorgfältig den inneren Kreis aus kleinen Kreisen und erkennen ein Muster: Er besteht aus 64 Kreisen, die gleichmäßig entlang eines Umfangs mit einem Durchmesser von 75 verteilt sind. An diesem Punkt können wir eine for-Schleife verwenden, um die Koordinaten (X, Y) der Mittelpunkte der kleinen Kreise zu definieren. Konkret wird bei jeder Schleifeniteration der Wert von 'i' um π/32 erhöht, bis 'i' den Wert von TAU (was einen vollständigen Kreis darstellt) überschreitet. Der Schleifenrumpf kann wie folgt geschrieben werden.
let r=75;
let x=sin(i)*r+200;
let y=cos(i)*r+200;
ellipse(x,y,6,6);
Die X- und Y-Werte sind Polarkoordinaten. Warum 200 addieren? Weil im P5.js-Koordinatensystem der Ursprung oben links liegt und positive Y-Werte nach unten zunehmen.
Um es also in der Mitte zu positionieren, müssen wir die Hälfte der Breite und Höhe der Leinwand hinzufügen, also 200. Mit dem Befehl ellipse(x,y,6,6) zeichnen wir einen Kreis mit einem Durchmesser von 6 Pixeln. Schauen wir uns nun die Kreise im mittleren Bereich an. Die Mittelpunkte liegen an 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 einschränken, so:
if(X>320) X=320;
if(X<80) X=80;
if(Y>320) Y=320;
if(Y<80) Y=80;
if(X>320) X=320;
Wenn die X-Koordinate größer als 320 ist, wird sie auf 320 gesetzt. Die Y-Koordinate bleibt unbeschränkt. Das bedeutet, dass die Kreise im äußersten Ring ihre Y-Koordinaten beibehalten, während ihre X-Koordinaten alle auf 320 gesetzt werden. Dies führt dazu, dass sich der rote Teil zum grünen Teil verschiebt, wie im Diagramm gezeigt.
Ebenso, if(X<80) X=80;
if(Y>320) Y=320;
if(Y<80) Y=80;
Schritt3 , Verbinden Sie die Formen aus Schritt 1 und 2 mit Linien
Da die Werte von X und Y 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 Befehl line(x,y,X,Y); verbinden.
Schritt 4, Zeichnen Sie kleine Kreise im ä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 die äußersten Kreise wieder hinzu. Zu diesem Zeitpunkt werden die Werte von x und y durch r * sin(i) und r = cos(i) gegeben. Ursprünglich war r mit 78 angegeben, jetzt ist es 170. Wir müssen nur Werte für x und y zuweisen: x=sin(i)*r+200; y=cos(i)*r+200; Jetzt repräsentieren x und y die Mittelpunkte der äußersten kleinen Kreise. Das Zeichnen der Kreise und Linien vervollständigt dieses einfache digitale Kunstwerk. 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 lockerer zu gestalten.
Der vollständige Code lautet:
function setup() {
createCanvas(400,400);
noFill(0);
stroke(255);
}
function draw() {
background(0);
for(i=0;i<TAU;i+=PI/36){
let r=75;
let x=sin(i)*r+200;
let y=cos(i)*r+200;
ellipse(x,y,6,6);
r=78;
x=sin(i)*r+200;
y=cos(i)*r+200;
r=170;
let X=sin(i)*r+200;
let Y=cos(i)*r+200;
if(X>320) X=320;
if(X<80) X=80;
if(Y>320) Y=320;
if(Y<80) Y=80;
circle(X,Y,6);
line(x,y,X,Y);
x=sin(i)*r+200;
y=cos(i)*r+200;
circle(x,y,6);
line(x,y,X,Y);
}
}
Zusammenfassung
Zusammenfassend hat unsere Erkundung der Programmierung digitaler Kunst mit P5.js eine Welt grenzenloser Kreativität und unbegrenzter Möglichkeiten eröffnet. Wenn wir über den komplexen Tanz von Code und Vorstellungskraft nachdenken, der unser Kunstwerk 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, ihre eigene Coding-Odyssee zu beginnen und die Werkzeuge und Techniken zu nutzen, die wir entdeckt haben, um ihre einzigartigen Meisterwerke zu schaffen. Und für diejenigen, die ihre digitalen Kreationen in die physische Welt bringen möchten, empfehlen wir herzlich die Nutzung unseres Produkts - iDraw Pen Plotters - um ihre Kunstwerke mit Präzision und Eleganz umzusetzen und so die Lücke zwischen digitaler und physischer Welt im Streben nach künstlerischer Exzellenz zu schließen.
Weitere verwandte Artikel: