Aufbauend auf unserem früheren Ausflug in P5.js für SVG-Vektorgrafiken widmen wir uns nun mit neuer Energie und Zielstrebigkeit der Programmierung digitaler Kunst. Angetrieben von der synergetischen Beziehung zwischen Technologie und künstlerischem Ausdruck, wird unsere Erkundung durch den Bedarf an innovativen Werkzeugen für die Erstellung von Kunstwerken im SVG-Format vorangetrieben, die speziell für iDraw Pen Plotters entwickelt wurden. Als Befürworter kreativer Programmierung möchten wir digitale Künstler mit den erforderlichen Fähigkeiten und Kenntnissen ausstatten, um das volle Potenzial von P5.js auszuschöpfen und so ihre Vorstellungskraft auf einer digitalen Leinwand in greifbare Meisterwerke zu verwandeln. Benötigen Sie SVG-Dateien mit Code? Hier herunterladen>>>
Schritt 1: Die Zeichenfläche erstellen
Zu Beginn unserer Reise in die Programmierung digitaler Kunst mit P5.js legen wir zunächst die Zeichenfläche fest, auf der unser Kunstwerk zum Leben erweckt wird. Mit der Funktion createCanvas() von P5.js definieren wir eine 400x400 große Zeichenfläche mit schwarzem Hintergrund und ohne Füllung und schaffen damit die Grundlage für unsere kreative Erkundung.
function setup() {
createCanvas(400,400);
noFill(0);
stroke(255);
}
Schritt 2: Kreise zeichnen, die in der Mitte ein Quadrat bilden
Wir beobachten den inneren Kreis aus kleinen Kreisen genau und erkennen ein Muster: Er besteht aus 64 Kreisen, die gleichmäßig entlang eines Umfangs mit einem Durchmesser von 75 verteilt sind. An dieser Stelle können wir eine for-Schleife verwenden, um die Koordinaten (X, Y) der Mittelpunkte der kleinen Kreise zu definieren. Bei jedem Schleifendurchlauf wird der Wert von 'i' um π/32 erhöht, bis 'i' den Wert von TAU überschreitet, der einen vollständigen Kreis darstellt. Der Schleifenkörper 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 wird 200 addiert? Weil der Ursprung des Koordinatensystems in P5.js 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 Zeichenfläche addieren, also 200. Mit dem Befehl ellipse(x,y,6,6) zeichnen wir einen Kreis mit einem Durchmesser von 6 Pixeln. Sehen wir uns als Nächstes die Kreise im mittleren Bereich an. Ihre Mittelpunkte liegen auf den Seiten eines Quadrats mit einer Seitenlänge von 280, das auf der Zeichenfläche zentriert ist. Wir können die Position der Kreismittelpunkte mithilfe einer IF-Anweisung wie folgt begrenzen:
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 die X-Koordinate auf 320 gesetzt. Die Y-Koordinate bleibt unverändert. Das bedeutet, dass die Y-Koordinaten der Kreise im äußersten Ring unverändert bleiben, während ihre X-Koordinaten alle auf 320 gesetzt werden. Dadurch verschiebt sich der rote Bereich in den grünen Bereich, wie in der Abbildung dargestellt.
Ebenso gilt: if(X<80) X=80;
if(Y>320) Y=320;
if(Y<80) Y=80;
Schritt3 , Die Formen aus Schritt 1 und 2 mit Linien verbinden
Da die X- und Y-Werte 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, Kleine Kreise im äußersten Ring zeichnen und direkt mit den Kreisen aus Schritt 2 verbinden
Da wir die äußersten Kreise in die Mitte verschoben haben, fügen wir die äußersten Kreise wieder hinzu. An diesem Punkt werden die Werte von x und y durch r * sin(i) und r = cos(i) bestimmt. Ursprünglich war r auf 78 gesetzt, jetzt beträgt es 170. Wir müssen x und y lediglich 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. Das Zeichnen der Kreise und Linien vervollständigt dieses einfache digitale Kunstwerk. Der Code lautet: 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 weiter verteilt 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 nahezu unbegrenzter Möglichkeiten eröffnet. Wenn wir über das komplexe Zusammenspiel von Code und Vorstellungskraft nachdenken, das 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, sich auf ihre eigene Programmierreise zu begeben und die entdeckten Werkzeuge und Techniken zu nutzen, um ihre einzigartigen Meisterwerke zu gestalten. Allen, die ihre digitalen Kreationen in die physische Welt übertragen möchten, empfehlen wir von Herzen, unser Produkt - iDraw Pen Plotters - zu verwenden, um ihre Kunstwerke präzise und elegant zu zeichnen und so die digitale und physische Welt auf dem Weg zu künstlerischer Exzellenz miteinander zu verbinden.
Weitere verwandte Artikel: