P5.js를 활용한 SVG 벡터 그래픽을 살펴본 이전 여정에 이어, 이제 새로운 열정과 목적을 가지고 디지털 아트를 코딩하는 세계로 나아가 보겠습니다. 기술과 예술적 표현의 공생 관계에 이끌린 이번 탐구는 iDraw 펜 플로터에 맞춘 SVG 형식 작품 제작을 위한 혁신적인 도구에 대한 요구에서 출발했습니다. 코딩을 통한 창의성을 지지하는 우리는 디지털 아티스트들이 P5.js의 잠재력을 최대한 활용할 수 있도록 필요한 기술과 지식을 제공하고자 합니다. 이를 통해 디지털 캔버스 위에서 상상을 실 tangible한 걸작으로 구현할 수 있습니다. 코딩으로 만든 SVG 파일이 필요하신가요? 여기에서 다운로드하세요>>>
1단계: 캔버스 만들기
P5.js로 디지털 아트를 코딩하는 여정을 시작하기 위해 먼저 작품이 구현될 캔버스를 설정합니다. P5.js의 createCanvas() 함수를 사용하여 검은색 배경과 채우기 없음으로 400x400 크기의 캔버스를 정의하고, 창의적인 탐구를 위한 무대를 마련합니다.
function setup() {
createCanvas(400,400);
noFill(0);
stroke(255);
}
2단계: 가운데에 정사각형 형태로 배열된 원 그리기
작은 원들로 이루어진 안쪽 원을 자세히 살펴보면 패턴을 발견할 수 있습니다. 지름 75의 원주를 따라 64개의 원이 균등하게 배치되어 있습니다. 이제 for 반복문을 사용하여 작은 원의 중심 좌표(X, Y)를 정의할 수 있습니다. 구체적으로 각 반복에서 'i' 값은 π/32씩 증가하며, 'i'가 완전한 원을 나타내는 TAU 값을 초과할 때까지 계속됩니다. 반복문 본문은 다음과 같이 작성할 수 있습니다.
let r=75;
let x=sin(i)*r+200;
let y=cos(i)*r+200;
ellipse(x,y,6,6);
X와 Y 값은 극좌표입니다. 왜 200을 더할까요? P5.js의 좌표계 원점은 왼쪽 위 모서리에 있으며, 양의 Y 값은 아래쪽으로 증가하기 때문입니다.
따라서 원을 가운데에 배치하려면 캔버스 너비와 높이의 절반인 200을 더해야 합니다. ellipse(x,y,6,6) 명령을 사용하여 지름이 6픽셀인 원을 그립니다. 다음으로 가운데 영역의 원을 살펴보겠습니다. 원의 중심은 캔버스 중앙에 위치한 한 변의 길이가 280인 정사각형의 변 위에 있습니다. IF 문을 사용하여 원 중심의 위치를 다음과 같이 제한할 수 있습니다.
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;
X 좌표가 320보다 크면 X 좌표를 320으로 설정합니다. Y 좌표에는 제한이 없습니다. 즉, 가장 바깥쪽 원의 Y 좌표는 그대로 유지되고 X 좌표는 모두 320으로 설정됩니다. 그 결과 그림과 같이 빨간색 부분이 녹색 부분으로 이동합니다.
마찬가지로，if(X<80) X=80;
if(Y>320) Y=320;
if(Y<80) Y=80;
3단계，1단계와 2단계의 도형을 선으로 연결하기
이제 X와 Y 값이 가장 안쪽 작은 원의 원주 위에 있고, X와 Y가 가운데 정사각형에 있는 원의 중심을 나타내므로 line 명령을 사용하여 두 지점을 연결할 수 있습니다: line(x,y,X,Y);
4단계，가장 바깥쪽 고리에 작은 원을 그리고 2단계의 원과 직접 연결하기
가장 바깥쪽 원을 가운데로 이동했으므로 이제 가장 바깥쪽 원을 다시 추가해 보겠습니다. 이때 x와 y 값은 r * sin(i)로, r은 cos(i)로 주어집니다. 처음에 r은 78이었지만 이제는 170입니다. x와 y에 값을 할당하면 됩니다:x=sin(i)*r+200; y=cos(i)*r+200; 이제 x와 y는 가장 바깥쪽 작은 원의 중심을 나타냅니다. 원과 선을 그리면 이 간단한 디지털 아트워크가 완성됩니다. 코드는 다음과 같습니다: circle(x,y,6); line(x,y,X,Y);
for 반복문에서 PI의 세분화 값을 조정하면 디지털 아트워크를 더 조밀하거나 더 성기게 만들 수 있습니다.
전체 코드는 다음과 같습니다.
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);
}
}
요약
결론적으로 P5.js로 디지털 아트를 코딩해 본 이번 탐구는 무한한 창의성과 무궁무진한 가능성의 세계를 보여 주었습니다. 코드를 통해 상상력이 작품으로 구현되는 정교한 과정을 되돌아보며, 예술가의 손에 놓인 기술이 지닌 변화의 힘을 다시금 깨닫게 됩니다. 이 여정에서 영감을 얻어, 동료 창작자 여러분도 자신만의 코딩 여정을 시작해 보시기 바랍니다. 우리가 살펴본 도구와 기법을 활용하여 고유한 걸작을 만들어 보세요. 또한 디지털 창작물을 현실 세계로 구현하고자 하는 분들께는 iDraw 펜 플로터 를 사용해 정밀하고 우아하게 작품을 그려 보시기를 진심으로 권합니다. 이를 통해 예술적 완성도를 추구하며 디지털 세계와 물리적 세계 사이의 간극을 메울 수 있습니다.
관련 글 더 보기: