I Have No Eye Deer
半夜 12:00 在想這週週記要寫什麼,突然很想做一個有迷因感的 NFT,於是就做了。
靈感來自於一個聖誕節英文冷笑話,高中時聽到的,但直到現在我還是很喜歡(而且剛好也很應景?雖然距離聖誕節其實還有一個多月)。
- What does Santa call a reindeer with no eyes?
- I have no idea.
- Santa has no eye deer either.
(其實蠻冷ㄉ)
總之,既然決定要做了,就馬上開始動工!
心裡的雛形
決定做「迷因感的 NFT」時,當下心裡想到的畫面是一隻無眼鹿的簡單線條圖案以很快的頻率持續閃閃閃、切換隨機顏色,並配上文字 I Have No Eye Deer。而要完成我的構想也不困難,只需要一張黑白稿的無眼鹿圖片,再撰寫能將圖片重新著色的程式碼就可以達成了!
首先先畫張 no eye deer
打開 VS Code
接著便是 coding 時間了,在 GPT 大神的陪伴下一切都進行得非常順利。
(大致流程:圖片改成單個隨機色 >> 加入frameRate,四種隨機色的圖片循環播放 >> 加入文字、排版 >> 改為自己想用的字體、微調排版 >> 思考文字要加入什麼動態效果 >> 反覆糾結半天 >> 最後發現一堆奇奇怪怪的想法實踐出來也不好看 >> 返璞歸真選擇只有小動一下的方案 >> 加底色 >> 錄影截圖收工!)
值得一提的是,這週在另一堂 JavaScript 的課程中,我剛好學到了 lambda 的用法,於是這次我也嘗試將程式碼多多改用 lambda 寫,結果發現用了 lambda 之後程式碼真的簡潔好多,可以省去很多 for 迴圈。
像是這次有段程式碼是要建立一個叫 rgbs 的陣列並放入 4 個隨機顏色的rgb。按照我過往的寫法,可能會需要寫兩層迴圈,或是只寫一層但把下一層的 r, g, b 都自己列出來打一遍(總之就是要寫兩層迴圈,或是很多很多行程式碼),然而使用 lambda 後,直接可以一行解決:
rgbs = Array.from({ length: 4 }, ( = Array. from({ length: 3 ), () => floor (random(256) )));
根本黑科技吧!真的超方便的!!
總之,這週成功使用學到的新工具讓程式碼行數大幅縮減實在很感動也很有成就感~
(半)成品
成品展示 ytb🔗 :youtube.com/shorts/7...
更:今天上課知道了可以用 Open Processing 來分享作品 & 程式碼,於是也在平台註冊跟上傳ㄌ🔗:openprocessing.org/s...
(根據上次的經驗, matters 上的 gif 貌似是跑不出來,所以這次直接把影片上傳到 YouTube ,有興趣的可以看一下動態版的效果!)
總之成品也是蠻順利地達到我心裡當初預期的模樣,最終成品是一張正方形的圖片,中間有一隻無眼鹿的插圖持續閃爍 4 種不同的顏色,並且字會小幅地左右移動。
小結
這次有了先前花布專案的經驗,實作下來真的輕車熟路了許多,整體製作過程都蠻順利的!不過目前的版本還不算最終成品,除了視窗介面設定還需要完善以外(避免發生跟上次一樣在瀏覽介面卡住的憾事QQQ),我還希望可以幫背景加上動態效果,等之後學到做流體感(?)的技能後,屆時我會再把它加進背景來完成作品並上架!
最後,再來一則聖誕節英文冷笑話
- 聖誕老人如果倒著走路會說什麼?
- Oh! Oh! Oh!
還有萬聖節也快到了,也來一則好了
- 為什麼骷髏不去舞會?
- 因為它 has nobody to dance with.
希望大家沒有被冷到太慘,祝大家期中順利~
喜欢我的作品吗?别忘了给予支持与赞赏,让我知道在创作的路上有你陪伴,一起延续这份热忱!