Voortbouwend op onze eerdere kennismaking met P5.js voor SVG-vectorafbeeldingen, betreden we nu met hernieuwde energie en doelgerichtheid het domein van digitale kunst programmeren. Gedreven door de symbiotische relatie tussen technologie en artistieke expressie, wordt onze verkenning gevoed door de behoefte aan innovatieve hulpmiddelen voor het maken van kunstwerken in SVG-indeling, afgestemd op iDraw-penplotters. Als voorstanders van creativiteit door programmeren 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. Heb je SVG-bestanden met code nodig? Download ze hier>>>
Stap 1: Het canvas maken
Om onze reis door het programmeren van digitale kunst met P5.js te beginnen, maken we eerst het canvas waarop ons kunstwerk tot leven komt. Met de functie createCanvas() van P5.js definiëren we een canvas van 400 x 400 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 een vierkant vormen
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' groter wordt dan de waarde van TAU (die 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 en 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, wat 200 is. Met het commando ellipse(x,y,6,6) tekenen we een cirkel met een diameter van 6 pixels. Laten we vervolgens kijken naar de cirkels in het middelste gedeelte. De middelpunten liggen 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，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 met elkaar verbinden met het lijncommando: 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 bepaald door r * sin(i) en r = cos(i). Aanvankelijk was r ingesteld op 78, maar nu is het 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. Het tekenen van de cirkels en lijnen voltooit dit eenvoudige digitale kunstwerk. 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 ruimtelijker 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 eindeloze mogelijkheden onthuld. Terwijl we terugkijken op de complexe dans van 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 tools en technieken die we hebben ontdekt te gebruiken om hun unieke meesterwerken te maken. Voor degenen die hun digitale creaties naar de fysieke wereld willen brengen, raden we van harte aan ons product - iDraw-penplotters - te gebruiken om hun kunstwerken nauwkeurig en elegant weer te geven en zo de kloof tussen de digitale en fysieke wereld te overbruggen in het streven naar artistieke uitmuntendheid.
Meer gerelateerde artikelen: