이전 P5.js를 활용한 SVG 벡터 그래픽 탐험에 이어, 우리는 디지털 아트 코딩의 영역으로 새롭게 도전합니다. 기술과 예술적 표현의 상호작용에 영감을 받아, 우리의 탐험은 iDraw 펜 플로터용 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을 더합니다. 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;
예를 들어, 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(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 펜 플로터 - 사용을 강력히 추천드립니다. 디지털과 물리적 세계를 연결하며 예술적 완성을 추구할 수 있습니다.
관련 기사 더 보기: