Voortbouwend op onze eerdere kennismaking met P5.js voor SVG-vectorafbeeldingen, betreden we nu met hernieuwde energie en doelgerichtheid het domein van het programmeren van digitale kunst. Gedreven door de symbiotische relatie tussen technologie en artistieke expressie, wordt onze verkenning gevoed door de vraag naar innovatieve hulpmiddelen voor het maken van kunstwerken in SVG-formaat, afgestemd op iDraw-penplotters. Als voorstanders van creatieve codering willen we digitale kunstenaars voorzien van de vaardigheden en kennis die nodig zijn om het volledige potentieel van P5.js te benutten en zo verbeelding om te zetten in tastbare meesterwerken op een digitaal canvas. SVG-bestanden met code nodig? Download ze hier>>>
Stap 1: Het canvas maken
Om onze reis in het programmeren van digitale kunst met P5.js te beginnen, stellen we eerst het canvas vast waarop ons kunstwerk tot leven komt. Met de functie createCanvas() van P5.js definiëren we een canvas van 400x400 met een zwarte achtergrond en zonder vulling, waarmee we de basis leggen voor onze creatieve verkenning.
function setup() {
createCanvas(400,400);
noFill(0);
stroke(255);
}
Stap 2: Cirkels tekenen die in het midden in een vierkant zijn gerangschikt
We observeren de binnenste cirkel van kleine cirkels zorgvuldig en ontdekken een patroon: deze bestaat uit 64 cirkels die gelijkmatig zijn verdeeld over een omtrek met een diameter van 75. Op dit punt kunnen we een for-lus gebruiken om de coördinaten (X, Y) van de middelpunten van de kleine cirkels te definiëren. Bij elke iteratie van de lus neemt de waarde van 'i' toe met π/32 totdat 'i' de waarde van TAU overschrijdt (wat een volledige cirkel vertegenwoordigt). De inhoud van de lus kan als volgt worden geschreven.
let r=75;
let x=sin(i)*r+200;
let y=cos(i)*r+200;
ellipse(x,y,6,6);
De X- en Y-waarden zijn poolcoördinaten. Waarom tellen we 200 op? Omdat de oorsprong van het coördinatensysteem in P5.js zich in de linkerbovenhoek bevindt, waarbij positieve Y-waarden naar beneden toenemen.
Om de cirkel in het midden te plaatsen, moeten we dus de helft van de breedte en hoogte van het canvas optellen, namelijk 200. Met de opdracht ellipse(x,y,6,6) tekenen we een cirkel met een diameter van 6 pixels. Laten we vervolgens naar de cirkels in het middelste gedeelte kijken. De middelpunten bevinden zich aan de zijden van een vierkant met een zijde van 280, gecentreerd op het canvas. We kunnen de positie van de middelpunten van de cirkels beperken met een IF-instructie, zoals hieronder:
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;
Als de X-coördinaat groter is dan 320, stellen we de X-coördinaat in op 320. De Y-coördinaat blijft onbeperkt. Dit betekent dat de Y-coördinaten van de cirkels op de buitenste ring ongewijzigd blijven, terwijl hun X-coördinaten allemaal op 320 worden ingesteld. Hierdoor verschuift het rode gedeelte naar het groene gedeelte, zoals in het diagram wordt weergegeven.
Op dezelfde manier geldt: if(X<80) X=80;
if(Y>320) Y=320;
if(Y<80) Y=80;
Stap3 , Verbind de vormen uit stap 1 en 2 met lijnen
Nu de X- en Y-waarden op de omtrek van de binnenste kleine cirkel liggen en X en Y de middelpunten van de cirkels in het middelste vierkant vertegenwoordigen, kunnen we ze verbinden met de opdracht line: line(x,y,X,Y);
Stap 4, Teken kleine cirkels in de buitenste ring en verbind ze rechtstreeks met de cirkels uit stap 2
Omdat we de buitenste cirkels naar het midden hebben verschoven, voegen we nu de buitenste cirkels weer toe. Op dit punt worden de waarden van x en y gegeven door r * sin(i) en r = cos(i). Aanvankelijk was r ingesteld op 78, maar nu is dit 170. We hoeven alleen waarden toe te wijzen aan x en y:x=sin(i)*r+200; y=cos(i)*r+200;Nu vertegenwoordigen x en y de middelpunten van de buitenste kleine cirkels. Door de cirkels en lijnen te tekenen, is dit eenvoudige digitale kunstwerk voltooid. De code is als volgt: circle(x,y,6); line(x,y,X,Y);
Je kunt de onderverdelingswaarde van PI in de for-lus aanpassen om het digitale kunstwerk compacter of juist ruimer te maken.
De volledige code is als volgt:
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);
}
}
Samenvatting
Samenvattend heeft onze verkenning van het programmeren van digitale kunst met P5.js een wereld van onbeperkte creativiteit en grenzeloze mogelijkheden onthuld. Terwijl we terugkijken op de ingewikkelde dans tussen code en verbeelding die ons kunstwerk tot leven heeft gebracht, worden we herinnerd aan de transformerende kracht van technologie in de handen van kunstenaars. Geïnspireerd door deze reis nodigen we andere creatievelingen uit om hun eigen programmeeravontuur te beginnen en de hulpmiddelen en technieken die we hebben ontdekt te gebruiken om hun unieke meesterwerken te creëren. Voor degenen die hun digitale creaties naar de fysieke wereld willen brengen, raden we van harte aan om ons product — iDraw-penplotters — te gebruiken om hun kunstwerken nauwkeurig en elegant weer te geven. Zo wordt de kloof tussen de digitale en fysieke wereld overbrugd in het streven naar artistieke excellentie.
Meer gerelateerde artikelen: