將processing.js作爲JavaScript圖形庫
用這種方式，我們不需要pde啦！It’s very good!
processing.js省略
1207.html
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>My Processing Page</title>
<script type="text/javascript" src="processing.js"></script>
</head>
<body>
<canvas id="glibcanvas"></canvas>
//綁定一個processing實例到指定的canvas畫布
(function(){
var canvas=document.getElementById('glibcanvas');
var pjs=new Processing(canvas);
//定義草圖尺寸、動畫
var value = 0;
pjs.setup=function(){
pjs.size(200,200);
pjs.noloop();
}
//繪圖函數，畫了一個正弦。
pjs.draw=function(){
pjs.noStroke();
pjs.fill(255,75);
pjs.rect(0,0,200,200);
pjs.stroke(100,100,200);
pjs.noFill();
pjs.bezier(0,100, 33,100+value, 66,100+value, 100,100);
pjs.bezier(100,100, 133,100+-value, 166,100+-value, 200,100);
//便捷的交互函數，被鼠標的移動觸發。
pjs.mouseMoved=function(){
value=(pjs.mouseY-100);
pjs.redraw();
}
//重啓草圖
pjs.setup();
}());
</script>
</body>
</html>效果
