Processing.js

Processing.js

원저자	John Resig
개발자	Processing.js 팀
발표일	2008년
안정화 버전	1.4.8 / 2014년 3월 25일(10년 전)(2014-03-25)
저장소	github.com/processing-js/processing-js
프로그래밍 언어	자바스크립트
크기	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) ${\displaystyle f(x)=a-x^{2}}$의 processing.js를 사용한 로지스틱 맵 표현

${\displaystyle f(x)=a-x^{2}}$ 로지스틱 맵의 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);

• 프로세싱
• JQuery

• 공식processing.js 버전 다운로드 Archived 2017년 9월 29일 - 웨이백 머신
• 로지스틱 맵

• Processing.js - 공식 웹사이트