享受視覺,

享受音樂,

泡杯咖啡,

再來細細品嘗每一篇文章不是很棒的一件事嗎 ?

請移到新部落格喔~ zzz

2009年6月26日 星期五

[作品] Form


網狀粒子 (grid particle) 在電影特效常可以看到,
通常可以拿來做火焰 . 飄揚的粉狀物或煙 . 流體 ... 等等特效。即時運算好像還蠻吃效能的,在 AE 都會先等圖算出來再跑。

take a look (demo)
click the mouse to change the effect!

2009年6月24日 星期三

[作品] MathParticle 幾何光粒子

利用數學運算製作光粒子發散效果。滑鼠點擊畫面切換不同發散方式 ~

作品欣賞 Demo
原始檔下載 Source

(原始檔可任意修改散布,希望使用本範例在網路發表時能標明原著網址)

2009年6月23日 星期二

[作品] Stroke3D 穿梭線條




酷炫的藍光 Stroke3D 穿梭在 3d Space。


作品欣賞 Demo
原始檔下載 Source (回覆是PO文的動力 : p)

(原始檔可任意修改散布,希望使用本範例在網路發表時能標明原著網址)

2009年6月22日 星期一

[作品] Interweave 交織


台灣數位與科技藝術的發展,程式運算的藝術作品如雨後村筍般快速成長。本作品由 AS3 優秀的點陣運算處理能力,加上滑鼠互動操作,在螢幕上穿針引線,動態交織層層薄紗,呈現一種情境互動的新體驗,故命名為交織。

作品欣賞 Demo
原始檔下載 Source
(原始檔可任意修改散布,希望使用本範例在網路發表時能標明原著網址)

P.S.如果用本程式繪製不錯的圖歡迎告知筆者,我會將您的作品連結整理放上,記得告知作品名稱喔:p





[作品] HDRLight 高動態範圍光源特效

HDR 光影的表現方式非常流行,不管是在攝影,影片後製,甚至很多遊戲都會用到它。DirectX 有相關範例可以參考,有興趣的人可以摸摸 DirectX。

作品欣賞 Demo
原始檔下載 Source
貼圖下載 (MS photo) Texture

(原始檔可任意修改散布,希望使用本範例在網路發表時能標明原著網址)

2009年6月21日 星期日

[教學] Moka3DSParser 修正 .3ds 更換材質問題

pv3d 有兩個知名外掛
是將做好的3d模型繪出
as3geomexporter -> (.as)
xml3dsmaxexporter -> (.xml)
這2個外掛都是同一個作者撰寫的而且非常好用。

除此之外,內建 max3ds 類別也很好用,不過讀進來的模型材質竟然不能存取,讓人覺得是不是有bug。 我已經將此 bug 抓出來並修正為。
MokaMax3ds.as (修正後類別)
原始檔下載 Source (殘影製作請看前面文章有解說,恕不詳述)
模型下載 (torus.3ds)

(原始檔可任意修改散布,希望使用本範例在網路發表時能標明原著網址)





torus.material 與 torus.geometry 存取會出錯
MokaMax3ds.as 多了 getModel 方法取得模型資料
torus.getModel().material = new GouraudMaterial(new PointLight3D);
torus.getModel().geometry
大家可以 trytry 看

2009年6月20日 星期六

[閒聊] Mr. Mic

左圖是大學同學 Krenz (人設) 與我共同製作的海報。想當初大學時新一代展的畢業製作作品 Mr.Mic 真的很有趣,我負責遊戲程式撰寫與視覺整合,Krenz 負責遊戲人物繪製與場景設計,另一位同學老白負責大型機台外觀製作。(遊戲用 Adobe Director 來製作)

Mr.Mic 是以無厘頭的故事為背景,透過麥克風互動輸入裝置去玩的一個遊戲。舉例來說,圖案左邊的英雄Mr. Mic 在遊戲第一個關卡透過對嘴呼氣方式幫助便男排便,使用者扮演英雄角色,實體操作上透過對麥克風大喊或呼氣的方式讓遊戲中便男肚子的宿便淨化排出。在控制介面上使用卡拉 OK 麥克風造型,內藏小麥克風收音與數位筆,使用者除了一邊吶喊之外,另外必須用數位筆在數位板上指向要選的目標大便。碩班學長提到:『整體輸出入裝置被整合成一台類似大頭貼拍照器的大型機台,不仔細看還真的以為這是去哪租來的遊戲機,Mr. Mic 這樣的遊戲我想程式應該是利用麥克風音量到某個值的時候,讓遊戲去做一個回饋,相當有巧思。』
雖然沒辦法講整個機台搬到網路上讓大家試試遊戲,但是給大家有個創作新概念,透過麥克風作互動還有很多發揮的空間,像是吹泡泡,音量比較等等。

[作品] LightRender 光源渲染模擬

PV3D 光源模擬有兩種 phong shader & gouraud shader 便宜的運算模擬 。除此之外另外我實做了不同的光源渲染的模擬實驗,成果還算不錯。

作品欣賞 Demo
原始檔下載 Source
相關參考教學 Tutorial

(原始檔可任意修改散布,希望使用本範例在網路發表時能標明原著網址)

2009年6月19日 星期五

[作品] MaterialBlendEffect 混合材質展示

compositeMaterial 可以做複合材質,我還想到另一種方式,除了可以達到一樣的效果,甚至可以做出更多的材質合成變化。大家有沒有想過 photoshop 圖層跟圖層間可以做 blend 效果,譬如說上面圖層對下面圖層作 overlay,即可做到效果疊加。有這個概念後,同樣的方式在 flash 中也可以實踐,這可以讓物件材質擺脫 pv3d 幾種材質的限制 : )

作品欣賞 Demo
原始檔下載 Source

(原始檔可任意修改散布,希望使用本範例在網路發表時能標明原著網址)

[作品] PixelPlay 玩轉 Pixel

玩 Pixel3D 步驟稍微複雜,原始檔內有說明可以參考。Pixel3D 有 x , y , z 座標可以控制,因此效果延伸上可以增加物理效果或粒子系統效果 : )
(因緣際會下與 milkmidi AS 高手談論 PixelsRank問題)

作品欣賞 Demo
原始檔下載 Source
貼圖下載 Texture

(原始檔可任意修改散布,希望使用本範例在網路發表時能標明原著網址)


如果各位還記得神鬼傳奇的沙塵風暴形成的臉嗎?
若是每個 pixel 當作粒子發射器,
說不定可以達到一樣的效果喔~ : )



[作品] PerlinNoise3D

PerlinNoise3D 是利用 bimapdata 的方法先建立灰階 Perlin 圖片,再以各個 pixel 灰階值套用在平面的各個頂點上。很適合做 3D 水波紋或國旗飄揚。

作品欣賞 Demo
原始檔下載 Source
貼圖下載 Texture

(原始檔可任意修改散布,希望使用本範例在網路發表時能標明原著網址)

2009年6月18日 星期四

[作品] PointCloud 粒子雲

在 PV3D 中有一個類別叫作 Particle Field,我結合自己開發的範例 MotionLight 作出更炫的效果,我想很適合作網站前導頁 Logo 的互動動畫 : )

作品欣賞 Demo
原始檔下載 Source

(原始檔可任意修改散布,希望使用本範例在網路發表時能標明原著網址)

[教學] PV3D 基本教學

PV3D 是一套非常有名的 flash 外掛類別庫, 請在 pv3d blog 下載類別庫,或最新版下載 Papervision3D ActionScript 3.0 Library。最後在 FlashDevelop 的 Project->properties->classpathes->add classpath 新增 Papervision3D 路徑即可做好類別庫連結。



簡單 PV3D 設定如下:

public function Main():void {

 // Scene3D 用來組織場景母子關係樹狀架構
 var scene:Scene3D = new Scene3D();

 // Camera3D 為 3D 場景可視範圍設定
 var camera:Camera3D = new Camera3D();

 // Viewport3D 用在呈現於 flash 場景(其類別繼承Sprite)
 var viewport:Viewport3D = addChild(new Viewport3D(640, 480))as Viewport3D;

 // 用以渲染 3D 場景之類別
 var render:BasicRenderEngine = new BasicRenderEngine();

 // 建立一顆 Gouraud 材質的 3D 球體
 scene.addChild(new Sphere(new GouraudMaterial(new PointLight3D)));

 // 渲染 3D 場景
 render.renderScene(scene, camera, viewport);
}

2009年6月17日 星期三

[知識] 廣告遊戲 advergame

  網路上常見 flash 遊戲破關後,即可參加抽獎的活動,這種遊戲互動方式是為了什麼 ? 為什麼有這些遊戲存在 ? 一般而言,廣告遊戲是一種以遊戲為載體來進行廣告宣傳的廣告模式!廣告遊戲是利用人們對遊戲的一種天生愛好心理和遊戲本身的互動性、新鮮感來吸引消費者,把廣告內容通過合理的策劃巧妙的隱藏在遊戲場景中,讓消費者在玩遊戲的過程中接受廠商傳送的資訊,從而達到傳遞廣告資訊的核心目的。

  相對於當前許多網路廣告“硬推”式和“狂轟亂炸”式的宣傳模式,廣告遊戲的互動性和娛樂性使它可以引起消費者的自發關注和主動參與,會吸引消費者主動尋找廣告遊戲來玩。而且在這一過程中,消費者不會像對傳統網路廣告模式一樣,產生抵觸和反感情緒,可以達到一種很理想的廣告傳播效果。一款創意獨特,設計精美的廣告遊戲還具有特別的“粘性”,使消費者很容易對遊戲本身產生極大興趣,甚至上癮,消費者為了提高遊戲技能和成績而會不停重複的玩遊戲,使得廣告遊戲可以大幅度緩解當前消費者對廣告越來越缺乏耐心、關注的缺陷。玩遊戲的過程是一個絕佳的廣告宣傳時機!

2009年6月16日 星期二

[作品] MaskLight 遮罩式點光源

遮罩式點光源效果(文字作遮罩)
(原始檔可任意修改散布,希望使用本範例在網路發表時能標明原著網址)



[知識] web design pattern

所謂 Pattern 意指重複發生或出現的事物,Pattern 就是一種「千錘百鍊」的智慧結晶。有經驗的專家和沒經驗的新手,差別就在於:有經驗的專家知道如何在適當的時機,套用某些公式(Pattern)以解決特定 的問題,這是專家經年累月所培養出來的 Know-How,而透過這些 Pattern 可以快速解決設計問題。譬如說好萊塢很多英雄電影內容所呈現的方式很雷同,好似最後一定要來個大家喜愛的英雄救美結局,這就一種電影劇本的設計樣式。

Design Pattern 最早由緣起於建築界,建築師 Christopher Alexander 之 Pattern Language 一書,其內容有將近 200 個建築相關的設計樣式。之後資訊界有 Gof 四人所提出 23 種軟體設計的 Pattern,幫助建構高覆用與使用性軟體。剛好筆者在瀏覽 Design Pattern 相關資料時找到跟網站設計元素相關的設計樣式 http://www.welie.com/ 。此網站整合很多在網頁內容可能展示的元素,將其歸類區分,並根據每種範例作使用時機與操作分析。我想透過這些 Pattern 可以大大幫助網頁的建構,尤其在視覺設計師與程式設計師溝通上搭起橋梁。

如果各位對該網站 Pattern 有興趣的話,可以嘗試將網站內各個範例 Flash 化。未來建置 Flash 網站開發應該能提快開發速度,甚至有更好的品質。(工程浩大XD~)

2009年6月10日 星期三

[作品] MotionLight 拖曳光跡


看到 Media Player 的視覺效果覺得很有趣,自己也動手來做做看 。我的製作方式主要有兩個步驟:

1. 製作殘影
2. 套用模糊

作品欣賞
原始檔下載
(原始檔可任意修改散布,希望使用本範例在網路發表時能標明原著網址)

這是 prototype 還可以開發其他應用譬如汽車甩尾拖曳光線,誘導雷射,鬼火,流螢,瀑布,火焰,煙火...等粒子特效效果。有機會我會撰寫其他範例,各位也可以先行嘗試。

[教學] 免費SWF存放空間

有甚麼辦法可以使用免費空間,其實 Google 有一項服務叫 Google Code,Google Code 可以存放程式設計師想發表的程式專案。Google Code 提供 1 G 空間讓您使用,如何上傳並即時預覽 swf 檔案呢?這邊將做個介紹:





1. 先至 Google Code 申請服務
2. 下載並安裝 TortoiseSVN (重開機才能使用)
3. 開機後在您要上傳的 swf 檔上按右鍵 Tortoise SVN -> Repo-Browser
4. 先跳到您的專案首頁選擇 source 分欄頁面
5. 拷貝橘色部分 svn checkout http://yourproject.googlecode.com/svn/trunk/ yourproject--username (yourproject 請置換您的專案名稱)
6. 在Repo-Browser 的 URL 欄位貼上並確定
7. username 輸入您的帳號 password 輸入您的密碼( source 分欄頁面可以找到googlecode.com password連結)
8. 進到Repository頁面,接下來就看您想要上傳甚麼東西 (把Tortoise SVN 當作FTP軟體用就好),在 trunk 資料夾上按右鍵 -> addFile...
9. 上傳好後可以直接連到 http://yourproject.googlecode.com/svn/trunk/demo.swf

大功告成,各位可以試試,有問題可以留言給我 : )

http://code.google.com/p/designplusplus/ 這是我申請的專案首頁
textureScroll.swf 這是我 swf 的範例放置位置

2009年6月9日 星期二

[教學] 如何免費學習 ActionScript 3

對於想免費學習 as3 的各位有福了,
真的要花一大筆錢買 Flash CS4 嗎 ?
答案是不用, 其實有一個 open source 的 as3 開發軟體,
名字叫作 FlashDevelop ,
安裝方式有點小複雜 , 這邊有 安裝教學, 有問題可以直接留言.



安裝好後要如何建立 as3 專案, 請按下列步驟
1. view -> start page -> new project -> as3 project

2. name(專案名稱, 我填入test) 跟 location(專案位置, 我填入D:\flashProj\test,請自行加資料夾)

3. 確定後關掉 start page, 右邊會出現 bin(發布的swf檔案) / lib(可以放自己模組好的類別) / src(撰寫專案相關的程式)

4. src下有Main.as, 請打開, 我稍微把程式改簡單點

package{
 import flash.display.Sprite;
 import org.flashdevelop.utils.FlashViewer; // 除錯用類別, 就像 C 的 println

 public class Main extends Sprite{
  public function Main():void{
   //程式起始點
   FlashViewer.trace("hello world!"); // 輸出hello world!
   graphics.lineStyle(1, 0, 1); // 設定筆刷樣式
   graphics.moveTo(20, 20); // 筆刷移到20, 20位置
   graphics.lineTo(100, 100); // 筆刷畫到100, 100位置
  }
 }
}

程式寫好後, 請在 Project->properties->output下方 Test Movie 選 Play in new tab
按 Ctrl + Enter 發佈
會跳出 test.swf 視窗
視窗下方 output 位置有 hello world! 文字出現

P.S.若要加入其他類別庫, 一樣 Project->properties->classpathes->add classpath即可

[公告] 設計加加新開張 20090609

嗨 大家好~
我是設計加加的網誌撰寫人 moka,
我的專業在多媒體領域 ,
我熟悉的技術是網站相關技術, 遊戲設計, 電腦繪圖, 視覺設計 , 視覺與程式設計整合 ,
像是 flash, director, photoshop, 3dmax, illustrator, aftereffect ,
程式部分 as2, as3, lingo, javascript, html, java, c/c++, c# ,
都可以跟大家交流 .

有任何技術問題可以直接留言給我 : )