제목
카테고리
프로그래밍/소프트웨어 개발
서브카테고리
웹 개발
대상자
- 초보자(코딩 및 디자인 기초 지식이 있는 사람)
- 난이도: 초급 (기초 HTML/JavaScript 지식 필요)
핵심 요약
- JavaScript와 HTML Canvas를 활용한 generative art 생성 방법
fillRect
,arc
,requestAnimationFrame
등의 Canvas API 사용법- 수학 함수(
sin
,cos
)와 랜덤성 활용으로 유기적인 패턴 생성 - p5.js 라이브러리로 개발 복잡도 감소
섹션별 세부 요약
1. Setting Up the Playground
- HTML과 JavaScript 파일을 연결하여 캔버스 초기화
ctx.fillRect
,ctx.arc
등의 메서드로 도형 그리기fillStyle
과strokeStyle
로 색상 설정- 간단한 루프(
for
문)로 반복 패턴 생성 (예: 격자형 원 배열)
2. Adding Math for Organic Patterns
Math.sin()
과Math.cos()
를 사용해 파동 형태 생성requestAnimationFrame()
으로 애니메이션 구현- 시간에 따른 위치/색상 변화로 동적인 시각 효과 생성
3. Playground Ideas for Exploration
- 극좌표 기반의 나선 패턴
- 원형 패킹 알고리즘
- 마우스 이동에 반응하는 색상 변화
- 랜덤 워크 및 노이즈 기반 이동
- 군집 행동(예: 생태계 시뮬레이션)
4. p5.js 라이브러리 활용
setup()
과draw()
함수로 개발 복잡도 감소createCanvas()
로 캔버스 생성,ellipse()
로 도형 그리기canvas.toDataURL()
로 작품 저장 및 공유
결론
- p5.js를 사용해 generative art 개발을 쉽게 시작
requestAnimationFrame()
으로 애니메이션 구현- 작품을 GitHub 또는 ArtBlocks 등 플랫폼에 공유하여 피드백 받기
- 수학 함수와 랜덤성 조합으로 창의적 시각 효과 생성