Voortbouwend op onze eerdere verkenning van P5.js voor SVG Vector Graphics, duiken we nu met hernieuwde energie en doelgerichtheid in het coderen van digitale kunst. Gemotiveerd door de symbiotische relatie tussen technologie en artistieke expressie, wordt onze verkenning aangewakkerd 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 de vaardigheden en kennis bieden 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 Tekenend in een Vierkant in het Midden
We observeren zorgvuldig de binnenste cirkel van kleine cirkels en ontdekken een patroon: deze bestaat uit 64 cirkels die gelijkmatig verdeeld zijn 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 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 in het midden te positioneren, moeten we dus 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 uit 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, bevelen we van harte ons product aan - iDraw Pen Plotters - om hun kunstwerken met precisie en elegantie te realiseren, waarmee de kloof tussen digitale en fysieke werelden wordt overbrugd in de zoektocht naar artistieke perfectie.
Meer gerelateerde artikelen: