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即可。