20110831

很多時候認為自己永遠不可能做的事會默默的改變,
而當助教這件事就是其中一件.


我還記得研一的時候看其他同學當助教,
都覺得他們很可憐,當了就是一年勞碌命外加當夾心餅干,
所以我都默默的告訴自己,馬的,我絕對不要當助教.


結果,我當了助教,連今天宋老師都說他覺得我看起來不想當助教,
沒想到我竟然當了,真可惜被漆老師給捷足先登.
對,其實老師是對的,我也不知道我為什麼會要當助教.
而且還跟BQ一起,根本是黃金神經病組合.


也許是為了一種嘗試吧,想看看當小老師會是什麼樣的光景.
多少也跟漆老師所想的一樣,想帶給大五多一點衝勁,
雖然通常我們的行為都跟喜憨兒沒有兩樣,都是先做了再說.


總之就看看我們之後上半場表現如何吧.


btw,為了符合yo sense lab凡事皆有sense的精神,
我們自把自為,偷雞摸狗,公器私用,豬狗不如的切了工作室的招牌,噢耶! :)

Which one do you like ? :)

論文做十個這個可以畢業嗎?這個好屌噢,行行出狀元耶,又數位!

今天在家看了劉德華跟張敏演的與龍共舞,很好看啊啊啊啊啊啊.
張敏好正噢,所以要播一個主題曲來聼一個,
一掃今天跑台北幾乎什麼都沒辦成的陰霾.

滿有趣的,很像我會做的事.

標準的每個都看的懂,加起來就看不懂.

float NoiseScale = 0.005;
float NoiseOffsetX = 0;
float NoiseOffsetY = 0;

void setup() { 
  size(600,800,P2D);
  background(255);
  smooth();
  noFill();
  stroke(#5A5AAD,30);
  noiseSeed(22);

  for (int i=0; i<300; i++) {
    NoiseOffsetX += 5;
    NoiseOffsetY += 6;
    drawOneStream();
  }
 
  //saveFrame("01.jpg");
}

void drawOneStream() {
  float px = 0;
  float py = height/2;
  float vx = 1;
  float vy = 0;
  int pcnt = 0;

  while ((px >= 0) && (px < width) && (py < height) && (py >= 0)){
    px += vx;
    py += vy;
    pcnt += 1;
    point(px, py);
 
    float xNoise = noise((pcnt + NoiseOffsetX) * NoiseScale);
    float yNoise = noise((pcnt + NoiseOffsetY) * NoiseScale);
 
    vx = ((2*vx) + 1 + map(xNoise, 0, 1, -1, 1))/4;
    vy = ((3*vy) + map(yNoise, 0, 1, -1, 1))/4;
    }
}

20110825

老師說要挑戰用設計寫日記,
我是不知道我們是不是有在做設計,
我們平常正事不做常常做些有的沒的倒是真的.

這件作品的起源說來話短,
今天晚上我們在討論是不是該買一個可以轉的鏢靶,
上網一查一千多,二話不說就下樓去木工廠找材料自己來了.
這以後可以幫我們少去很多爭執拉扯,尤其是買晚餐這件事.

射一鏢就對了!

希望以後我可以每次都射中for free的免費一餐,
雖然它只有1/8的機會,但我相信人很飢渴時的專注力.

:-3

海報 03

海報 03/

這是一款勵志海報,非常勵志(我想),鼓勵你勇敢的去逐夢.
透過processing去做一個類似星河的底圖,
當然也是透過一定範圍的隨機去生成地.

同時讓我想到一個小故事,小時候我媽問我,
"你想要當科學家還是醫生?" (現在想想這真是一個狡猾的問題.)
我說,
"我要當科學家!!!"
我媽說,
"可是當科學家會很辛苦噢."
我說,
"那我當醫生好了."

..............................................

我想有些習性天生就是生在你血液裡無法改變.   :)

歐杯歐杯蝦系林老杯.

20110824

我個人真的是非常喜歡看壹週刊,

雖然大家的刻板印象可能那是本低俗的書籍,不外乎是腥羶色,

但我覺得那只是一部份,而且也不是我愛看它的原因.

演藝新聞除了看看笑一笑之外根本事不關己,我還比較想知道BQ最近跟誰打得活熱.

但其他關於商業,大城市小人物,特殊職業,景點介紹等等,

這些可是我持續跟除了淡水以外的地方保持同調的良帖.

而最近買的一本壹週刊裡介紹了手塚治虫,
說他是日本漫畫歷史上的柯比意應該一點也不為過.
其中介紹了很多他的生平跟理念,他認為畫漫畫不只是畫夢想給讀者,
而是要讓讀者從漫畫中體會現實社會的一面,進而珍惜並積極經營自己的人生.

而其中最說到我內心的一段話是,
"手塚治虫說過他想藉由漫畫傳達三個訊息給孩子們,好奇心,記住最難忘的體驗,跟珍惜生命."

剛好,









我很愛問問題,很念舊,很怕死.

我不知道我現在到底有沒有在積極經營自己的生活,貌似有但似乎又不時的偷懶.
希望我死時遺憾是越少越好,也祝BQ的死法能如他所期盼地,                                        馬上風.

新增 /
Blogger Joe-ker

海報 02

海報 02 /

 一左一右感情不會散,除了圓點化門神外,
在底部加上門神與中華文化之間的關係註解,
如果19世紀設計中心在歐洲,20世紀在美洲,
那21世紀絕對是在亞洲,所以會賣嗎?


:)

海報 01

海報 01 /

用processing去做個大概,
透過隨機的方式去決定每個圓的大小,
剩下再進coreldraw修潤,
這是一款專門賣給外國人的門神海報.

:)

老師今天上課提出要做一本書.
它應該會是有點預謀的成為將來論文的素材,
也就是它是一本類百科全書,當然內容都是圍繞著你的論文題目.

全書總共會有16篇章節,每篇章節都是你用不同的方法去詮釋或淺談你的題目,
可能是攝影,分析圖,影片,手繪等等各式各樣的手法.
一篇會有八頁,除了開頭外,每頁會有一個案例或作品,
也就是你每篇詮釋的手法下會有七個作品,整本書應該會有112個作品,
然後約134頁左右(含封面,封底,前言,結論,自我介紹,跟目錄),
我不知道我們會不會撐到最後,但希望大家都能因此活化自己的blog.

以下是我對16篇章節的表現法初步規劃,而主題是"隨機 Random".
01 - 海報
02 - GIF
03 - 分鏡圖
04 - 概念模
05 - 拼貼
06 - 程式碼
07 - 藝術家
08 - 理論
09 - 分析圖
10 - 攝影
11 - 程式碼
12 - 3D
13 - 塗鴉
14 -
15 -
16 -

int Spacing = 20;
color[] mycolors = {#8E8E8E,#FFFF00,#ADADAD};


background(255);
size(900,200);
colorMode(HSB);
noStroke();
randomSeed(22);
 
for(int XPos=0; XPos<900; XPos=XPos+20){
  for (int YPos=0;YPos<200;YPos=YPos+20){
    fill(mycolors [int(random(0,3))]);
    triangle(XPos, YPos, XPos, YPos+Spacing, XPos+Spacing, YPos+Spacing);
    fill(mycolors [int(random(0,3))]);
    triangle(XPos, YPos, XPos+Spacing, YPos, XPos+Spacing, YPos+Spacing);
    }
}

//saveFrame("16.jpg");

雷切清潔篇

在切雷切的時間總是漫長無聊,無聊多作怪,
所以就拍了這影片,內容根本是國中生行為.

但會拍這影片也非毫無來由,
從大四以來一直看系上的人默默為這些設備付出,
中間經過的災難事件也都看在眼裡.

我知道不要說等我們出了學校,甚至只要結束一個studio後,
你可能這輩子再也不會碰到雷切.

一開始大家多少都會抱著很新奇很興奮的心情來使用這些設備,
但大部分人只是抱著使用者的心情在使用它,
至於維護的部分說真的有多少人在用心,在關心?
反正自己切的時候沒事就好.

我不是在搞什麼假道學,但我是真心希望大家使用設備時是把它當成是你自己的一樣.
你圖沒畫好,模沒切好,這些都可以重來,
但只要一次鐵件焦油沒擦乾淨,下一次就等著燒起來.

雖然講得有點嚴肅,但影片還是走比較開心的風格,
希望以後用的人都能開心的保養機器,
我對系館是有愛的,不管是工作室還是設備,我都希望它能呈現最好的一面.

Peace. :)

20110820

我記得小時候在國外參加籃球夏令營的時候,
我的室友是三個比我高年級的學生,
那是個只要有自己的CD隨身聽就像現在手拿IPad一樣秋的年代.

那時他們全部都在聽2Pac,尤其是這首Hit Em Up更是跟背景音樂一般整天縈繞不去.
對我來說,我還真不到那是三小,我只知道他們一天到晚都在寢室fuck來fuck去,
最後連我都憨憨的加入了這遊戲,雖然有點低俗但還滿好笑的.
後來我才知道2Pac是個很有名的饒舌歌手,
那時候饒舌才不像現在娘娘腔的罵來罵去最後還可以合解出合唱單曲勒.

左為Notorious B.I.G. ; 右為2Pac


那是個美國東西岸幫派嚴重對立的年代,
他們靠拍MV在電視上互相嗆來嗆去,應該說                      fuck來fuck去.
結果嗆來嗆去的最後超出臨借點的結果就是西岸的代表2Pac被槍殺了,
沒多久就換東岸的Notorious B.I.G.被報復gun down了.
這對曾經是好朋友的兩人,最後竟然反目然後分別在25跟24時死掉,
本來可以成為活傳奇的兩人就這樣英年早逝.
之後我們比較熟知代表西岸的Dr.Dre跟代表東岸的Puff Daddy才握手言和,
東西岸的饒舌界才沒有如過去那般的箭拔弩張.


anyway,儘管B.I.G.的音樂我沒怎麼在聽,
但是2Pac我到現在都還是會不時的播一下來緬懷一下過去,
那曾經屬於12歲的我的暑假,那個一直fuck來fuck去的暑假,                   sweet. :)


最後奉上會打這篇日記的起因,
因為聽到Rihanna拿2Pac來混音的歌We Ride [G-Mix] (feat 2Pac)

新增
Blogger Cimada

20110816

從以前到現在,我大概參加了數個studio,

當然其實只是每次設計課就取一個名字,

但想想以後履歷如果厚臉皮都寫進去的話好像會很嚇人. :)

細細數了一下共有

大三 / We Don't Believe Studio

大四 / Logic Boyz Studio

大五 / Desgin Rocks! Studio

到現在研究所最新的"Yo Sense Lab"

會取這樣的核心概念其實很簡單,
就像老師說的,我們每一個人都是designer,
所以當然希望自己都很                "有sense".

但往往我們設計都是自嗨有餘,然後被嗆爆收場,
所以現在我們不論說什麼都會在句尾加上"..........這樣比較有sense!"
說有sense已經變成一種自嘲的意思了.

我還記得我爸常常提醒我的,
"開別人玩笑是苛薄,開自己玩笑是幽默"
這可是我奉為至理名言的金句,                        雖然我常常沒做到,
不過至少這即將成為我們工作室門面的圖,我們是在開自己玩笑.

首先工作室的logo馬上先盜用了Yves Saint Laurent的經典logo,
這其實是在諷刺我們都還是會追求名牌,
當但其實YSL這三個字的縮寫其實也可以是Yo Sense Lab.

然後其他四個禁止標誌分別是,

參數化設計用Grasshopper沒有sense,
玩Photography沒有sense,
3C產品用Apple沒有sense,
畫3D時用Rhino沒有sense,

但偏偏無論公私領域當我們在用或做這些事物時,似乎都好像比較有sense.


希望接下來的一年我們會快樂的經營我們的工作室,
以幽默的態度去看自己的論文,它可以很爛,但是很有趣.(有點玄?)
我們會是一群互相成長的夥伴.

Peace. :-3

20110815

終於開始進雷切了,但一大片要20分鐘,
全部切完要17個小時再加上組的時間,
其實要花的時間也不短.


好久沒碰雷切了是有點興奮,
但當切完要乖乖把每根支架上的焦油慢慢擦掉時,
我才知道任何捷徑其實都是要付出代價的.

但今天心情還是很不錯,
尤其是我拿到了人生第一張給我的喜帖,
也許以後當我拿到越來越多張我會很煩惱,
不過因為這是第一張,所以心情完全無法言喻啊.
Congrats my bro! :)


另外上海世博的回憶全因學弟妹去蘇州而再度勾起,
他們也歷經了號稱古代只有皇帝才能蓋的蠶絲被工廠,
跟囉哩八嗦中國有四大玉結果最後是在賣緬甸玉的玉工廠.
詳情請點我!點我!點我!點我!


那九天真的是令人懷念啊!讓我們回顧一下吧!



Good night. :-3

20110815

今天本來在研究processing的noise,

但後來莫名其妙的就去拉BQ禪園的GH,

我只能說GH對我來說還是很麻煩啊,

而且感覺我拉的超笨的,還變八卦勒,

不過至少拉出來一點點東西,

我覺得好好學processing之後,

在想要怎麼拉或怎麼match那些data的時候會比較有邏輯.

Anyway, maybe it's just me.

電池圖以下

20110812

今天沒有進度,
但是我偷做了一個東西有點失敗,
然後還剪了一段小短片有點開心.

什麼是演算法(Algorithm)?


很短同時也滿好理解的.

精華 /

演算法是解決某一個工作或問題,
所需要的一些有限個數的指令或步驟,
同時需要具備下列五項條件:
1. 有限性
2. 有效性
3. 明確性
4. 輸入資料
5. 輸出資料

Pixel Zooey (processing教學)

在好好看了課本之後,其實後半段已經開始往各種不同向度走了.
有的是介紹互動,有的是介紹演算法,所以一時之間我也沒頭緒要怎麼寫下去.
只能說,如果你有好好看完前面的教學,其實你的基本功應該還算穩當了,
除了完全沒看過的指令外,只要邏輯還可以,別人的程式碼應該都還看得懂.
所以其實你已經可以開始看看人家高手寫的東西,
有興趣的就再看細一點,不懂的指令就上Processing官網查囉.


--------------------------------------------------------------------------------------------------------------------------


再來我就隨意講了,不一定是課本的東西,
你說跟建築有沒有關係,我不知道,但你問爽嗎?              爽!
今天我們要學如何從一張圖片去抓它的data出來加以利用.
所以再度請到Zooey出馬囉.

首先請點圖然後把它存到電腦裡,然後把它移到processing底下的lib資料夾裡.
之後再透過運算,我們就可以得到以下這張圖.

再來就是程式碼囉.




PImage img;
//首先要匯入一張圖時得跟int或flaot一樣,寫PImage,
//然後告訴processing這張圖在程式內代號叫img


void setup(){
  size(584,300); //圖原始大小為584 x 300,所以我就跟著它大小設
  img = loadImage("zooey.jpg"); //原圖的檔名跟類型
  background(255);
  smooth();
}


int l = 0;


void draw(){
  frameRate(250); //播放速度
 
  int x = int(random(img.width));
  int y = int(random(img.height));
  int loc = x + y*img.width;
  //這代表說int x 和 int y分別是0-584跟0-300中間任一整數
  //而loc你可能會比較困惑,它是要定義圖中pixel的位置,待會再解釋

  loadPixels(); //當你要讀圖的每個pixel的data時,必須要有這個指令
  float r = red(img.pixels[loc]);  //由上面定義的loc點,抽出那點RGB的R值
  float g = green(img.pixels[loc]); //由上面定義的loc點,抽出那點RGB的G值
  float b = blue(img.pixels[loc]); //由上面定義的loc點,抽出那點RGB的B值

  strokeWeight(0.5);
  stroke(255,100);
  fill(r,g,b,100);
  float pointillize = random(5,15);
  rectMode(CENTER);
  rect(x,y,pointillize,pointillize);
 
  l += 1;
  if(l > 30000){
    noLoop(); //當l算到第30001步時,便停止所有運算
    //saveFrame("14-##.jpg"); //同時存第30001步時的圖片
  }
}




基本上,整個程式的重點就是放在抓取隨機圖上的pixel,
並以該pixel的位置來當邊長為隨機5到15的正方形的中心.
而該pixel的RGB值則可成為正方形的填色依據.


我們可以先看pixels跟loadpixel兩個指令的解釋
pixels()
loadPixels()
我們可以知道要對pixel做一些進一步的動作前,需要有loadPixels指令,
而pixels的位置其實就是每個pixel都有它獨特的位置代號,


但要怎麼去抓到那個位置,也就是剛剛的loc呢?便請參照以下網址.
Images and Pixels


我抽出最精華的圖片,這張會讓我們更容易懂,
今天要找出某pixel的位置公式即為 location = x + y*width
也就是為什麼程式裡會寫int loc = x + y*img.width;
透過它去抓圖裡面的隨機pixel.

Try it. :)

換封面了油,還可以嗎?

size(900,200);
background(0);
strokeWeight(1);
stroke(255);
smooth();
randomSeed(2222);

for(int k = 0; k < 5000; k +=1){
  int a = int(random(-50,200));
  int b = int(random(-10,50));
  int j = int(random(1,44));
  int q = int(random(1,5));
  fill(random(255),random(255),random(255));
  rect(5*a, 5*b, q*5, j*5);
}

//saveFrame("13-##.jpg");

Am I ready ?

什麼時候出英文版?什麼時候出英文版?什麼時候出英文版?什麼時候出英文版?
什麼時候出英文版?什麼時候出英文版?什麼時候出英文版?什麼時候出英文版?

我想念視覺傳達,想瘋了.

不錯噢,大家的blog開始有東西了.

大家可以參考右邊的
Blogger Banana
Blogger BQ
Blogger Jingti
Blogger Miaomiao

搞不好看完你就想/不想唸研究所了,嘻嘻.


:-)

20110806

今天本來興沖沖的跑去淡水漁市想說可以吃活海鮮,
結果我只能說真是窮極無聊,漁市裡面沒有活跳跳的魚就算了,連生的都沒有,
竟然還給我賣杏仁茶跟Subway,要不要乾脆再賣龍鬚糖跟狀元糕算了.
我只能說漁人碼頭這漁市病了.

後來想說總要吃到那種看似破爛但其實漁貨新鮮無比的海產店,
所以就被騙去對岸八里,結果竟然是吃佘家孔雀蛤(還有別註八里分店),
沒錯,一間去淡水老街就有的店.唯一值得嘗試的是原來可以騎機車搭船到往返兩岸,
而且只要40元,下次值得一試.

晚上吃了英專路的博愛六號冰店,讓我莫名想起我同學跟我講過他朋友哥哥的故事.
就是去冰店會把每根鐵湯匙含一遍再放回去,所以我看了看湯匙,
好險是即可拋塑膠的.

同時今天也是中國的情人節,就某方面來說,我們應該感謝東西文化的不同,
使我們有很多藉口可以放自己一個假或是慶祝.

同時這讓我想到以前學長跟我講的水源街一對情侶的故事.
在某天三更半夜有一對情侶在鬧分手,女的不願意分,
所以就一直盧同時哭喊"我不信!我不信!你打醒我!你打醒我!"
但我想男生在還是男孩的時候阿娘都有教我們不能打女生,
所以那個男的儘管要分手,還是沒有打女生,真是有為青年.

我們同時知道,當你很想要一個東西的時候,
你心裡一直想一直覆頌時,它常常就會莫名成真,
至少我媽常在找車位時是這樣地.

那女的還是一直哭鬧,大喊"我不信!我不信!你打醒我!你打醒我!"
後果就是盧了一兩個小時之後男的不耐煩就真的給她一巴掌.
好啦,巴掌賞了,人也該醒了,哪知道女的竟然開始喊"救命啊!救命啊!打人啊!"

.................................................

難怪我媽常跟我說,女人有時候跟你說A的時候,
其實她在想的是B,現在我終於懂了. ( 點頭
anyway,祝大家情人節快樂.

:-3

20110805

"他媽的我好想打人"


如果要問我今天過得如何只能回你這句.
在過了多年的網拍人生後,生存經驗告訴我,
對於貨到付款這種東西最好都是趨之則吉.


在千百種網路交易的方法中,無論是匯款,到店取貨,到店付款,面交等等,
沒有一項是如貨到付款那麼地機巴.
首先,這不但需要的是買賣方之間的互相信任,
甚至還需要第三方(也就是負責送貨收錢的快遞公司)的配合.


一直以來的經驗告訴我,無論快遞他們多麼的講究準時送達,
只要它不是DHL或是Fedex,那他媽的無論你指定早上或中午收件,
你要是在淡水,那你永遠就是慘淡的等到下午簽收付錢.
雖然我永遠知道不會在早上或中午收到件,
但就像光顧了剝皮酒店一樣一試再試,而顯然我還沒被剝到見肉.


一切機關算盡的我最後竟然栽在賣家的手上.
被他連騙兩天在家手緊拿電話深怕快遞上門,
結果卻靜悄悄到天明.


"他媽的我好想打人."

:-(

Hehehehehe ......

20110804

今天抱著忐忑的心情去集合,畢竟你也不知道老師報告的順不順利.
可是這種事情就是一個兩難的局面,
太順利的話什麼都要做,那大家後半暑假就會準備進勞改營.
不順利的話什麼都不做,那設計就要重新開始苦哈哈.


不過畢竟我們是老師的桃子跟李子,所以當然還是希望簡報能順順利利,
要不然重演一開始的愁雲慘霧還得了,噢對了,颱風也要來了.


簡報結果應該算是還不錯吧?
所以恭喜王博謙跟徐暢佑可以準備去插秧插爽爽了.
詳情可以參考  BQ的blog



4x4m的大小,每5x5cm內插一根,所以總共會以6400根,
所以一人會分到3200根,如果是為期兩個禮拜的工作,
那一人一天要插228根,如果一天工作8小時,那每兩分鐘就要插一根,
還不包括切不同長短跟底座,還有進雷切的放樣底板.
WOW, god bless by bros.


BTW,我的好同學叫王惠娟,大家都管她叫妙妙,
她是我學姐,不過她沒有學姐的架子,所以我們相處都很和樂融融.


她英文名字自己直接翻成Miaomaio,通常這種打錯字都很危險,
如果m不小心打成n就要變尿尿了.
當然這不是我要講的重點


她有一台只要拿出來就有sense的macbook  pro,
因為實在是很有sense,所以我準備也要買一台了.
當然這不是我要講的重點.


今天我打開她的電腦,而我們的電腦不是都會被取名字嗎?
通常你是asus就叫asus,他是acer就叫acer,
所以理當miaomiao的apple應該也是apple,就算不叫apple至少也叫pineapple.
但不是,她把她macbook pro名稱改叫做miaobook pro.


........................


我跟BQ一至認為這是自閉症的行為.Peace.


:-3

20110803

明天又要集合數位迪化了,身為一個負責任的年輕人,一個研究生,
我可是什麼瓜子兒都沒有做,以感謝老師多年來的教導,不要熬夜.


當然這麼多年來蒙感老師們的諄諄教誨,本人一直以不同向度去回饋他們,
例如考試時都會把分數還給老師,或是設計課故意不出現讓老師可以提早下課.
這些心思細膩寓意很深的舉動不知道有沒有逼出老師們的兩行清淚?


BTW,金雞母社區最近開了一堆餐廳,都快變美食街了.
今天我光顧了一家叫御饌的快餐店.
馬的也才12點半老闆就說我太晚來了所以沒配菜給我,
不過以我淡水湯不挑的性格當然是無所謂.
同時菜盤上有一堆盤旋的蒼蠅,搞得像傳統市場的豬肉攤一樣,
不過以我淡水湯不挑的性格當然是無所謂.


唯一令我比較介懷的是,當老闆說沒有配菜給我時,
他就拿一些主菜(蔥油雞,龍鳳腿...)給我當配菜,我真是感動淚流,
淡水真是一個好有人情味的地方啊,不愧是大台北最後一塊淨土.
但是我看到他給我的每樣配菜都有蒼蠅停在上面在那玩跑酷,
同時老闆正手拿七吋半的殺豬刀在切我的排骨,所以我也不方便多說什麼.
至於你問我好不好吃,味道如何?一時之間我也有點語塞.


蒼蠅最喜歡吃什麼?


這是第一篇設計日誌,所以字數要多一點增長一下氣燄.

:-3

Nice. :3

Motion 2 : Machine, Organism (processing教學)

今天早餐沒有吃,中餐吃大呼過癮,吃完只有大呼好熱,
晚餐吃神魯,吃完就暈過去一陣子.

有時候要做事情的時候都還是會想我做這幹麻?
但學長說過很多事都是在不問幹麻做就對了的情況下,
自己會有所啟發跟成長,我想我現在有點了解王俊雄那時想對我表達的東西了.
什麼事情都瞻前顧後的的話,最後結果大多是不上不下或是安全牌爾爾,
也許找到其中的平衡點我就可以拿82分了噢.

------------------------------------------------------------------------------------------------------------------------------

再接下來的這篇裡,雖然我們已經學過動畫了,
但p291-299的Motion 2這篇講的比較像是連動關係.
p292,293的範例大概跟Motion 1的範例沒差多少,
其實現在看到sin跟cos沒有那麼害怕了,
因為基本上它通常只是個調節變數(1到-1), nothing to be afraid of.  :)

先從p294的32-03講起.

void setup(){
  size(200,200);
  noStroke();
  smooth();
}

float angle = 0;
float speed = 0.1; //speed數值越大則扭動越快,因為sin的循環每次加總值為6.28

void draw(){

  background(0);

  angle = angle + speed;
  ellipse(100 + (sin(angle + PI) * 5), 70, 30, 30);  //PI = 3.14,而sin(PI) = 0 之後往-1跑,所以上圓會先往左跑
  ellipse(100 + (sin(angle + HALF_PI) * 5), 100, 30, 30); //相較之下中圓會先往右跑,因為sin(HALF_PI)時仍為正數
  ellipse(100 + (sin(angle + QUARTER_PI) * 5), 130, 30, 30); //跟中圓比時,下圓則較其更晚往-1跑

  //if(frameCount < 200){
  //  saveFrame("p294-1-###.jpg");
  //} 
}

簡單來說,就是上圓一開始先往左跑,而中下圓則往右跑,
而下圓又比中圓跑的慢,透過這樣的間隔達到好像球在擺動的效果.
如果還不懂,請回去看p118關於sin,cos的定義.
而32-04基本上也是同樣的用法,透過不同的值造成圓縮放的時間差.

void setup(){
  size(200,200);
  smooth();
  fill(255,180);
}

float angle = 0;
float speed = 0.05; //一樣控制縮放速度

void draw(){
  background(0);
  angle += speed;
  noStroke();
  circlePhase(0);
  circlePhase(QUARTER_PI);
  circlePhase(HALF_PI);
 
  stroke(255,0,0);
  line(45,0,45,200);
  line(155,0,155,200);
 
  if(frameCount < 200){
  saveFrame("p294-2-###.jpg");
  } 
}
void circlePhase(float phase){
  float diameter = 155 + (sin(angle + phase) * 45);
  //我們知道sin就是1到-1,所以圓的直徑最大是200,最小是110
  ellipse(100,100,diameter,diameter);
}

我特意畫了額外兩條紅線,其間距即是110,
所以我們可以看到圓在縮放的時後,最大時是剛好碰到邊框,
最小時則剛好碰到兩條紅線,這應該會比較好理解sin在程式裡的作用.

再來就是p298的32-08與32-09跟noise搭配的案例,
一樣記得,noise只是一個介於1到-1的random,同時俱有方向性.

void setup(){
  size(200,200);
  strokeWeight(20); //很粗的線
  smooth();
}

float n1 = 0;
float inc1 = 0.1;
float n2 = 0;
float inc2 = 0.09;
float k = 0;
float inck = 0.05;

void draw(){
  background(0); //每畫一次都把前一次畫的蓋掉

  n1 += inc1;
  n2 += inc2;
  k += inck;
 
  float y1 = (noise(n1) - 0.5) * 50; //基本上值就是介於-15到15
  float y2 = (noise(n2) - 0.5) * 50; //同上,只是為了讓兩條線擺動時noise值不一樣,所以分出y1,y2
  stroke(255 + (sin(PI+k)*255));  //我額外加的,透過sin讓線在擺動時同時閃爍
  line(0,100,80,100 + y1);
  line(200,100,100,100 + y2);
 
  //if(frameCount < 300){
  //  saveFrame("p298-1-###.jpg");
  //} 
}
 
應該沒什麼大問題吧?再來就是32-09囉. 

void setup(){
  size(200,200);
  noStroke();
}

float inc = 0.06; //值越小畫面越細膩
int density = 4; //值越小馬賽克格子越小
float znoise = 0;

void draw(){
  float xnoise = 0;
  float ynoise = 0;
    for(int y = 0; y < height; y += density){
    for(int x = 0; x < width; x += density){
      xnoise += inc;
      float n = noise(xnoise,ynoise,znoise) * 256;
      fill(n);
      rect(y, x, density, density);
    }
    ynoise += inc;
    xnoise = 0;
  }
//基本上這段就跟之前介紹noise一樣,透過x,y向的forloop成圖
  znoise += inc;
//z方向的noise則使畫面得以一直變化,如果把它殺掉你會發現畫面是定住的
//因為noise有方向性,所以xy向只是成一張圖,而z向則是不斷的推移.

  //if(frameCount < 200){
  //  saveFrame("298-2-###.jpg");
  //} 
}

如果把inc改成0.5,而density改成2則會得到以下,

如果你還是不太懂nosie到底在衝三小,
這張diagram不知道會不會幫到你.

基本上你可以想成noise的xyz其實像一團霧,
而當我們只有xy時,我們只看到這團霧的其中一個切面,
但當我們有z方向時,則會在霧中不斷推移,所以每張切面就構成一動畫.

最後則是小作品一則,我有設定當圓在跑時,
碰到邊時會馬上回歸中心點繼續畫,把程式碼丟入processing看動畫會比較清楚.

void setup(){
  size(200,200);
  background(255);
  randomSeed(2);
}

float x = 100;
float y = 70;

void draw(){ 
 
  frameRate(150);
 
  x += random(-8,8);
  y += random(-8,8);
  strokeWeight(random(3,12));
  stroke(random(255),40);
  point(x,y);
 
  if(x < 0 || x >200){
    x = 100;
  }
 
  if(y < 0 || y >200){
    y = 100;
  }
 
  //if(frameCount > 1000 && frameCount < 1002){
  //  saveFrame("p296-1-##.jpg");
  //} 
}


Try it. :)

p205 - 290 (processing教學)

很抱歉又很久沒更新processing了,
絕對不是我沒看,相反的,我看了快100頁,
但基於我接下來一年的論文還是需要以我需求的為主,
儘管課本接下來幾課都是很吸引人的,我還是只得忍痛割愛.
我會儘量把跳過的篇章做簡短的介紹,你可以依照自己的興趣去參考課本.

---------------------------------------------------------------------------------------------------------------

從上次的recursion講完之後,我們的進度約進行到p204,
而接下來我們會跳過p205-290,洋洋灑灑85頁就這樣過去了,
基本上這些跳過的內容主要是在講互動上的應用,
也就是processing開始跟你的滑鼠或鍵盤的一舉一動有所關聯.

p205-215的Input 1是在做基本的滑鼠指令介紹,
我們可以透過if來進行一連串的設定,
例如if我按了左鍵背景會變色,或不按時是圓形,一按就變方形之類的,
這些基本與滑鼠的相關應用你會在這得到解答.

p216-221的Drawing 1是在告訴你如何在processing裡做畫,
但別傻了孩子,去用小畫家吧.

p222-227的Input 2則是在做鍵盤跟prcessing的互動,
if按了鍵盤的t,會出現兩個同心圓等等諸如此類.

p228-236的Input 3則是更進階的滑鼠與鍵盤應用,
有鍵盤按著不放,或是滑鼠拖拉等動作的指令代碼,
有了它們你即可以寫更細微的互動程式.

p237-244的Input 4算是較進階的一篇,
透過滑鼠在晃動時飄浮的座標,
可以透過其數據進行一些相對關係的設定,
滿好玩的,可以花些心思看一下.

p245-249的Input 5則是在教你寫時鐘,
基本上秒分時日月年都有,不太知道要用在哪.

p250-277則是再度對一些數位藝術家進行介紹,
然後還是得說,有時間有興趣flash真的是可以學一下.

p278-290的Motion 1則是開始做真正較寫實的移動,
跟之前我們單純用void draw去跑動畫時,
這篇更接近一些移動時規則的制定,
例如一個圓如何在框架內像顆球不停地彈來彈去.

以上就是p205-290中間的大概內容介紹,
而我會在下篇開始重啟教學,也就是p291-299的Motion 2,
開始我們可以制定更多的規則讓processing在運作時更自然有機.

每天只要嘗試隨便打100字,哪怕是流水帳,
這都會漸漸助你養成紀錄自己的習慣,
這樣部落格就不會如想像中那麼難下筆.




再來是論文第二章所要介紹跟研究的事物主題,
相關書籍 x 6
相關案例 x 6
相關建築師 x 3
相關理論 x ?
相關論文(選擇性)


相關書籍 /
01.
Processing ; A prgramming handbook for visual designers and artists
by Casey Reas & Ben Fry


02.
Ubiquity : Why Catastrophes Happen ?
改變世界的簡單法則
by Mark Buchanan


03.
建築類型學與城市型態學
by 沈克寧


04.
哈棒傳奇
by 九把刀


05.
Architecture Informal
by Cecil Balmond
06.
A+U 2006:11 增刊號: Cecil Balmond
by A+U


相關案例 /
01.
290 Mulberry
by SHoP Architects


02.
The Porter House
by SHoP Architects


03.
56 Leonard Street
by Herzog de Meuron


04.
Beijing National Stadium
by Herzog de Meuron


05.
100 11th Avenue
by Jean Nouvel


06.
Louvre Museum, Abi Dhabi
by Jean Nouvel






相關建築師 /
01.
SHoP Architects


02.
Herzog & de Meuron


03.
Jean Nouvel




相關理論 /
01.
Perlin Noise (Perlin噪聲)
by Ken Perlin


02.
Chaos theory (渾沌理論)
by Edward Norton Lorenz






以上暫時,隨時增減修改.

老師今天說動機跟目的差在哪裡?
答案是動機比較難達成,目的相對可行性較高.

就像反攻大陸有沒有可能?基本上是不可能的,這就是動機.
除非你娶大陸新娘,然後以另一種形式去做.
但買一架F-16有沒有可能?是可能的,為了反攻大陸所以買,這就是目的.
當然我們還是很容易混淆動機跟目的,畢竟他們的界線有點模糊,就先且戰且走吧.


研究動機 /
01.
筆者個人對於秩序下的諸多約束感到不適.

02.
按部就班的程序是繁雜且耗時的,同時那可預測性使事物失去原應有的驚喜.

03.
個體應有所區隔而非統一的.且任何事物應有所彈性而非綁定制式的,
任何規則流程應是面性發展而非線性.

04.
電腦與人腦最大的差別是一個是死一個是活的,
相較之下,雖然電腦可以加速我們的工作效率,但同時其缺乏變通,
所以是我們的責任去建立相對規則給電腦使其更多變.

05.
當設計在想好的時候即以定形,但如果我們能加入不可測(隨機)的元素,
那其結果很可能會顛覆本來我們對設計原型原有的想像.

06.
隨機不單只是一個範圍而已,它同時也是一個比例,
透過不同的比例縮放,它可以使任何它所依附的事物變化起伏有所波動,
因此它也可以應用到建築各種尺度上,意即空間,建物,或都市.


研究目的 /
01.
對Perlin Noise相關理論做深度理解,同時搜尋其所應用的領域與案例.

02.
研究電腦程式設計(如Processing)在random和noise概念下與其他指令的搭配運用.

03.
實驗Processing自身與其他3D軟體的結合運用.

04.
尋找建築師或案例是有助於進行隨機的概念論述.

05.
發展幾何或流線(free form)的量體原型(類型學).

06.
2D或3D的生成模擬動畫製作,以比較在不同範圍下的隨機表現.


暫時以上,還可能會修改(因為餅畫太大). :)