2017 年結束就換 2018 惹~第二集的 My Precious,請繼續當作連戲劇看下去!

今年年末的時候,也是沒有意外地舉辦了年度分享,不過這次比較特別,以往都在年底舉行,今年卻延期改到尾牙當天分享!(其實弄得尾牙很緊張耶 😂

結果如同去年 My Precious 一樣,又開始給自己找事做,做了一個搞死自己的網站… 因為我當時發了瘋地很想做“音樂”網站!大概是之前看到一位一面之緣的朋友(後來他也算小小出了名了)做的 VJ 網站,當時覺得這個方法好聰明、好棒棒喔!(這樣就不用帶合成器出門也可表演耶!!!😂)所以除了專案之外,還放了一堆不相干的素材,看起來不相關,但對我來說每個素材都有它的意義啦!我提前在 12 月的時候開始執行,畢竟複雜度比較高,加上我還沒有想好要放哪些素材,有點邊試邊玩的概念,怕做不完才這麼早開始弄一點、弄一點,不過我這次根本就是在實驗 three.js 到底可以拿來做什麼樣的效果,試了各種…有幾何模型、打光、sprite、貼圖、模型、shader…等等,然後嘗試加上各種動態效果,幾乎把整個 3D 網站該有的技能都放在上面了!😂但不管怎麼展現這永遠都只是 WebGL 的冰山一角,因為就算是一種技術也能變化出千變萬化的效果呀~😌

究竟還是拖了一個多月,甚至到尾牙前幾天都沒有好好睡覺 😭😭😭 每天晚上在家裡校效能或嘗試表演,然後電腦每次跑感覺都要燒壞了…. 😵改到我常常走神或打嗑睡…還第一次在公司遲到…(優良記錄可是從來不遲到的人耶)傻傻地自己搭計程車到會場(不過還遇到一個有趣的司機分享三峽郊區的景致,怎樣都還是有些收穫 der~🤗)因為自己的電腦跑不動,原本抱著要讓筆電有生命危險的風險,還好很感謝主管提供價值連城的好電腦給我表演!(不過我超級笨,不知道 Mac 要開一些設定才能跑那麼強的功能…. 😐)雖然表演還是一蹋糊塗,勉勉強強還是把前半段正確展示,後面有一段不小心寫錯沒改回來就沒辦法播完……QQ 但不管怎樣我還是挺有趣的啦!

當時我腦袋打結,沒講很多關於創作概念的事情… 我現在要來解釋一下我做的內容和心得了!這個落漆的表演一開始腳本規劃的主軸是這樣的:我假設這是一部『電影』,因為這一年所發生的事情,每個狀態就如同『電影片段』一樣,回想起來是電影裡的某個橋段… 想著那畫面時似乎又離自己很遠… 不管痛苦或快樂也都是那時『當下』的感知,事後的我們就像沒有發生過一樣… 我不確定那是健忘?遺忘?還是我根本不曾存在?… 可能是我長期的意識錯覺,但就是我想表達的東西,然後我就嘗試做一段音樂,因為我沒有把握自己能像專業 VJ 一樣直接用那些 clip 演奏出一段好聽的音樂,以防萬一、也有挑戰自己的意味,我還是決定先做一個背景音樂,而且我真的很想嘗試把「古琴」放在電子音樂裡面(有可能我是想做音樂才想做網站的… 剛好是個機會嘛!😙

但這段音樂做起來也是搞死我,以前只有用一個鋼琴譜軟體(忘了叫麼麼名字了…)和 FL Studio 做過音樂,但我幾乎都是亂摸一通,我是有需要配樂才碰的人…(看我的 Soundcloud 就知道距離上次是六年前了…… orz) 現在要用就一點都不記得,全部都得重新來過,剛開始也想用 FL Studio 來做,摸了好久發現一點都不上手… 於是作罷… 😢 傷心之餘,就改用另一套 Mac 內建的 Garage Band(因為再去找軟體真的太浪費時間了!想說有免費的就用用看好了!)那陣子每天早上練琴還會特地錄音,為的就是剪古琴素材,才發現好難喔!因為我音感不好,所以只能亂拼亂湊,然後對於和弦的應用很差,我勉強只能做出大調的東西!整個聽起來很 happy 捏~(明明也不要這樣表現的… 沒救了😂)還上台胡說給大家一段開心的 music(是我白癡做不出好音樂啦哈哈哈)在嘗試拼湊的過程中也是會發掘很多有趣的效果,一直亂試之後,最後總算還是能拼出一個像樣的東西了!(普天同慶!痛哭流涕!😭😭😭)先把音樂放上來欣賞一下唄!

沒有聽出一朵玫瑰花,也有聽出一朵圓仔花吧!!(這到底是什麼 slogan 😂

我來分享一下自己到底怎麼做這段音樂的……在我決定要做音樂的時候,就想著我一定要用海浪聲!!當然也是為了配合我的海浪啦 😂 還有海浪聲真的有一種平靜的美感,於是找了好多海浪音效才找到比較合適的,然後再搭配《鹿鳴操》第一段樂曲,就像序章一樣開啟序幕,《鹿鳴操》可是我很喜歡的一首古琴曲,也是我第一次表演給別人看的曲目,很適合做開場白呢~ 😙 其實我不太清楚電子音樂編曲的規則是什麼,於是就在網路上查了一下,大概兩個小節一個 loop!印象中應該是這樣…(抱歉連段名叫什麼都想不起來…),然後依據這個不正確的印象開始亂敲鑼打鼓了呵呵呵,每個小段落會配合專案的數量,一種感覺到了就換點節奏風格,幾乎都是憑感覺做的~因為錄音的環境也不好,仔細聽應該會聽到車子的聲音…(我家真的好吵喔 😆),然後中後段會有一大段不停重複的旋律(我不會告訴你我只是想要塞滿我的報告時間 😂),其中還會出現古琴片段,只是為了不要太乾啦 😆,不過因為有這個空檔,就變成是我 SOLO 的地方(自己講)哈哈哈哈,反正我又按地亂七八糟的,人生真是一塌糊塗R~最後一段則是用當時剛學完的曲子《秋江夜泊》的最後一段,因為很喜歡這段又很適合在海上漂泊後回家的感覺,就放上去了!有夠剛剛好~

在做整段音樂的時候不斷反覆聽到自己都快被洗腦,這歌我都快會唱了!(是不是應該填詞啊?!笑💩)好啦!我走一種 local 風啦~沒辦法… 我音樂細胞比較低階… 😭還有我的電腦跟我一樣笨笨的,跑得慢慢、又頓頓的(腦中閃過我大學的古董筆電了…)輸出後才發音質差好多喔… 跟我在軟體聽的感覺差好多,有很多細節被削弱了,覺得很可惜~我雖然音感不好、但我聽力沒有問題喔!😂我真的找不到怎麼調出一樣的音質,難道輸出 mp3 檔案就會差這麼多嗎?!😢(爸拖~有好心人再跟我說一下吧!

在視覺上的呈現,就是用電影的概念了!看得出來吧?!有片頭片尾的梗呢! 😂😂 雖然最後一段因為失誤沒有表演出來真的很嘔(那是當天最重要的戲碼耶! 海的色調也是調了很久才調出適合這故事的顏色,像夕陽般的微弱亮光…就和我這個人一樣很黯淡 😧… 跟去年「直線前進」不同的呈現,這次的方式是「360 環形」結構,更像大腦意識中閃過的畫面,很混亂、很衝突…有些內容看似沒關連,合在一起又好像能表示什麼… 可以說是蒙太奇拼貼手法!因為思想很散,不知道要報告什麼,就偷偷塞一些想到的名詞、形容詞隨機顯示,可能是我做專案的感受吧!又像是在描寫某種狀態或故事,其實我難以解釋是什麼,反正這就是人類看到的我想像的顯像了!先來看看後來有點像預告的影片吧!(全部都是截自網站實際效果~我這麼懶,是絕對不可能再去剪一支動畫出來 der~)

還有有一個部分是花滿多心力在配置鍵盤按鍵!而且後來還發現放的效果和設定太多,嫌鍵盤數量太少!最後還用 shift 做切換(整個會不會太搞工!!!😆 但執著做好一個東西的時候,真的沒在管有多難、麻不麻煩,我只有進入這種狀況才會不辭辛苦耶!我想決定是為「自己」做一個東西的時候,就不會覺得這是「工作」,是一種對自己尊重的態度,雖然我這根本是折磨啦啊哈哈!

這個網站中,因為太多物件了,我也不敢讓它們一次出現太多,否則面數會大增,CPU 會負荷不了!光是背景的海和太陽光,效能就會讓很多電腦跑不動惹… 😐 因為這個海是用 shader 算的,陽光也有陰影效果,海又在陽光和陰影之下產生折射反應… 整個計算太多了!但是這畫面太美我無法捨棄!!! (難得可以在不是客戶的案子上做這種鬼效能,當然要猛力一撞才爽啦!😂)其他零零總總的功能實在太多了!沒辦法在一時片刻講解出什麼,之後有機會就拆解成一個個小 demo 來教學吧!

那就看看網站吧!(避免涉及商業問題,這個網站我改良過了!)

來吧!如果不怕電腦會爆炸可以開起來試試看 😆這個操作方式就是…鍵盤亂按一通都有驚喜啦!
手機版沒有鍵盤,我也沒時間做出觸控鍵盤,所以手機就聽聽海、聽聽我的孱弱的古琴聲就好 😂

去年的專案講幾個有趣的~可愛的領航鯨計畫,是我第一次嘗試用 vue 讓資料模組化,還有像水一樣呼吸的動畫啦!另一個很喜歡的應該是島國民創意網站,除了參與企劃討論,還有發想這個 idea,搞了一個成人網…(我真是太感謝這位聲優了!!!效果太好!害我第一次拿到聲音檔超想笑,根本無法認真寫程式😂😂😂)執行這種網站真的還滿爽 der~還要為了讓它看起來像 2000 年的網站,還不準有 smooth 的效果呢~反著做這真的很哲學思考耶~而且在決定做成人網之前也有開發幾個創意的 prototype,相當好玩呢!

然後中元節搞了一個鬼屋(是來自貞子的遙想 👻),參與發想和程式技術端的執行,其實也是我私心一直很想自己寫 socket 多人連線,還有串裝置啦!(終於讓我等到了!喔耶)不過這個旅程也非常艱辛,時間很趕,而且寶藏巖那個地方太陰森,我人生第一次面對馬桶 debug…(我八字輕很容易卡到陰 😰)遇到太多靈異的事情… 真的快嚇死人了,害我都不敢看直播影片哈哈哈,隔天拜完拜就沒事了~記得下次要挑戰這種東西,還是先拜個碼頭吧!後來上班就偷偷開著網站,看到很多人被嚇也就心滿意足了!😌(hen 壞)

之後參與了數位詩人 MUSE 網站開發,從一開始針對文字的判讀就花很多心力討論,也讓我開始思考中文的字詞結構,後來跟實驗室一起參與討論,發現機器學習是真的很有趣的一個玩意!😳 除了資料的問題要解決,還有網站上的 3D 效果要與設計討論,我這次也故意挑戰了之前覺得很有趣的技術,嘗試把所有 div 都裝進 canvas 裡,但真的很累哈哈哈,我想知道這樣的效果效能能多好,結果效能也是盡力惹…orz,加上一些 shader 效果之後再搭上聲音,然後 MUSE 又會給一些好笑的詩,就覺得這一切都算是很值得的!

最後一個我覺得重要的事情是… 我竟然開始做設計稿哈哈哈(我這個前端怎麼那麼有事情做 😆),因為參加比賽幫忙做設計和剪片,我自己覺得我剪片很差,然後又很懶得做設計! 😂為此重新摸過 Premiere(我真的完全忘記),而且我發現我最喜歡的還是剪音樂的部分,但我太龜毛了,剪個片剪了半個世紀…. 然後還用 Photoshop 和以拉做了很多素材~也是覺得累… (所以我才說不想做設計啊!😂)但是做完還是滿有成就感的,這些素材之後都可以拿來做很多效果,還滿好用的哈哈哈,總之亂玩一通也是亂好玩的~😄

整體而言 2018 年度我做的案子都還滿小的,而且大部分都不是客戶的案子,不過啊!我還是滿喜歡的,因為很實驗性、很能嘗試各種媒材和可能性!比起商業案,我也確實比較喜歡做這種怪網站(怪的都是我的,不要跟我搶 😆),雖然真的滿邊緣,我想我只能跟自己說說話惹!😂大概沒有跟其他同事有共同奮鬥、共同對抗的的敵人的關係,所以之間沒有共鳴,明明處在同一個空間分享,但他們發生的事情我好像全然置身事外,在另一個平行時空 ˊ_>ˋ 上台報告講的那些事情我幾乎無感,我甚至不知道有發生那麼多事情 😂,我只能感覺台上那個人要哭了,我也好感動、想跟著哭,但我不知道為什麼要哭… 大概是這種感覺吧!我的思緒就在這空間中被各種錯綜交雜的情緒給攪亂了!所以我才會時常懷疑自己、懷疑人生吧!

當初剛畢業時就進入前端領域真的很湊巧,差不多在那個時候台灣才陸陸續續有這個職業的誕生,很幸運地在第一間公司中,學習到非常多基礎的流程開發,加上那時候有點閒(?!)做了很多筆記和套件,所以一般網站的前端開發基礎功還算很紮實!後來來到現在這間公司,探索了更廣的領域、學了更多的新穎性的技術,之前跟同事分享過,這一切有點像被回到大學時期的感覺,冥冥之中的路吧… 總之前端的世界深不可測,而且這幾年都很火熱!常常聽到很多人說要「轉前端」!一堆框架林立、一堆新概念被傳唱、甚至幾乎在軟體世界中快達到無邊無際的境界… 因此要學的東西很多!也非常辛苦!一旦進入了這扇門,就會發現踏入另一個新宇宙,但我想這就是前端好玩的地方吧!?(相信不久的將來,「前端」這個字詞也會開始模糊,最終人類的本質就不是可以被分類…)

其實我前端的人生可是很孤單的,但這種孤獨我相信是一種開創、前衛的實驗,這就是新媒體藝術的精神呀~我也真的想知道這些程式可以到達哪裡,所以上天也故意讓這個程式在這個時局變得很驚人吧!哈哈哈,希望大家都要過的幸福一點!最難的事情都可以讓我來試試!可以在困難中悠游自如,不是因為我覺得簡單,我通常比所有人都痛苦… 我的苦建立在自我煩惱和自我糾結上,通一通就好了!我只是願意嘗試看看各種方法、想要找到解答和各種可能性而已,困難的東西只有碰了才知道它長什麼樣子~

無知,才會導致恐懼,覺得困難

為了不要讓無明繼續,一定要親自去嘗試看看,碰到了才知道那個東西是什麼,熟悉它了就不會那麼陌生、就不會覺得難或害怕,而且世上的解法百百種,總有一種適合自己解套的方式吧!這不就是人生的哲學嘛~套一句杰倫的歌「換個夢不就得了!」做不成天才工程師,也不要當個普攏共嘛!😂

這輩子都是要來贖罪
贖我愚鈍的罪

請大家都不要擔心,全世界最笨的就是我!上面這句話是給我自己的 😂

以上就是 2018 的年度分享,藉機做專案的內心劇場啦~
報告完畢。