標題: Processing.js：製作動畫不再是Flash的專利 [打印本頁]
作者: aitch 時間: 2013-5-17 16:49 標題: Processing.js：製作動畫不再是Flash的專利
Processing一直都是設計師用來制作互動作品的平台之一，過往都是搭配Arduino來與實體感測器結合，設計的初衷就是小而簡單，並且搭配了穩定的2D/3D功能，讓設計師也可以製作出絢麗的動畫效果，現在Processing的功能可以搬移到網頁上了，搭配Processing.js，就可以使用Processing提供的API來製作出以往Processing平台上可以達成的效果，不過是HTML5限定喔。
以下是示範程式碼：
<!DOCTYPE html>
<html>
<head>
<title>Processing.js Test</title>
<script src="processing.min.js"></script>
</head>
<body>
<h1>Processing.js</h1>
<canvas id="HelloProcess"></canvas>
<script type="text/javascript">
function sketchProc(processing) {
processing.println('Hello World');
// Override draw function, by default it will be called 60 times per second
processing.draw = function() {
// determine center and max clock arm length
var centerX = processing.width / 2, centerY = processing.height / 2;
var maxArmLength = Math.min(centerX, centerY);
function drawArm(position, lengthScale, weight) {
processing.strokeWeight(weight);
processing.line(centerX, centerY,
centerX + Math.sin(position * 2 * Math.PI) * lengthScale * maxArmLength,
centerY - Math.cos(position * 2 * Math.PI) * lengthScale * maxArmLength);
}
// erase background
processing.background(224);
var now = new Date();
// Moving hours arm by small increments
var hoursPosition = (now.getHours() % 12 + now.getMinutes() / 60) / 12;
drawArm(hoursPosition, 0.5, 5);
// Moving minutes arm by small increments
var minutesPosition = (now.getMinutes() + now.getSeconds() / 60) / 60;
drawArm(minutesPosition, 0.80, 3);
// Moving hour arm by second increments
var secondsPosition = now.getSeconds() / 60;
drawArm(secondsPosition, 0.90, 1);
};
}
var canvas = document.getElementById('HelloProcess');
var prsObj = new Processing(canvas, sketchProc);
</script>
</body>
</html>canvas必須作為Processing的畫板使用，之後要建立一個Processing的物件，而Processing會透過draw函式以60 fps的速度描繪圖形，所有的動畫就是寫在這裡，要呼叫Processing的API時就只要使用processing即可。
| 歡迎光臨 jsGears.com 技術論壇 - AJAX, JavaScript, jQuery, 網站開發, 前端效能優化 (http://jsgears.com/) |
|