Nyan Cat ©Chris Torres via GIPHY

在疫情拉開實體距離的這段日子，「線上化」是維持著人與人之間聯繫的一大功臣。拜疫情所賜，藝術界的交易也掀起一股改變的浪潮──透過NFT這樣的加密技術線上競標、拍賣藝術品。如果是近期有在關注老闆動態的大家，對於這個詞或許會有一些些印象，今天就來聊聊NFT這個神奇的東西，以及老闆如何踏入NFT這個新興的藝術市場交易形態。

什麼是NFT？ 如何運作？

NFT ：非同質化代幣（Non-fungible token），簡單來說概念就是「數位正本」。在傳統的藝術市場中作品之所以可以交易、販賣、或有投資價值，是因為我們有辦法認知它的所有權是誰。假設你有一幅畢卡索的畫，因為是實體所以他在數量上具有獨特性（世界上只有唯一一幅），但在數位藝術的世界中以往是無法確立這件事的。當我們下載一個圖像、一首音樂時可以複製很多份，導致「正本」這個概念難以存在。現在有了區塊鏈的技術，我們可以透過NFT來做到「數位正本」以確保作品的唯一性和所有權，進而創造了數位的交易市場，讓藝術作品可以透過電子化的方式被交易與收藏。

透過NFT我們可以知道這件作品的總量是多少、持有者是誰，畢竟區塊鏈這個技術就是把所有資料儲存在不同的節點上，包含被交易到哪裡去等資訊，當大家都持有這些資料時，就像有一個具有全球公信力的機構去背書這件事情的存在，公開且透明。

擁有一個加密錢包帳號是必備的前置作業，若是沒有加密錢包，則你無法在任何NFT交易平台上進行買賣交易。以OpenSea這個平台為例，用戶若是想要購買任何作品，皆需要用以太幣作為付款貨幣，因此在註冊完加密錢包後需買入一些以太幣（ETH）。上述都準備好後，就可以選擇一件喜歡的NFT作品購買完成下單。

接觸NFT的契機？

稍微介紹一下身上掛滿各種title的老闆背景，從在台灣創立墨雨設計工作室，與故宮、工研院等單位合作專案、接著前進紐約進修整合數位媒體相關碩士，現在在美國同時身為全職藝術家和兼職互動設計師。在偶然一次與學長的交談中談到可以嘗試將生成式藝術的作品上架成NFT，於是就上架了20幾個作品到最大的 NFT 市集公海 OpenSea。一開始並沒有引起多大的迴響，直到其中一個小機器人遭到他人抄襲並上架至Artblocks販售，雖然是一個不怎麼愉快的作品瓢竊事件，卻直接讓老闆的作品在市場上刮起一陣炫風，進而爆紅。（延伸閱讀：NFT故事集：用程式碼畫畫賣出一億元的台灣人）

有哪些NFT相關平台？

目前市場上可以分為主要的四大平台：

OpenSea – 「這裡是公海！」如果有看過賭俠的朋友或許對這句話很熟悉，OpenSea正如其名可說是最自由的NFT平台。他是最基礎的底層架構，提供各種數位資產和支援多種的支付代幣，並且可以免費註冊和瀏覽廣泛的產品。他有點像是市場本身，裡面住著大大小小並有各自特色的攤販（Foundation、Artblocks）。對於NFT世界的初體驗，OpenSea是一個很好的起點。

Artblocks – 專注於策劃可程式設計生成藝術作品的平台，這些作品通常使用 p5.js 進行程式設計。目前平台上的作品分為三種類型： a. Curated Projects (策展專案) – 由平台方精選作品所做一系列的策展計畫，主要目的在於挑選出符合平台主旨的作品，也就是尋找世界上最有趣、最創新的生成式藝術。 b. Artist Playground（藝術家遊樂園）- 一旦作品曾被選入過curated projects ，藝術家便拿到通往playground的門票，在這裡藝術家們被鼓勵嘗試更實驗性的作品。 c. Factory（工廠）- 上述策展專案等通常需要經過一段長時間的發酵作品才得以登台供大眾欣賞，對於一些藝術家來說，透過factory能更容易快速上架一系列作品。 （延伸閱讀：A Brief Guide to Curated, Playground, and Factory Projects on Art Blocks）

Foundation – 以販售單張靜態作品為大宗，經營的概念與氛圍較貼近展場或藝廊。與其他「申請審核制」的平台不同，Foundation 是一個邀請制的 NFT 藝術平台，只有受邀請的藝術家的作品才能被上架。

Rarible – 作品型態比較像是Gify、imgur，通常較數位化一些，也比較多以Gif的形式呈現。

有哪些不同性質的NFT？

最傳統的有單張的圖片，稍微進階一點可以上傳影片或Gif，這些也是滿受到歡迎的作品格式。當然像我們在推廣的生成式藝術也是常見的作品型態，但考慮到生成式藝術的特殊性，如果只有單張圖片的瀏覽會有些可惜，也失去了他是用程式產生渲染的本意。Artblocks便推出了Preview API的功能，把程式碼放在區塊鏈上打包，透過iFrame鑲嵌程式碼進去可以有一些動態、互動性的網頁型呈現。當然像是3D、音訊檔等，也是藝術家常選擇的表現手法。正因為NFT本身的多元性不只有生成式藝術，如果你是插畫家、音樂家其實也可以透過平台直接上架，甚至有些平台如Foundation也提供split等收益分成的功能，鼓勵不同的藝術家合作創作。

https://oncyber.io/

有哪些知名的藝術家？

對於剛踏入NFT世界的朋友來說，這邊推薦幾個不錯的藝術家給大家：

• Dmitri Cherniak – 元老級NFT藝術家，最知名的為Artblocks上的Ringer系列作品。 https://www.artblocks.io/project/13
• Tyler Hobbs – 早期在紐約經營很久的生成式藝術家，知名作品為Fidenza系列。 https://tylerxhobbs.com/
• Cryptopunk – 8位元風格像素的龐克角色，每一個都外貌奇特。 https://www.larvalabs.com/cryptopunks
• 阿亂 – 投身數位藝術創作十餘年的台灣藝術家，知名作品為具有時間性的影音創作Good Vibration。 https://www.artblocks.io/project/140

NFT的附加價值

以往藝術交易是一個窄門，需要有門路、有人脈、與藝廊簽約等等資源，才能夠開設自己的個展或販售自己的作品。透過NFT平台，藝術家可以繞過需要跟藝廊簽約的限制，即可公開地販售作品，可以掌握自己的品牌經營，並達到數位平權。

隨著NFT的市場白熱化，也有一些延伸的遊戲話社群如Axie Infinity的出現，將遊戲內的角色製作成一種NFT，遊戲圍繞收集，繁殖，戰鬥和飼養名為Axies的幻想生物為中心。

老闆與NFT

前面介紹了這麼多NFT的相關背景故事、知名的藝術家等，現在我們來聊聊老闆的NFT作品，還有踏入NFT後一路上遇到的各種奇聞軼事。

老闆的NFT可以分為兩種路線：精緻風與迷因風。通常比較精緻的作品會上架在FOUNDATION上，而比較趣味、迷因感的則是上架在OpenSea上。

如果有關注老闆NFT動向的朋友或許對於盜圖事件有些熟悉，這邊還是稍微介紹一下整件事情的來龍去脈。某天老闆在IG收到一個陌生私訊表示有人竊取他的作品Strange Robots系列並上架到Artblocks。這個系列名為 sail-o-bots，由 Sturec 與其夥伴打造，作品內容為 750 隻在海中漂浮的方塊火腿，所以簡稱 SeaHams 海火腿。當時這系列上架時受到熱烈歡迎馬上銷售一空，但當瓢竊的事實爆發，許多持有者紛紛低價拋售，也有許多人藉由此機會關注到老闆的作品，進而支持和聲援。

未來的創作計畫

近期老闆這邊也與Artblocks如火如荼地討論一些有趣的新企劃Electriz，近期將會上架至Artblocks。作品的主要概念為粒子與空間的互動，傳統物理學中科學家利用撞擊等方法試圖找出世界上最小的單位，然而粒子之微小要如何監測呢？我們利用煙霧讓粒子留下運動軌跡，經由這些粒子的半徑、質量等去判斷他是否為新的粒子。這個作品把根據圓周或隔線切成不同的部分，每個空間裡面有自己的物理法則，有的會旋轉、有的會有噪聲，粒子經過這些不同的影響，進而留下不同的軌跡和表現。

這系列的作品已經台灣時間 2021/12/08 凌晨一點開賣，歡迎有興趣的朋友持續發摟唷！

作品介紹：https://cheyuwu.com/nft

Artblocks：https://www.artblocks.io/project/216

以上是這次老闆週六來聊聊的內容，希望大家看完後也可以加入NFT這塊汪洋藝術之海，直播影片請往這裡走，我們下次再見啦！

這篇文章 【老闆週六來聊聊】我開始賣NFT作品啦！生成式藝術在NFT的價值 最早出現於 Creative Coding TW - 互動程式創作台灣站。

管理的大師 IAM

IAM (Identity and Access Management)，誠如其名，當你今天開始使用AWS，想要兼顧預算控制和資安品質時，可以考慮IAM的服務。透過設定雙重認證的機制，登入時不只要輸入密碼也需要MFA的認證，以達到資安的控管。甚至當你想讓某些人參與你撰寫許久的AWS專案，但是卻不想提供你所有的權限(Policy)，這時你就可以透過IAM來達到需求。

美輪美奐的倉庫 Amazon CodeCommit / S3

身為每天需要撰寫上千上萬行程式的工程師，總是需要有地方擺放及歸納程式碼，這時Amazon CodeCommit 就是你的好幫手，你可以創建所謂的桶子 (bucket) 來歸納不同專案程式碼所想放置的位置，並輕鬆透過使用者介面上傳檔案；甚至進階一點，除了程式碼以外，當你想讓你上傳的資料進行回溯，又或著上傳的圖片想供人觀賞，也可以透過Amazon S3 (Amazon Simple Storage Service)實現。

：「你好，我是xxx」Amazon Route 53

Amazon Route 53 (Route 53)，當你今天想要上網搜尋Google這個網站，卻發現要打216.58.200.46

這一串看不懂的IP，是不是會感到很不方便也很不好記呢？ Route 53 有提供所謂的DNS服務 (Domain name service)，你可以註冊網域 (domain)，並可依據自己的需求添加子網域 (subdomain)。聽起來有點複雜，但其實就是http://monoame.com可以變成http://www.monoame.com，兩者都可以導到墨雨的官網。你也可以透過前面所提到的S3服務，將建好的的Bucket和Route 53 註冊之自訂網域名稱結合在一起，並讓網站建立重新導向，設定完成後便可以透過你註冊的網域來瀏覽你倉庫內的資料。

這邊和大家分享幾個必備的小知識，是我自己比較好記的方法：

A – 沒錯，就是我，前面有說這是一個DNS服務，也就是將某串數字對映到我身上

AAAA – 成熟的我，原先的規格(IPv4)已經容納不下我了，我必須長大 (IPv6)

CNAME – 我的綽號別名

上面這三個功能在AWS上面的調適，是我最常使用到的功能，更詳細的資料可查詢AWS文件或維基百科，有興趣的人可以多多利用以上資源去研究及學習。

出門要記得上鎖 AWS Certificate Manager

AWS Certificate Manager(ACM)，顧名思義，他是一個認證系統。你可以將你註冊的網域，加上憑證或金鑰，即所謂的http 變成 https 保護你在AWS所部署的網站及應用程式。

更進階一點，你也可以將別人註冊的網域加到自己的網域內，當對方驗證成功後，你就會有對方家的鑰匙，你可以將自己的東西透過下述的任意門 (Amazon CloudFront) 部署過去該網域…等。

多拉ａ夢，我也要任意門 Amazon CloudFront

Amazon CloudFront，在家看劇本該是一種消遣，但是當你看劇時如果頻頻跳出轉轉轉的載入畫面，是不是多少讓人有點沮喪？CloudFront提供了所謂的「內容傳遞網路 (CDN)」 的服務，它會利用離你最近的伺服器，並結合上述 S3, Route53, ACM…等功能，更快速地的將資訊交付到你的手上，就像任意門一樣讓你不用耗費等待時間即可拿到你想存取的內容。

你也可以透過CloudFront達到指定桶子內的的功能，下面是我S3桶子內的結構：

index.html

tw – index.html

jp – index.html

今天使用者想要他的網站能透過子網域切換語系，像是http://jp.monoame.com及http://tw.monoame.com，就可以使用CloudFront路徑功能來進行調試，可以很方便地指定內容。

上面這些功能學完之後，就可以當個小小的雲工程師了（是不是很令人心動，老闆快給我offer！），那當然AWS還有許許多多的功能，像是EC2、RDS、Lambda…等，如果在實務上有需要使用到，都很值得花點時間研究學習。

最後來做個總結，工程師這個行業簡單講就是遇到問題，就想辦法去解決，並去學習最合適的方法。你也不必說需要將AWS的所有功能都摸熟，掌握一門工具，是在於使用得精不精準，只要知道如何快速找到相關工具資源，遇到難題就能事半功倍。假設今天AWS能為你的產品帶來更多的優勢，學習並了解它，可能就會是必經的道路。畢竟，要怎麼收穫，先那麼栽。

IAM (Identity and Access Management)，誠如其名，當你今天開始使用AWS，想要兼顧預算控制和資安品質時，可以考慮IAM的服務。透過設定雙重認證的機制，登入時不只要輸入密碼也需要MFA的認證，以達到資安的控管。甚至當你想讓某些人參與你撰寫許久的AWS專案，但是卻不想提供你所有的權限(Policy)，這時你就可以透過IAM來達到需求。

< 操作流程 >

首先輸入登入用的電子郵件、密碼和帳戶名稱。

再輸入電話、區域等詳細的帳戶資訊。

接著需要輸入魔法小卡的資訊，如果是免費方案AWS不會收取任何費用唷。為了驗證卡片的身份是否正確，會有一筆 1 USD的待處理交易金額，驗證後會在二週內刷退，敬請放心但只會保留3到5天。

輸入驗證帳號用的手機，稍後AWS會寄送驗證的簡訊，請務必確定手機可以收發唷。

輸入剛剛收到的簡訊驗證碼，完成驗證。

選取使用的方案即可完成註冊啦，是不是簡單又迅速呢 🥰

用剛註冊好的帳號來試登入看看。

登入後這就是AWS的管理主控台，如果對於服務不是那麼清楚，可以透過下方的入門教學快速上手，有更深入的問題想了解，也可以透過右方的探索AWS、或提交意見等方式和服務人員聯繫唷!

AWS雲服務，讓你在遠端也能輕鬆完成數據搜集、程式碼交換。

這篇文章 【合作推廣】 AWS帶你在雲端飛 最早出現於 Creative Coding TW - 互動程式創作台灣站。

當我們想要在網頁上繪圖，最常用的除了 CSS 之外，就是 HTML5 提供的 Canvas 了，Canvas 的 API 接口讓我們可以實現有效率、高靈活性在網頁上繪圖的夢想，Canvas 的許多基礎都在 動畫互動網頁特效入門（JS/CANVAS）中提到，讓你可以從頭開始，完成豐富的網頁互動創作。

但是對於想要快速開始互動網站、藝術創作的人來說，Canvas 上像是繪圖、形狀、物理模擬或是常用的數學公式等功能都需要自己從頭處理。有沒有更快的方式呢？

答案是有的，就是今天要介紹的 p5.js，p5 是由 Processing 延伸而成的 JavaScript 函式庫，Processing 是設計給沒有程式基礎的人快速進行創作的平台，而 p5.js 可以理解為 Processing 的 JavaScript 版本。它將許多繪圖、數學、物理模擬等函式封裝好讓我們可以直接使用，如此一來我們可以在享受 Canvas 繪圖的同時不用費心思處理瑣碎的工具！

範例分享

在本篇文章中我們將會實作一個簡單的畫布，把滑鼠當作筆刷，滑鼠經過的路徑會留下彩色的軌跡，點擊的狀況下軌跡則變成方形的圖案，增加繪製的多樣性。

想要跟著影片一起看也沒問題，請從這邊走 👉

我們將以 OpenProcessing 作為本次範例的平台，這是一個像是 Code Pen 的線上程式碼編輯器，可以在創作的同時即時看到程式碼運做的狀況，十分方便！

p5.js 創作環境

如果我們在 OpenProcessing 創立一個新的專案，會看到一個預設的專案長這樣子：

介面非常簡單，左邊是程式碼的區塊，右邊是目前程式繪圖的結果。我們在左邊輸入的程式碼在按下上方的執行或是（cmd + Enter）之後就會即時更新在畫面上。

畫布設定 setup() 與 draw()

p5.js 的專案由兩個主要的函式構成，setup() 與 draw()。setup() 負責程式的初始化，只會執行一次；而 draw() 則會持續更新，我們也可以透過 print(frameCount) 把禎數這個內建的變數打印出來，在 console 中看到當下畫面更新了多少次。

我們通常會在 setup() 中設定一些通用的初始值，例如畫布的大小、背景、繪製型態（2D 或是 3D）之類，在 draw() 中撰寫會時時更新的程式碼，像是筆刷的更新、物件的移動、滑鼠位置、感測器的資料更新等。就算我們不懂 p5 的函式，也可以從 OpenProcessing 的範例中猜出 createCanvas(windowWidth, windowHeight); 是創建畫布，background() 是設定顏色；ellipse(mouseX, mouseY, 20, 20) 是用滑鼠的位置繪製一個寬高各 20 的圓形。

圖形繪製

如同一開始所說，在 p5 要繪製圖形非常容易，以方形來說，我們只要使用 rect() 函數，輸入要繪製的 x, y 座標以及長寬，就可以變出一個方形，圓形也是同理，使用 ellipse() 函數就可以變出來。如果想要知道更多內建的圖形函式，也可以參考文件中的 2D Primitives 部分。

這邊要注意 rectMode() 的設定，如果將他設定為 rectMode(CENTER) 的話繪製方形就會把左標訂定在方形的中間，否則就是方形的左上角喔！

動態改變顏色與線條

能夠繪製形狀之後我們可以試著給圖形一些顏色，在 p5 裡面，設定的函式是 fill() ，裡面就像是 background() 一樣，可以填入 HEX、RGB 等色碼、顏色的英文等參數。要設定顏色也很簡單，在繪製圖形之前加上 fill(‘你要的顏色或是色號’) 就行了。

此外我們也能用 stroke() 與 strokeWeight() 設定圖形邊線粗細或是顏色 noStroke() 則是不加任何的邊框。合併在一起看看吧：

加上判斷式

p5 當中提供了不少可以直接運用的狀態，像是 mouseIsPressed 就是當下滑鼠是否有點擊事件，或是 keyIsPressed 判斷使否有點擊鍵盤事件，甚至是行動裝置的感測器也有 accelerationX, Y, Z 等事件。讓偵測事件變得十分方便。

我們希望在點擊的當下，繪製出不同的形狀，只要在隨時更新的 draw() 當中加上判斷式 if(mouseIsPressed){繪製我要的圖形} 就可以了。

將上述的功能組合在一起

做點有趣的組合，讓作品隨著 frameCount 改變筆刷顏色、增加滑鼠點擊出現不同繪圖的互動，最後再使用隨機改變圖形大小，就完成一個有趣的互動作品了！是不是比自己用 Canvas 土砲慢慢做來的方便多了？來看看我們的成品吧：

以上就是這次的 p5.js 快速上手，p5 的文件寫得很完整，如果有遇到不懂的問題查閱一下，說不定就可以馬上解決，文件中更有互動的範例，簡直是無痛上手程式創作的最佳利器！

希望這個介紹對大家有幫助，如果想要學習更多程式創作的手法與內容，歡迎來看看墨雨設計最新開設的「互動藝術程式創作入門 Creative Coding」 課程，會從頭介紹程式創作的概念與手法，讓你快速做出生動豐富的互動作品喔！

等不及想用p5.js創作嗎？
【p5.js創作教學】電波電路Wave Circuit – 來做個逼哩逼哩送訊號的電路吧！（直播筆記）
【p5.js 創作教學】 色散海葵（直播筆記）

這篇文章 p5.js 快速上手：互動網頁教學 最早出現於 Creative Coding TW - 互動程式創作台灣站。