Building upon our prior foray into P5.js for SVG Vector Graphics, we now venture into the realm of coding digital art with renewed vigor and purpose. Motivated by the symbiotic relationship between technology and artistic expression, our exploration is fueled by the demand for innovative tools in the creation of SVG-formatted artworks tailored for iDraw Pen Plotters. As advocates for coding creativity, we aim to equip digital artists with the skills and knowledge necessary to harness the full potential of P5.js, thereby transforming imagination into tangible masterpieces on a digital canvas.
Step 1: Creating the Canvas
To begin our journey into coding digital art with P5.js, we first establish the canvas on which our artwork will come to life. Utilizing P5.js's createCanvas() function, we define a 400x400 canvas with a black background and no fill, setting the stage for our creative exploration.
function setup() {
createCanvas(400,400);
noFill(0);
stroke(255);
}
Step 2: Drawing Circles Arranged in a Square in the Middle
e carefully observe the inner circle of small circles and find a pattern: it consists of 64 circles evenly distributed along a circumference with a diameter of 75. At this point, we can use a for loop to define the coordinates (X, Y) of the centers of the small circles. Specifically, for each loop iteration, the value of 'i' will increase by π/32 until 'i' exceeds the value of TAU (which represents a complete circle). The loop body can be written as follows.
let r=75;
let x=sin(i)*r+200;
let y=cos(i)*r+200;
ellipse(x,y,6,6);
The X and Y values are polar coordinates. Why add 200? Because in P5.js, the coordinate system's origin is at the top-left corner, with positive Y values increasing downwards.
So, to position it in the middle, we need to add half of the canvas's width and height, which is 200. Using the command ellipse(x,y,6,6)to draw a circle with a diameter of 6 pixels. Next, let's look at the circles in the middle section. The centers are on the sides of a square with a side length of 280, centered on the canvas. We can restrict the position of the circle centers using an IF statement, like this:
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;
If the X coordinate is greater than 320, then set the X coordinate to 320. The Y coordinate remains unrestricted. This means that the circles on the outermost ring will have their Y coordinates unchanged while their X coordinates will all be set to 320. This results in the red part shifting to the green part, as shown in the diagram.
Similarly，if(X<80) X=80;
if(Y>320) Y=320;
if(Y<80) Y=80;
Step3, Connect the Shapes from Step1and 2with Lines
Now that the values of X and Y lie on the circumference of the innermost small circle, and X and Y represent the centers of the circles in the middle square, we can connect them using the line command: line(x,y,X,Y);
Step 4, Draw Small Circles in the Outermost Ring and Connect Them Directly to the Circles from Step 2
Since we shifted the outermost circles to the middle, let's add the outermost circles back. At this point, the values of x and y are given by r * sin(i) and r = cos(i). Initially, r was given as 78, but now it's 170. We just need to assign values to x and y:x=sin(i)*r+200; y=cos(i)*r+200;Now, x and y represent the centers of the outermost small circles. Drawing the circles and lines completes this simple digital artworksic.The code is as follows:circle(x,y,6); line(x,y,X,Y);
You can adjust the subdivision value of PI in the for loop to make the digital artworksic more compact or more sparse.
The complete code is as follows:
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);
}
}
Summary
In conclusion, our exploration of coding digital art with P5.js has unveiled a realm of limitless creativity and boundless possibilities. As we reflect on the intricate dance of code and imagination that has brought our artwork to life, we are reminded of the transformative power of technology in the hands of artists. Inspired by this journey, we invite fellow creatives to embark on their own coding odyssey, leveraging the tools and techniques we've uncovered to craft their unique masterpieces. And for those seeking to bring their digital creations into the physical realm, we extend a heartfelt recommendation to utilize our product - iDraw Pen Plotters - to render their artwork with precision and elegance, bridging the gap between the digital and physical worlds in pursuit of artistic excellence.
Back to blog
