Digitale Kunst mit P5.js programmieren – Kreative SVG-Kunst für Pen Plotter

Die Kombination aus kreativer Programmierung und moderner Zeichenhardware eröffnet völlig neue Möglichkeiten für digitale Künstler. Mit P5.js lassen sich beeindruckende SVG-Grafiken generieren, die anschließend mit einem Pen Plotter Zeichenroboter, einer automatischen Zeichenmaschine oder einer KI Kunst Zeichenmaschine physisch gezeichnet werden können.

In dieser Anleitung zeigen wir Schritt für Schritt, wie digitale Kunstwerke mit P5.js erstellt werden und wie daraus plotterfähige SVG-Dateien entstehen.

Schritt 1 – Zeichenfläche mit P5.js erstellen

Zuerst wird eine Zeichenfläche definiert. Mit der Funktion createCanvas() erzeugen wir eine 400x400 Pixel große Arbeitsfläche mit schwarzem Hintergrund.

function setup() {

createCanvas(400,400);

noFill(0);

stroke(255);

}

Damit entsteht die Basis für generative Kunstwerke, die später mit einem Automatic Drawing Machine oder einem Pen Plotter Drawing Robot ausgegeben werden können.

Schritt 2 – Kreise in quadratischer Struktur erzeugen

Im nächsten Schritt werden kleine Kreise entlang einer Kreisbahn angeordnet. Dafür verwenden wir trigonometrische Funktionen wie sin() und cos().

let r=75;

let x=sin(i)*r+200;

let y=cos(i)*r+200;

ellipse(x,y,6,6);

Da das Koordinatensystem in P5.js links oben beginnt, werden 200 Pixel addiert, um die Formen mittig auf der Zeichenfläche zu platzieren.

Nun begrenzen wir die äußeren Punkte mithilfe von IF-Abfragen, damit eine quadratische Struktur entsteht:

if(X<80) X=80;

if(Y>320) Y=320;

if(Y<80) Y=80;

Dadurch werden die äußeren Kreise auf die Kanten eines Quadrats verschoben und erzeugen eine interessante geometrische Form.

Schritt 3 – Linien zwischen den Formen verbinden

Jetzt verbinden wir die inneren Kreise mit den Punkten des Quadrats.

line(x,y,X,Y);

Diese Linien erzeugen ein komplexes Muster, das besonders gut mit einem Automatischen Zeichenroboter oder einem AI Art to Drawing Machine dargestellt werden kann.

Schritt 4 – Äußeren Kreis hinzufügen

Nun ergänzen wir einen weiteren äußeren Kreisring.

r=170;

x=sin(i)*r+200;

y=cos(i)*r+200;

circle(x,y,6);

line(x,y,X,Y);

Durch Veränderung der Schrittweite im For-Loop kann die Dichte der geometrischen Muster angepasst werden.

Vollständiger P5.js Code

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);

}

}

Warum eignet sich P5.js perfekt für Pen Plotter Kunst?

P5.js ist ideal für generative Kunst und SVG-Erstellung geeignet. Künstler können damit einzigartige geometrische Muster, algorithmische Kunstwerke und KI-inspirierte Designs erzeugen.

In Kombination mit einem Pen Plotter Zeichenroboter wie dem iDraw von UUNA TEK lassen sich digitale Entwürfe direkt auf Papier übertragen. Dadurch entsteht eine perfekte Verbindung aus digitaler Kunst und physischer Zeichnung.

Besonders beliebt ist diese Methode bei:

• Generativer Kunst
• Algorithmischem Design
• AI Art Projekten
• SVG Plotter Zeichnungen
• Modernen Kunstinstallationen
• Architektur- und Geometriezeichnungen

Zusammenfassung

Mit P5.js können Künstler beeindruckende digitale Kunstwerke programmieren und diese anschließend mit einer Automatischen Zeichenmaschine oder einem Pen Plotter Drawing Robot real auf Papier zeichnen lassen.

Die Kombination aus Coding, SVG-Technologie und Pen Plotter eröffnet nahezu unbegrenzte kreative Möglichkeiten für moderne digitale Kunst.

Wer generative Kunstwerke, KI-basierte Zeichnungen oder geometrische SVG-Grafiken erstellen möchte, findet in P5.js und dem UUNA TEK iDraw Pen Plotter die perfekte Lösung.