Aitch的部落格

Processing一直都是設計師用來制作互動作品的平台之一，過往都是搭配Arduino來與實體感測器結合，設計的初衷就是小而簡單，並且搭配了穩定的2D/3D功能，讓設計師也可以製作出絢麗的動畫效果，現在Processing的功能可以搬移到網頁上了，搭配Processing.js，就可以使用Processing提供的API來製作出以往Processing平台上可以達成的效果，不過是HTML5限定喔。

以下是示範程式碼：

寫程式的時候常常會需要用到GUID，JavaScript有一種很簡易的產生方式：

Math.guid = function(){
    return 'xxxxxxxx-xxxx-0xxx-yxyx-xxxxxxxxxxxx'.replace(/[xy]/g, function(c){
        var string = Math.random()*16|0, v = c === 'x' ? string : (string &0x3|0x8);
        return string.toString(16);
    }).toUpperCase();
}
console.info(Math.guid());

今天改寫了之前寫得縮圖程式，之前寫的縮圖程式會將小於特定寬度的圖片重新取樣成特定尺寸，這樣的做法會導致小圖片的失真，所以我改寫了這個過程，將小於特定尺寸的圖片透過補色，變成一張符合特定尺寸的圖：

public function resizeImg($img, $width = 300, $height = 300, $newFilename = '', $maxImgWidth = 800, $maxImgHeight=800, $bgColor=null) {
        
        $bgColor = $bgColor === null || !is_array($bgColor) ? array('r'=>255, 'g'=>255, 'b'=>255) : $bgColor;

        switch (strtolower($img['type'])) {
            case 'image/jpg':
            case 'image/jpeg':
            case 'image/pjpeg':
                $image = imagecreatefromjpeg($img['tmp_name']);
                break;
            case 'image/png':
                $image = imagecreatefrompng($img['tmp_name']);
                break;
            case 'image/gif':
                $image = imagecreatefromgif($img['tmp_name']);
                break;
            default:
                throw new Exception('Unsupported type: ' . $img['type']);
        }

        // Target dimensions
        $max_width = $width;
        $max_height = $height;

        // Get current dimensions
        $old_width = imagesx($image);
        $old_height = imagesy($image);

        // Calculate the scaling we need to do to fit the image inside our frame
        $scale = min($max_width / $old_width, $max_height / $old_height);

        $new_width = ceil($scale * $old_width);
        $new_height = ceil($scale * $old_height);
            
        // Create new empty image
        $new = imagecreatetruecolor($new_width, $new_height);

        // Get the new dimensions
        if($old_width >= $maxImgWidth){
            imagecopyresampled($new, $image, 0, 0, 0, 0, $new_width, $new_height, $old_width, $old_height);
        }else{
            $new_width = $maxImgWidth;
            $new_height = ($maxImgHeight >= $old_height ? $maxImgHeight : $old_height);
            $new = imagecreatetruecolor($new_width, $new_height);
            $backgroundColor = imagecolorallocate($new, $bgColor['r'], $bgColor['g'], $bgColor['b']);
            imagefill($new, 0, 0, $backgroundColor);
            $centerX = (($new_width - $old_width)   / 2);
            $centerY = (($new_height - $old_height) / 2);
            $centerY = $centerY + $old_height >= $new_height ? 0 : $centerY;
            imagecopy($new, $image, $centerX, $centerY, 0, 0, $old_width, $old_height);
        }
        

        switch (strtolower($img['type'])) {
            case 'image/jpg':
            case 'image/jpeg':
            case 'image/pjpeg':
                $optImg = imagejpeg($new, $newFilename, 100);
                break;
            case 'image/png':
                $optImg = imagepng($new, $newFilename, 0, PNG_ALL_FILTERS);
                break;
            case 'image/gif':
                $optImg = imagegif($new, $newFilename);
                break;
        }

        imagedestroy($image);
        imagedestroy($new);
    }

JavaScript的繼承是透過原型鏈（prototype chain）的方式達成，所有的物件都是繼承自Object，包括代表函式的Function也是。當取用特定物件的屬性時，會先從物件的範圍開始搜尋，如果沒有，則會搜尋prototype，若沒有繼承任何類別，則prototype會指向Object，再從Object的範圍裡搜尋。以下程式定義了Person做為父類別，而Man與Woman都是Person的子類別：

var Person = function(){
    this.name   = 'Person';
    this.gender = 'Unknown';
};
Person.prototype.getName = function(){
    return this.name;
};
Person.prototype.getGender = function(){
    console.info(this);
    return 'Person:'+this.gender;
};
Person.prototype.getDNA = function(){
    return 'DNA';
};

var Man = function(){};
Man.prototype = new Person();
Man.prototype.getGender = function(){
    return 'Male';
};

var Woman = function(){};
Woman.prototype = new Person();
Woman.prototype.getGender = function(){
    return 'Female';
};

var joe = new Man();
joe.name = 'Joe';
console.info(joe.getName(), joe.getGender());
console.info(joe.getDNA());
console.info(joe.__proto__.__proto__.getGender.apply(joe));
console.info(joe.__proto__.__proto__.getGender());

第一行console.info會顯示出：Joe Male、第二行會顯示：DNA，這都在預期之內，但是比較會令人困惑的是在最後兩行console.info，其中第三行會顯示：Person:Unknown，也就是取用Person的屬性與方法，但第四行卻會顯示：Person:undefined，這是因為這兩個函式執行的範圍（scope）不一樣，第三行的範圍是joe這個物件，而第四行的範圍則是Object（若使用jsFiddle則會是window）。這裡牽扯到兩項議題：

物件導向語言旨意在於模擬現實世界中人類的思考模式（雖然很多人不以為然），每個物件都會有方法與屬性，藉此賦予一個物件的職責，操縱物件工作，可說是傳達一個message給物件，物件收到訊息後便可進行對應的動作，再視情況把訊息傳回給呼叫者（caller/invoker）。

JavaScript中，如果要將類別定義方法，可以寫成：

JavaScript不同於一般的物件導向語言，語法本身採用的是原型繼承（prototype）的方式在實踐物件導向機制的，如果要模仿一般物件導向語言，可以這樣做：

var Class = function () {
    var klass = function () {
        //this this refers to any caller invokes for instanclize, in this case, man
        this.init.apply(this, arguments);
    };
    klass.prototype.init = function () {
        console.info('Default Init()');
    };
    return klass;
};
 
//Create a new Class
var Person = new Class();
var man = new Person();