디지털 아트의 세계로 첫발을 내딛다: p5.js로 시작하는 창의적 여정

이번 포스트에서는 웹 기반의 크리에이티브 코딩 라이브러리인 p5.js에 대해 소개하고, 이를 시작하게 된 계기와 기본 개념에 대해 이야기할 것입니다. p5.js가 어떻게 예술가, 디자이너, 교육자, 그리고 초보자들이 시각적인 예술과 인터랙티브한 프로젝트를 쉽게 만들 수 있게 도와주는지 알아보겠습니다.

 

디지털 아트의 세계로 첫발을 내딛다: p5.js로 시작하는 창의적 여정

 

디지털 아트의 세계로 첫발을 내딛다: p5.js로 시작하는 창의적 여정

 

1. p5.js 소개

2. 기본 개념과 예시

3. 참고 자료

 

추천글

위의 목차를 클릭하면 해당 글로 자동 이동 합니다.

 

p5.js 소개

p5.js는 프로세싱(Processing)의 웹 버전으로, 자바스크립트를 사용하여 웹에서 시각적 예술과 인터랙티브한 작업을 손쉽게 만들 수 있도록 설계된 라이브러리입니다. HTML5 캔버스를 기반으로 하여, 그래픽과 애니메이션을 제작하는 데 필요한 다양한 기능을 제공합니다.

 

이 p5.js를 시작하게 된 계기는 이번에 모두의 연구소의 Creative Coding LAB에 들어가게? 됐습니다. 과연 제가 끝까지 잘 할 수 있을까요? 여기서 알려준 책 내용에서 p5.js를 사용하게 되어 이렇게 시작하게 되었습니다. 원래 언리얼로 해보자.. 했지만 그래도 재밌는 경험이 될 것 같았습니다.

 

https://p5js.org/ko/

home | p5.js

 

기본 개념과 예시

p5.js를 사용하면 캔버스 위에 다양한 도형을 그리고, 마우스 이벤트를 처리하며, 애니메이션을 만들 수 있습니다. 예를 들어, createCanvas(400, 400); 함수는 400x400 크기의 캔버스를 생성하고, background(100); 함수는 캔버스의 배경색을 설정합니다.

 

그리고 위 홈페이지에서 에디터도 따로 있기 때문에 간단하게 테스트도 해볼 수 있습니다.

 

기본 구조를 보면 setup()과 draw()로 구성됩니다. setup() 함수는 프로그램이 시작될 때 단 한 번 실행되며, 초기 환경 설정이나 캔버스 크기 정의 등을 위해 사용됩니다. draw() 함수는 setup() 이후에 반복적으로 실행되며, 애니메이션 또는 상호작용이 일어나는 곳입니다. 아두이노의 setup()과 loop()와 비슷하다 생각하면 될 것 같습니다.

 

p5.js의 장점
접근성: JavaScript 기반으로 웹 브라우저에서 바로 실행할 수 있어, 별도의 개발 환경 설치 없이도 쉽게 작업을 시작할 수 있습니다.
교육적 가치: 프로그래밍과 컴퓨터 그래픽스를 처음 접하는 사람들에게도 친숙한 방식으로 접근할 수 있게 해줍니다. 창의적인 프로젝트를 통해 코딩을 배우는 데 매우 유용합니다.
다양성: 시각 예술, 데이터 시각화, 게임 개발 등 다양한 분야에서 활용할 수 있습니다.

 

p5.js의 단점

성능 제한: p5.js는 웹 브라우저에서 실행되는 JavaScript 기반이므로, 복잡한 그래픽 처리나 높은 프레임레이트를 요구하는 대규모 프로젝트의 경우 성능 제한을 느낄 수 있습니다. 특히 3D 그래픽이나 고급 물리 시뮬레이션을 많이 사용하는 경우, 네이티브 애플리케이션에 비해 느릴 수 있습니다.
모바일 환경의 제약: 모바일 디바이스에서는 데스크탑 환경에 비해 처리 능력이 제한적일 수 있고, 터치 인터페이스 상의 상호작용이 다를 수 있습니다. 따라서 모바일 환경에서 p5.js로 제작한 작업을 완벽하게 실행하려면 추가적인 최적화 작업이 필요할 수 있습니다.
학습 곡선: 비록 p5.js가 초보자 친화적이라고는 하지만, 프로그래밍에 익숙하지 않은 사용자에게는 JavaScript의 기본 개념, 그리고 p5.js 자체의 함수와 사용 방법을 익히는 데 시간이 걸릴 수 있습니다. 특히, 복잡한 인터랙티브나 동적 애니메이션을 구현하려면 상당한 노력과 학습이 필요합니다.
브라우저 호환성과 버그: 웹 기반 기술이므로, 다양한 웹 브라우저와 그 버전들 간의 호환성 문제가 발생할 수 있습니다. 특정 브라우저에서만 발생하는 버그나 이슈를 해결하기 위해 추가적인 디버깅과 테스트가 필요할 수 있습니다.
전문적인 개발 도구가 아님: p5.js는 학습 및 창의적 실험에 매우 유용하지만, 전문적인 게임 개발이나 고급 그래픽 디자인 작업에는 다른 전문 도구나 엔진이 더 적합할 수 있습니다. 상업적 수준의 프로젝트나 복잡한 애플리케이션 개발에는 한계가 있을 수 있습니다.

 참고 자료

p5.js 공식 웹사이트는 튜토리얼, 예제, 참조 문서를 제공합니다. 또한, YouTube에는 다양한 p5.js 강의와 워크숍이 있어 초보자도 쉽게 시작할 수 있습니다. 유튜브에 검색만 해도 다양하게 많이 나옵니다.(요즘엔 유튜브에 다 있는것 같아요...)

 

이중에서 제가 보고 있는건 아래의 유튜브입니다. 

기본적인 이론도 잘 알려주시고 p5.js도 잘 알려주십니다.

 

https://www.youtube.com/@TheCodingTrain

The Coding Train

 

 

p5.js는 프로그래밍과 디지털 아트에 관심이 있는 모든 이들에게 열려있는 놀라운 세계입니다. 이 포스트가 여러분이 p5.js와 함께하는 여정을 시작하는 데 도움이 되기를 바랍니다. 창의적인 아이디어를 현실로 만들어보세요!

아래는 이번에 제가 해본 것입니다.

 

마우스로 누르고 드래그하면 그 방향으로 원이 이동합니다.

 

 

 

추천글

 

초보자도 쉽게 따라할 수 있는 웹 기반 GLSL 쉐이더 프로그래밍

초보자도 쉽게 따라할 수 있는 웹 기반 GLSL 쉐이더 프로그래밍