Skip to content

Latest commit

ย 

History

History
37 lines (24 loc) ยท 1.21 KB

File metadata and controls

37 lines (24 loc) ยท 1.21 KB

Creative Coding

์›น ๋ธŒ๋ผ์šฐ์ €์—์„œ ์‹คํ–‰๋˜๋Š” ๋‹ค์–‘ํ•œ ๋ฌผ๋ฆฌ ํšจ๊ณผ์™€ ์‹œ๋ฎฌ๋ ˆ์ด์…˜์„ HTML5 Canvas์™€ JavaScript๋กœ ๊ตฌํ˜„ํ•œ ํ”„๋กœ์ ํŠธ ์ž…๋‹ˆ๋‹ค.

ํ”„๋กœ์ ํŠธ ์†Œ๊ฐœ

Creative Coding์€ ๋ฌผ๋ฆฌ ํšจ๊ณผ๋ฅผ ์‹œ๊ฐ์ ์œผ๋กœ ๊ตฌํ˜„ํ•œ ์›น ๊ธฐ๋ฐ˜ ์‹œ๋ฎฌ๋ ˆ์ด์…˜ ๋ชจ์Œ์ž…๋‹ˆ๋‹ค. ์‹œ๋ฎฌ๋ ˆ์ด์…˜ ํšจ๊ณผ์™€ ์‚ฌ์šฉ์ž๊ฐ€ ์ƒํ˜ธ์ž‘์šฉํ•  ์ˆ˜ ์žˆ๋Š” ํ™˜๊ฒฝ์„ ์ œ๊ณตํ•ฉ๋‹ˆ๋‹ค.

์ฃผ์š” ๊ธฐ๋Šฅ

  • ๋ฌผ๋ฆฌ ์‹œ๋ฎฌ๋ ˆ์ด์…˜: ์ค‘๋ ฅ, ์ถฉ๋Œ, ํŒŒํ‹ฐํด ์‹œ์Šคํ…œ
  • ์ธํ„ฐ๋ ‰ํ‹ฐ๋ธŒ ์š”์†Œ: ๋งˆ์šฐ์Šค/ํ„ฐ์น˜ ์ž…๋ ฅ์œผ๋กœ ์‹œ๋ฎฌ๋ ˆ์ด์…˜๊ณผ ์‹ค์‹œ๊ฐ„ ์ƒํ˜ธ์ž‘์šฉ
  • ๋ฐ˜์‘ํ˜• ๋””์ž์ธ: ๋‹ค์–‘ํ•œ ํ™”๋ฉด ํฌ๊ธฐ์— ๋งž์ถฐ ์ตœ์ ํ™”๋œ ๊ฒฝํ—˜ ์ œ๊ณต

๊ธฐ์ˆ  ์Šคํƒ

  • HTML5 Canvas: ๊ทธ๋ž˜ํ”ฝ ๋ Œ๋”๋ง ๋ฐ ์• ๋‹ˆ๋ฉ”์ด์…˜ ๊ตฌํ˜„
  • JavaScript: ๋ฌผ๋ฆฌ ๋ฒ•์น™ ๊ณ„์‚ฐ ๋ฐ ์‹œ๋ฎฌ๋ ˆ์ด์…˜ ๋กœ์ง ๊ตฌํ˜„
  • CSS3: ์‚ฌ์šฉ์ž ์ธํ„ฐํŽ˜์ด์Šค ์Šคํƒ€์ผ๋ง
  • requestAnimationFrame: ์ตœ์ ํ™”๋œ ์• ๋‹ˆ๋ฉ”์ด์…˜ ๋ฃจํ”„ ๊ตฌํ˜„

์ „์ œ ์กฐ๊ฑด

  • Node.js 18.x or higher

์„ค์น˜

git clone https://github.com/enkoding1/creative-coding
cd creative-coding
npm install
npm run dev

๊ฐœ๋ฐœ ๋ฐฐ๊ฒฝ

HTML5 Canvas์™€ JavaScript์˜ ์œ ์—ฐ์„ฑ์„ ํ™œ์šฉํ•˜์—ฌ ์‹œ๊ฐ์ ์œผ๋กœ ๋งค๋ ฅ์ ์ธ ์‹œ๋ฎฌ๋ ˆ์ด์…˜์„ ๋งŒ๋“ ๋Š” ๊ฒƒ์ด ๋ชฉํ‘œ์˜€์Šต๋‹ˆ๋‹ค.