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即可。
(繼續閱讀...)

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

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

▲top
今天改寫了之前寫得縮圖程式，之前寫的縮圖程式會將小於特定寬度的圖片重新取樣成特定尺寸，這樣的做法會導致小圖片的失真，所以我改寫了這個過程，將小於特定尺寸的圖片透過補色，變成一張符合特定尺寸的圖：
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) 人氣()

▲top
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());
(繼續閱讀...)

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

▲top
物件導向語言旨意在於模擬現實世界中人類的思考模式（雖然很多人不以為然），每個物件都會有方法與屬性，藉此賦予一個物件的職責，操縱物件工作，可說是傳達一個message給物件，物件收到訊息後便可進行對應的動作，再視情況把訊息傳回給呼叫者（caller/invoker）。
JavaScript中，如果要將類別定義方法，可以寫成：
var Class = function () {
var klass = function () {
//In constructor, any referernce to the instance method, must prefix with "this."
this.init.apply(this, arguments);
};
klass.prototype.init = function (attrs) {
for(var attr in attrs){
this[attr] = attrs[attr];
}
};
//short cuts:
klass.fn = klass.prototype;
klass.fn.parent = klass;

//extend the Class-level properties:
klass.extend = function (obj) {
//If the parameter contains extended(), invoke it as callback
var extended = typeof obj.extended === 'function' ? obj.extended : null;
for (var attr in obj) {
klass[attr] = obj;
}
if (extended !== null) {
extend(klass);
}
};

//extend the instance-level properties:
klass.include = function (obj) {
//If the parameter contains included, invoke it as callback
var included = typeof obj.included === 'function' ? obj.included : null;
for (var attr in obj) {
klass.fn[attr] = obj[attr];
}
if (included !== null) {
included(klass);
}
};

return klass;
};

var Person = new Class();
Person.include({
name: '',
eat: function () {
console.info('Eat food, ' + this.name + '!');
}
});
var bob = new Person();
bob.name = 'Bob';
var mary = new Person();
mary.name = 'Mary';

bob.eat();
mary.eat();
(繼續閱讀...)

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

▲top
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) 人氣()

▲top
1
Blog Stats
⚠️

成人內容提醒

本部落格內容僅限年滿十八歲者瀏覽。
若您未滿十八歲，請立即離開。

已滿十八歲者，亦請勿將內容提供給未成年人士。