##🖼️ 프로젝트 소개
이 프로젝트는 사운드디자인 수업에서 p5.js를 활용하여 배경 이미지를 불러오고, 다양한 색상의 삼각형 도형을 배치해 그림의 색감을 추상적으로 표현합니다.
단순한 도형만으로도 원본 이미지의 분위기를 재해석할 수 있는 방법을 보여줍니다.
##📝 주요 기능
- preload() 함수에서 이미지를 미리 로드하여 캔버스에 표시합니다.
- 여러 개의 삼각형을 다양한 좌표와 색상으로 배치해 원본 이미지의 색상 영역을 추상적으로 재현합니다.
- console.log(mouseX, mouseY);를 통해 마우스 커서 위치를 실시간으로 확인하며 도형 배치에 활용할 수 있습니다.
##✨ 활용 포인트
-
이미지의 색상 영역을 삼각형 등 도형으로 분할하여 추상적인 아트웍 제작
-
좌표와 색상값을 조정해 원하는 스타일로 커스터마이징 가능
-
마우스 좌표 출력을 통해 도형의 위치를 직관적으로 조절
##🚀 시작 방법
-
p5.js 라이브러리와 함께 sketch.js, jj.png 파일을 프로젝트 폴더에 넣으세요.
-
index.html에서 p5.js와 sketch.js를 불러옵니다.
-
코드를 실행하면 배경 위에 추상적인 삼각형 아트웍이 나타납니다.
##🧑💻 기여 방법
-
삼각형의 좌표나 색상을 자유롭게 수정하여 다양한 스타일을 시도해보세요.
-
다른 도형(사각형, 원 등)으로도 확장 가능합니다.