Aufbauend auf unserem vorherigen Ausflug in P5.js für SVG-Vektorgrafiken widmen wir uns nun mit neuer Energie und Zielstrebigkeit dem Programmieren digitaler Kunst. Angetrieben von der symbiotischen Beziehung zwischen Technologie und künstlerischem Ausdruck, wird unsere Erkundung durch die Nachfrage nach innovativen Werkzeugen zur Erstellung von Kunstwerken im SVG-Format für iDraw-Pen-Plotter vorangetrieben. Als Befürworter kreativen Programmierens möchten wir digitale Künstler mit den Fähigkeiten und Kenntnissen ausstatten, die sie benötigen, 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 Leinwand erstellen
Zu Beginn unserer Reise in die digitale Kunst mit P5.js legen wir zunächst die Leinwand fest, auf der unser Kunstwerk zum Leben erwachen wird. Mit der P5.js-Funktion createCanvas() definieren wir eine 400x400 große Leinwand 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 anordnen, die in der Mitte ein Quadrat bilden
Wir betrachten den inneren Kreis aus kleinen Kreisen sorgfältig und erkennen ein Muster: Er besteht aus 64 gleichmäßig auf einem Kreisumfang mit einem Durchmesser von 75 verteilten Kreisen. 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 erhöht sich der Wert von „i“ um π/32, bis „i“ den Wert von TAU überschreitet, das 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 sich der Ursprung des Koordinatensystems in P5.js in der oberen linken Ecke befindet und positive Y-Werte nach unten zunehmen.
Um den Kreis in der Mitte zu positionieren, müssen wir daher 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 auf dem ä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 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 mithilfe des line-Befehls 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 zur Mitte verschoben haben, fügen wir die äußersten Kreise nun wieder hinzu. Zu diesem Zeitpunkt 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; 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 weitläufiger 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 digitalen Kunst mit P5.js ein Reich grenzenloser Kreativität und unendlicher Möglichkeiten eröffnet. Während wir über das faszinierende 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 einzigartige Meisterwerke zu schaffen. Allen, die ihre digitalen Kreationen in die physische Welt übertragen möchten, empfehlen wir von Herzen unser Produkt – iDraw-Pen-Plotter –, um ihre Kunstwerke präzise und elegant zu zeichnen und so die digitale mit der physischen Welt auf dem Weg zu künstlerischer Exzellenz zu verbinden.
Weitere verwandte Artikel: