{{위키데이터 속성 추적}}
{{소프트웨어 정보
| name                   = Processing.js
| logo                   = Processing Logo Clipped.svg
| author                 = [[John Resig]]
| developer              = Processing.js 팀
| released               = 2008년
| latest release version = 1.4.8
| latest release date    = {{시작 날짜와 나이|2014|3|25}}
| latest preview version =
| latest preview date    =
| programming language   = [[자바스크립트]]
| status                 = 개발 중
| genre                  = [[웹 애플리케이션 프레임워크]]
| license                = [[MIT 라이선스|MIT]]
| website                = {{url|http://processingjs.org}}
| size                   = {{Nowrap|61 [[킬로바이트|KB]] (gzip)}}  / {{Nowrap|209 KB (운영용)}} / {{Nowrap|754 KB (개발용)}}
}}
'''Processing.js'''는 시각화, 이미지 및 대화 형 결과를 만들도록 설계된 프로그래밍 언어인 [[프로세싱 (프로그래밍 언어)|프로세싱]](Processing)이 JavaScript로 [[이식 (컴퓨팅)|포팅]]된 버전이다. 웹 브라우저는 이것을 통해서 [[자바 애플릿|Java 애플릿]]이나 [[어도비 플래시|Flash]] [[플러그인]]을 사용하지 않고도 애니메이션, 비주얼 애플리케이션, 게임 및 기타 그래픽등 풍부한 컨텐츠를 표시 할 수 있다.<ref>[[칸 아카데미]]-[https://www.khanacademy.org/computer-programming/finn-the-baby-raccoon/5268411358838784  Finn the Baby Raccoon]{{웨이백|url=https://www.khanacademy.org/computer-programming/finn-the-baby-raccoon/5268411358838784# |date=20170912191900 }}</ref><ref>[https://www.khanacademy.org/computer-programming/highly-addictive-tetris/6749811916341248 테트리스 버전] (회전 ↑방향키)</ref>

Processing.js는 원래 Processing 개발자와 기존 코드가 웹에서 수정되지 않은 상태로 작동 할 수 있도록하기 위해 만들어졌다.

Processing.js는 [[JavaScript]]를 사용하여 [[HTML]] 캔버스 요소에서 2D 및 3D 콘텐츠를 렌더링하며 이 요소를 구현한 브라우저 ([[파이어폭스]], [[구글 크롬]], [[사파리 (웹 브라우저)|사파리]], [[오페라 (웹 브라우저)|오페라]], <!-- [[인터넷 익스플로러]]의 최신 버전 : IE 11에서테스트 작동하지 않음--> 등)에서 지원된다.

Processing.js의 개발은 [[존 레식]](John Resig)에 의해 시작되어 2008년 첫 번째 릴리스 이후 [[세네카 컬리지]]의 학생들에 의해 진행되었다. 한 팀의 팀이 Processing.js 포팅(porting)를 완성하고 900 개 이상의 버그를 수정하고 12 개의 릴리스를 출시했으며 그 과정에서 활발한 커뮤니티가 만들어졌다. 이 프로젝트는 David Humphrey, Al MacDonald 및 Corban Brook이 이끄는 [[모질라재단]](Mozilla Foundation)과 [[세네카 컬리지]](Seneca College) 간의 파트너십을 통해 수행되었다.


== 수학 프로그래밍에서의 활용 ==
[[파일:LogisticMap processing js001.png|300px]]

[[파이겐바움 상수]]가 얻어지는 대표적인 [[비선형]](Non-linear) <math>f(x)=a-x^2</math>의 processing.js를 사용한 [[로지스틱 사상|로지스틱 맵]] 표현

== 소스 코드 ==
<math>f(x)=a-x^2</math> [[로지스틱 사상|로지스틱 맵]]의 processing.js를 사용한 [[자바스크립트]] 소스 코드

<syntaxhighlight lang="javascript">
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);
</syntaxhighlight>

== 같이 보기 ==
* [[프로세싱 (프로그래밍 언어)|프로세싱]]
* [[JQuery]]

== 참고 ==
* [http://processingjs.org/download/archived.html 공식processing.js 버전 다운로드] {{웨이백|url=http://processingjs.org/download/archived.html |date=20170929072910 }}
* [https://web.archive.org/web/20170914125200/https://www.khanacademy.org/computer-programming/logistic-map/1060730277 로지스틱 맵]

== 각주 ==
{{각주}}

== 외부 링크 ==
* {{공식 웹사이트}}

[[분류:프로그래밍 언어]]
[[분류:자바스크립트로 작성된 자유 소프트웨어]]
[[분류:MIT 라이선스 소프트웨어]]
[[분류:자유 라이브러리]]