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 symbiotischen Beziehung zwischen Technologie und künstlerischem Ausdruck, wird unsere Erkundung durch den Bedarf an innovativen Werkzeugen zur Erstellung von Kunstwerken im SVG-Format vorangetrieben, die speziell für iDraw-Stiftplotter entwickelt wurden. Als Befürworter kreativer Programmierung möchten wir digitale Künstler mit den Fähigkeiten und dem Wissen ausstatten, die erforderlich sind, um das volle Potenzial von P5.js auszuschöpfen und dadurch die Vorstellungskraft auf einer digitalen Leinwand in greifbare Meisterwerke zu verwandeln. Benötigen Sie 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 erwachen wird. Mithilfe der P5.js-Funktion createCanvas() definieren wir eine 400x400 große Leinwand mit schwarzem Hintergrund und ohne Füllung und schaffen so die Grundlage für unsere kreative Erkundung.
function setup() {
createCanvas(400,400);
noFill(0);
stroke(255);
}
Schritt 2: Kreise anordnen, 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 Kreises 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 jeder Schleifeniteration erhöht sich der Wert von „i“ um π/32, 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 addieren wir 200? Weil sich der Ursprung des Koordinatensystems in P5.js oben links befindet 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 addieren, also 200. Mit dem Befehl ellipse(x,y,6,6) zeichnen wir einen Kreis mit einem Durchmesser von 6 Pixeln. Sehen wir uns nun die Kreise im mittleren Bereich an. Ihre Mittelpunkte liegen auf den Seiten eines Quadrats mit einer Seitenlänge von 280, das auf der Leinwand 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
Nachdem 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 Linienbefehl verbinden: line(x,y,X,Y);
Schritt 4: Kleine Kreise im äußersten Ring zeichnen und sie 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 nun wieder hinzu. An dieser Stelle 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 jedoch 170. Wir müssen x und y lediglich Werte zuweisen: x=sin(i)*r+200; y=cos(i)*r+200; Jetzt stellen x und y die Mittelpunkte der äußersten kleinen Kreise dar. Durch das Zeichnen der Kreise und Linien ist dieses einfache digitale Kunstwerk fertiggestellt. 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 großzügiger 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 unendlicher Möglichkeiten eröffnet. Während 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, ihre eigene Programmierreise zu beginnen und die entdeckten Werkzeuge und Techniken zu nutzen, um einzigartige Meisterwerke zu schaffen. Und für alle, die ihre digitalen Kreationen in die physische Welt übertragen möchten, empfehlen wir herzlich unser Produkt – iDraw-Stiftplotter –, um ihre Kunstwerke präzise und elegant umzusetzen und so die digitale mit der physischen Welt auf dem Weg zu künstlerischer Exzellenz zu verbinden.
Weitere verwandte Artikel: