이전의 SVG 벡터 그래픽을 위한 P5.js 탐구에 이어, 우리는 이제 새로운 열정과 목적을 가지고 디지털 아트 코딩의 영역으로 나아갑니다. 기술과 예술적 표현의 상호작용에 영감을 받아, iDraw Pen Plotters에 맞춘 SVG 형식의 혁신적인 작품 제작 도구에 대한 수요가 우리의 탐구를 이끌고 있습니다. 코딩 창의성의 옹호자로서, 우리는 디지털 아티스트들이 P5.js의 잠재력을 최대한 활용할 수 있도록 필요한 기술과 지식을 제공하여 상상력을 디지털 캔버스 위의 실체적인 걸작으로 변모시키고자 합니다. 코딩된 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을 더해야 합니다. 지름 6픽셀인 원을 그리기 위해 ellipse(x,y,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 Pen Plotters 제품 사용을 진심으로 추천드립니다. 디지털과 물리적 세계 사이의 간극을 예술적 완성도를 위해 잇는 다리가 되어줄 것입니다.
관련 기사 더 보기: