Processing.js
"오늘의AI위키"의 AI를 통해 더욱 풍부하고 폭넓은 지식 경험을 누리세요.
1. 개요
Processing.js는 웹 페이지에서 Processing 언어를 사용할 수 있게 해주는 JavaScript 라이브러리이다. Processing과 유사한 구문을 사용하며, `setup()` 함수로 초기 속성을 정의하고 `draw()` 함수로 동적 처리를 제어한다. HTML의 `
` 태그 내에 JavaScript 파일 형태로 포함하거나, `| Processing.js - [IT 관련 정보]에 관한 문서 | |
|---|---|
| 일반 정보 | |
 | |
| 장르 | 웹 애플리케이션 프레임워크 |
| 라이선스 | MIT |
| 웹사이트 | Processing.js 공식 웹사이트 |
| 개발 | |
| 최초 릴리스 | 2008년 |
| 최신 버전 | 1.4.8 |
| 최신 릴리스 날짜 | 2014년 3월 25일 |
| 프로그래밍 언어 | 자바스크립트 |
| 크기 | gzip: 61KB 운영용: 209KB 개발용: 754KB |
| 개발자 | 존 레식 Processing.js 팀 |
2. 구문
`setup()` 함수와 `draw()` 함수를 통해 기본적인 속성 정의 및 동적 처리를 제어하며, 기본 구문은 Processing과 거의 일치한다.
2. 1. HTML 통합
Processing.js 라이브러리는 단일 JavaScript 파일 형태로 웹 페이지의 `` 태그 내에 포함될 수 있다.```html
```
`` 태그 내에서 선언되는 canvas 요소의 "data-processing-sources" 속성을 통해 외부 파일(.pde)의 위치를 지정할 수 있다.
```html
```
예를 들어, .pde 확장자를 가진 파일이 Processing 파일로 실행된다.
2. 2. 외부 파일 사용
canvas 요소의 "data-processing-sources" 속성을 통해 외부 파일의 위치를 지정할 수 있다.[1]임의의 확장 기능을 가진 외부 파일을 통해 Processing 코드를 실행할 수 있다. 예를 들어, `.pde` 확장자를 가진 파일이 Processing 파일로 실행된다.[1]
```javascript
/* example.pde */
// setup() 함수의 문장들은
// 프로그램이 시작될 때 한 번 실행됩니다.
void setup()
{
size(200, 200); // 캔버스 크기를 200x200 픽셀로 설정합니다.
stroke(255); // 선 그리기 색상을 단색 흰색으로 설정합니다.
frameRate(30); // draw() 함수를 초당 30번 호출하도록 설정합니다.
}
float y = 100;
// draw() 함수의 문장들은
// 프로그램이 중단될 때까지 실행됩니다. 이 함수는
// frameRate에 따라 초당 여러 번 호출됩니다. 명시적으로
// 속도를 설정하지 않으면 초당 45번입니다.
void draw()
{
background(0); // 배경을 단색 검정으로 설정합니다.
y = y - 1;
if (y < 0) { y = height; }
line(0, y, width, y); // 높이 y에서 수평선을 그립니다.
}
2. 3. 예제 코드 (자바스크립트)
javascript/* example.pde */
// setup() 함수의 문장들은 프로그램이 시작될 때 한 번 실행된다.
void setup()
{
size(200, 200); // 캔버스 크기를 200x200 픽셀로 설정한다.
stroke(255); // 선 그리기 색상을 단색 흰색으로 설정한다.
frameRate(30); // draw() 함수를 초당 30번 호출하도록 설정한다.
}
float y = 100;
// draw() 함수의 문장들은 프로그램이 중단될 때까지 실행된다.
// 이 함수는 frameRate에 따라 초당 여러 번 호출된다.
// 명시적으로 속도를 설정하지 않으면 초당 45번이다.
void draw()
{
background(0); // 배경을 단색 검정으로 설정한다.
y = y - 1;
if (y < 0) { y = height; }
line(0, y, width, y); // 높이 y에서 수평선을 그린다.
}
3. 수학 프로그래밍에서의 활용
Processing.js는 파이겐바움 상수를 도출하는 비선형 로지스틱 맵 표현 등 복잡한 수학적 모델링 및 시각화에도 활용될 수 있다.
3. 1. 로지스틱 맵 표현 (자바스크립트)
파이겐바움 상수가 얻어지는 대표적인 비선형(Non-linear) 의 processing.js를 사용한 로지스틱 맵 표현이다.
아래는 로지스틱 맵의 processing.js를 사용한 자바스크립트 소스 코드이다.
```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);
참조
[1]
웹사이트
Finn the Baby Raccoon
https://www.khanacad[...]
2017-09-12
[2]
웹사이트
테트리스 버전
https://www.khanacad[...]
본 사이트는 AI가 위키백과와 뉴스 기사,정부 간행물,학술 논문등을 바탕으로 정보를 가공하여 제공하는 백과사전형 서비스입니다.
모든 문서는 AI에 의해 자동 생성되며, CC BY-SA 4.0 라이선스에 따라 이용할 수 있습니다.
하지만, 위키백과나 뉴스 기사 자체에 오류, 부정확한 정보, 또는 가짜 뉴스가 포함될 수 있으며, AI는 이러한 내용을 완벽하게 걸러내지 못할 수 있습니다.
따라서 제공되는 정보에 일부 오류나 편향이 있을 수 있으므로, 중요한 정보는 반드시 다른 출처를 통해 교차 검증하시기 바랍니다.
문의하기 : help@durumis.com