Processing.js
| ์์ ์ | John Resig |
|---|---|
| ๊ฐ๋ฐ์ | Processing.js ํ |
| ๋ฐํ์ผ | 2008๋ |
| ์์ ํ ๋ฒ์ | 1.4.8
/ 2014๋
3์ 25์ผ |
| ์ ์ฅ์ | |
| ํ๋ก๊ทธ๋๋ฐ ์ธ์ด | ์๋ฐ์คํฌ๋ฆฝํธ |
| ํฌ๊ธฐ | 61 KB (gzip) / 209 KB (์ด์์ฉ) / 754 KB (๊ฐ๋ฐ์ฉ) |
| ์ข ๋ฅ | ์น ์ ํ๋ฆฌ์ผ์ด์ ํ๋ ์์ํฌ |
| ๋ผ์ด์ ์ค | MIT |
| ์ํ | ๊ฐ๋ฐ ์ค |
| ์น์ฌ์ดํธ | processingjs |
Processing.js๋ ์๊ฐํ, ์ด๋ฏธ์ง ๋ฐ ๋ํ ํ ๊ฒฐ๊ณผ๋ฅผ ๋ง๋ค๋๋ก ์ค๊ณ๋ ํ๋ก๊ทธ๋๋ฐ ์ธ์ด์ธ ํ๋ก์ธ์ฑ(Processing)์ด JavaScript๋ก ํฌํ ๋ ๋ฒ์ ์ด๋ค. ์น ๋ธ๋ผ์ฐ์ ๋ ์ด๊ฒ์ ํตํด์ Java ์ ํ๋ฆฟ์ด๋ Flash ํ๋ฌ๊ทธ์ธ์ ์ฌ์ฉํ์ง ์๊ณ ๋ ์ ๋๋ฉ์ด์ , ๋น์ฃผ์ผ ์ ํ๋ฆฌ์ผ์ด์ , ๊ฒ์ ๋ฐ ๊ธฐํ ๊ทธ๋ํฝ๋ฑ ํ๋ถํ ์ปจํ ์ธ ๋ฅผ ํ์ ํ ์ ์๋ค.[1][2]
Processing.js๋ ์๋ Processing ๊ฐ๋ฐ์์ ๊ธฐ์กด ์ฝ๋๊ฐ ์น์์ ์์ ๋์ง ์์ ์ํ๋ก ์๋ ํ ์ ์๋๋กํ๊ธฐ ์ํด ๋ง๋ค์ด์ก๋ค.
Processing.js๋ JavaScript๋ฅผ ์ฌ์ฉํ์ฌ HTML ์บ๋ฒ์ค ์์์์ 2D ๋ฐ 3D ์ฝํ ์ธ ๋ฅผ ๋ ๋๋งํ๋ฉฐ ์ด ์์๋ฅผ ๊ตฌํํ ๋ธ๋ผ์ฐ์ (ํ์ด์ดํญ์ค, ๊ตฌ๊ธ ํฌ๋กฌ, ์ฌํ๋ฆฌ, ์คํ๋ผ, ๋ฑ)์์ ์ง์๋๋ค.
Processing.js์ ๊ฐ๋ฐ์ ์กด ๋ ์(John Resig)์ ์ํด ์์๋์ด 2008๋ ์ฒซ ๋ฒ์งธ ๋ฆด๋ฆฌ์ค ์ดํ ์ธ๋ค์นด ์ปฌ๋ฆฌ์ง์ ํ์๋ค์ ์ํด ์งํ๋์๋ค. ํ ํ์ ํ์ด Processing.js ํฌํ (porting)๋ฅผ ์์ฑํ๊ณ 900 ๊ฐ ์ด์์ ๋ฒ๊ทธ๋ฅผ ์์ ํ๊ณ 12 ๊ฐ์ ๋ฆด๋ฆฌ์ค๋ฅผ ์ถ์ํ์ผ๋ฉฐ ๊ทธ ๊ณผ์ ์์ ํ๋ฐํ ์ปค๋ฎค๋ํฐ๊ฐ ๋ง๋ค์ด์ก๋ค. ์ด ํ๋ก์ ํธ๋ David Humphrey, Al MacDonald ๋ฐ Corban Brook์ด ์ด๋๋ ๋ชจ์ง๋ผ์ฌ๋จ(Mozilla Foundation)๊ณผ ์ธ๋ค์นด ์ปฌ๋ฆฌ์ง(Seneca College) ๊ฐ์ ํํธ๋์ญ์ ํตํด ์ํ๋์๋ค.
์ํ ํ๋ก๊ทธ๋๋ฐ์์์ ํ์ฉ
[ํธ์ง]ํ์ด๊ฒ๋ฐ์ ์์๊ฐ ์ป์ด์ง๋ ๋ํ์ ์ธ ๋น์ ํ(Non-linear) ์ processing.js๋ฅผ ์ฌ์ฉํ ๋ก์ง์คํฑ ๋งต ํํ
์์ค ์ฝ๋
[ํธ์ง]๋ก์ง์คํฑ ๋งต์ processing.js๋ฅผ ์ฌ์ฉํ ์๋ฐ์คํฌ๋ฆฝํธ ์์ค ์ฝ๋
var canvas = document.getElementById("canvas");
var sketchProc = function(processingInstance) {
with (processingInstance) {
size(400, 400);
frameRate(30);
background(200,100,100);
fill(255,255,255);
for (var a=0; a<10; a+=0.001) {
var x = 0.1;
for (var n=0; n<1000; n++) {
x = a - (x*x);
if (n > 900) {
point(a*200,200-x*100);
}
}
}
}
};
var processingInstance = new Processing(canvas, sketchProc);
๊ฐ์ด ๋ณด๊ธฐ
[ํธ์ง]์ฐธ๊ณ
[ํธ์ง]๊ฐ์ฃผ
[ํธ์ง]- โ ์นธ ์์นด๋ฐ๋ฏธ-Finn the Baby Raccoon๋ณด๊ด๋จ 2017-09-12 - ์จ์ด๋ฐฑ ๋จธ์
- โ ํ ํธ๋ฆฌ์ค ๋ฒ์ (ํ์ โ๋ฐฉํฅํค)
์ธ๋ถ ๋งํฌ
[ํธ์ง]- Processing.js
- ๊ณต์ ์น์ฌ์ดํธ