目前分類:未分類文章 (11)

瀏覽方式: 標題列表 簡短摘要

又到一年度的尾聲~

安德最重要的大型活動"年度會議"上場了!!!

odot 發表在 痞客邦 留言(0) 人氣()

102.9月~

 

odot 發表在 痞客邦 留言(0) 人氣()

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

以下是示範程式碼:

鍾協良 發表在 痞客邦 留言(0) 人氣()

寫程式的時候常常會需要用到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());

鍾協良 發表在 痞客邦 留言(0) 人氣()

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

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);
    }

 

鍾協良 發表在 痞客邦 留言(0) 人氣()

JavaScript needs a standard way to include other modules and for those modules to live in discreet namespaces. There are easy ways to do namespaces, but there’s no standard programmatic way to load a module (once!). This is really important, because server side apps can include a lot of code and will likely mix and match parts that meet those standard interfaces.

Kevin Dangoor, What Server Side JavaScript needs

鍾協良 發表在 痞客邦 留言(0) 人氣()

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)。這裡牽扯到兩項議題:

鍾協良 發表在 痞客邦 留言(0) 人氣()

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

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

鍾協良 發表在 痞客邦 留言(0) 人氣()

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

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

鍾協良 發表在 痞客邦 留言(0) 人氣()

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();
 

鍾協良 發表在 痞客邦 留言(0) 人氣()

上一集的Go Kart行,在非常歡樂的氣氛引導下,
出到了第二集...(是你太廢話了吧莊組長= =)

菁菁 發表在 痞客邦 留言(0) 人氣()