๋ณธ๋ฌธ์œผ๋กœ ์ด๋™

Processing.js

์œ„ํ‚ค๋ฐฑ๊ณผ, ์šฐ๋ฆฌ ๋ชจ๋‘์˜ ๋ฐฑ๊ณผ์‚ฌ์ „.
Processing.js
์›์ €์žJohn Resig
๊ฐœ๋ฐœ์žProcessing.js ํŒ€
๋ฐœํ‘œ์ผ2008๋…„
์•ˆ์ •ํ™” ๋ฒ„์ „
1.4.8 / 2014๋…„ 3์›” 25์ผ(12๋…„ ์ „)(2014-03-25)
์ €์žฅ์†Œ
ํ”„๋กœ๊ทธ๋ž˜๋ฐ ์–ธ์–ด์ž๋ฐ”์Šคํฌ๋ฆฝํŠธ
ํฌ๊ธฐ61 KB (gzip) / 209 KB (์šด์˜์šฉ) / 754 KB (๊ฐœ๋ฐœ์šฉ)
์ข…๋ฅ˜์›น ์• ํ”Œ๋ฆฌ์ผ€์ด์…˜ ํ”„๋ ˆ์ž„์›Œํฌ
๋ผ์ด์„ ์ŠคMIT
์ƒํƒœ๊ฐœ๋ฐœ ์ค‘
์›น์‚ฌ์ดํŠธprocessingjs.org

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) f(x)=aโˆ’x2์˜ processing.js๋ฅผ ์‚ฌ์šฉํ•œ ๋กœ์ง€์Šคํ‹ฑ ๋งต ํ‘œํ˜„

์†Œ์Šค ์ฝ”๋“œ

[ํŽธ์ง‘]

f(x)=aโˆ’x2 ๋กœ์ง€์Šคํ‹ฑ ๋งต์˜ 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);

๊ฐ™์ด ๋ณด๊ธฐ

[ํŽธ์ง‘]

์ฐธ๊ณ 

[ํŽธ์ง‘]

๊ฐ์ฃผ

[ํŽธ์ง‘]

์™ธ๋ถ€ ๋งํฌ

[ํŽธ์ง‘]
  • Processing.js ์œ„ํ‚ค๋ฐ์ดํ„ฐ์—์„œ ํŽธ์ง‘ํ•˜๊ธฐ - ๊ณต์‹ ์›น์‚ฌ์ดํŠธ