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/
效果如下图：
它的位置是随着鼠标移动的位置进行移动的，圆圈半径是呈三角函数式变换的。