Voortbouwend op onze eerdere verkenning van P5.js voor SVG Vector Graphics, wagen we ons nu met hernieuwde energie en doelgerichtheid aan het coderen van digitale kunst. Gemotiveerd door de symbiotische relatie tussen technologie en artistieke expressie, wordt onze verkenning aangedreven door de vraag naar innovatieve tools voor het creëren van SVG-geformatteerde kunstwerken, speciaal afgestemd op iDraw Pen Plotters. 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. Heb je wat 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, stellen we eerst het canvas vast waarop ons kunstwerk tot leven zal komen. Met behulp van de createCanvas()-functie van P5.js definiëren we een canvas van 400x400 met een zwarte achtergrond en zonder vulling, waarmee we het podium klaarzetten voor onze creatieve verkenning.
function setup() {
createCanvas(400,400);
noFill(0);
stroke(255);
}
Stap 2: Cirkelvormen Tekenen die in een Vierkant in het Midden Zijn Gerangschikt
We observeren zorgvuldig de binnenste cirkel van kleine cirkels en vinden een patroon: het bestaat uit 64 cirkels die gelijkmatig verdeeld zijn langs een omtrek met een diameter van 75. Op dit punt kunnen we een for-lus gebruiken om de coördinaten (X, Y) van de centra van de kleine cirkels te definiëren. Specifiek zal bij elke iteratie van de lus de waarde van 'i' toenemen met π/32 totdat 'i' de waarde van TAU (wat een volledige cirkel vertegenwoordigt) overschrijdt. 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 polaire coördinaten. Waarom 200 erbij optellen? Omdat in P5.js het oorsprongspunt van het coördinatensysteem linksboven ligt, waarbij positieve Y-waarden naar beneden toenemen.
Om het dus in het midden te plaatsen, moeten we de helft van de breedte en hoogte van het canvas toevoegen, wat 200 is. Met de opdracht ellipse(x,y,6,6) tekenen we een cirkel met een diameter van 6 pixels. Laten we nu kijken naar de cirkels in het middelste gedeelte. De centra liggen aan de zijden van een vierkant met een zijde van 280, gecentreerd op het canvas. We kunnen de positie van de cirkelcentra beperken met een IF-verklaring, zoals deze:
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, stel dan de X-coördinaat in op 320. De Y-coördinaat blijft onbeperkt. Dit betekent dat de cirkels in de buitenste ring hun Y-coördinaten behouden terwijl hun X-coördinaten allemaal op 320 worden gezet. Dit zorgt ervoor dat het rode deel naar het groene deel verschuift, zoals te zien is in het diagram.
Op dezelfde manier, if(X<80) X=80;
if(Y>320) Y=320;
if(Y<80) Y=80;
Stap3 , Verbind de Vormen van 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 centra van de cirkels in het middelste vierkant vertegenwoordigen, kunnen we ze verbinden met de lijnopdracht: line(x,y,X,Y);
Stap 4, Teken Kleine Cirkels in de Buitenste Ring en Verbind Ze Direct met de Cirkels van Stap 2
Aangezien we de buitenste cirkels naar het midden hebben verplaatst, voegen we 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 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 centra van de buitenste kleine cirkels. Het tekenen van de cirkels en lijnen maakt dit eenvoudige digitale kunstwerk compleet. De code is als volgt: circle(x,y,6); line(x,y,X,Y);
Je kunt de subdivisiewaarde 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 grenzeloze 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 mede-creatieven uit om hun eigen codeerodyssee te beginnen, gebruikmakend van de tools en technieken die we hebben ontdekt om hun unieke meesterwerken te creëren. En voor degenen die hun digitale creaties in de fysieke wereld willen brengen, geven we een welgemeende aanbeveling om ons product te gebruiken - iDraw Pen Plotters - om hun kunstwerken met precisie en elegantie weer te geven, waarmee de kloof tussen de digitale en fysieke wereld wordt overbrugd in de zoektocht naar artistieke perfectie.
Meer gerelateerde artikelen: