processing (P5)是一種可視編程語言，是繪圖所使用的簡易的JAVA API。
processing.js能夠將processing代碼轉換爲javascript代碼從而在瀏覽器中使用，以canvas作爲畫布，並在畫布中聲明草圖文件（.pde）。
1 <script src="processing-1.3.6.min.js"></script>
2 <canvas data-processing-sources="hello-web.pde"></canvas>當加載網頁時，它會被解析、轉換、並在瀏覽器上運行草圖。
因此，我們學習processing.js，說白了就是學習processing語言。
先做簡單實驗，運行一個helloworld。
1.html
<!DOCTYPE html>
<html>
<head>
<title>hello web -processing.js Test</title>
<meta charset="utf-8">
<style>
</style>
</head>
<body>
<h1>Processing.js Test</h1>
<p>This is my first Processing.js web-based sketch:</p>
<script src="processing.js"></script>
<canvas data-processing-sources="hello-web.pde"></canvas>
</body>
</html>2.hello-web.pde
// 全局變量
float radius = 50.0;
int X, Y;
int nX, nY;
int delay = 16;
// 初始化Processing畫布
void setup(){
size( 500, 500 );//畫布尺寸
strokeWeight( 10 );
frameRate( 15 );
X = width / 2;//初始位置
Y = width / 2;
nX = X;
nY = Y;
}
// 畫圖
void draw(){
radius = radius + sin( frameCount / 4 );
// 追蹤新的座標位置
X+=(nX-X)/delay;
Y+=(nY-Y)/delay;
// 背景色
background( 100 );
// 圓圈色
fill( 0, 121, 184 );
// 圓圈邊框色
stroke(255);
// 圓圈
ellipse( X, Y, radius, radius );
}
// 設置圓圈的下一位置
void mouseMoved(){
nX = mouseX;
nY = mouseY;
}3.processing.js
在此下載http://processingjs.org/download/
效果如下圖：
它的位置是隨着鼠標移動的位置進行移動的，圓圈半徑是呈三角函數式變換的。