Voortbouwend op onze eerdere kennismaking met P5.js voor SVG-vectorafbeeldingen, begeven we ons nu met hernieuwde energie en doelgerichtheid in de wereld van het coderen 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-indeling, afgestemd op iDraw-penplotters. Als voorstanders van creatieve codering willen we digitale kunstenaars uitrusten met 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 hier>>>
Stap 1: Het canvas maken
Om onze reis in het coderen 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 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 een vierkant vormen
We observeren zorgvuldig de binnenste cirkel van kleine cirkels en ontdekken een patroon: deze bestaat uit 64 cirkels die gelijkmatig over een omtrek met een diameter van 75 zijn verdeeld. 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 wordt de waarde van 'i' verhoogd met π/32 totdat 'i' groter is 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 waarden X en Y 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 het commando 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 hier:
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 bij de cirkels op de buitenste ring hun Y-coördinaten 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 waarden van X en Y 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 deze verbinden met het line-commando: 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 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. 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
Concluderend heeft onze verkenning van het coderen van digitale kunst met P5.js een wereld van onbeperkte creativiteit en eindeloze mogelijkheden onthuld. Terwijl we terugkijken op de ingewikkelde 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 codeeravontuur te beginnen en de hulpmiddelen en technieken die we hebben ontdekt te gebruiken om hun unieke meesterwerken te maken. En 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: