第一次的p5.js練習：會動的調色盤

連結：openprocessing.org/s...

練習內容簡介

1. 由左至右、由上而下生成16 * 16像素的畫布

2. 隨機選定一個色相，並且由其為基準生成一個調色盤

3. 像霓虹燈一樣動起來！

簡單的心得

在上禮拜的區塊鏈應用課程上，老師向我們介紹了p5.js，並帶我們進行了第一次的實作練習。其實之前就知道這個函式庫的應用和簡單原理，也看過一些用p5.js創作的作品。只是我過去對於用coding來繪畫的創作方式只有兩個想法：「蛤，為什麼不手繪」和「感覺有點無聊」。

直到上禮拜實際操作之後我完全改觀了。其實用程式碼創作和手繪創作的過程其實很類似，並且令人上癮：

把開發中的程式碼放在畫面左邊、生成的圖像放在右邊，只要在vscode修修改改並按下ctrl+s，想要的效果便馬上在畫面中呈現。這是我第一次發現原來寫程式的反饋感可以如此之高，甚至高過於開發遊戲。如果國小的電腦課是教這個該有多好啊（？）

不過回到練習本身，我感覺程式碼還是太長了，而且有一些比較冗贅或有問題的部分，感覺很多老手看到會滿頭問號哈哈。舉例來說，我原先是將256個像素存到一個一維陣列裡，後來做到第四個版本突然想到「不對，我的畫布不就是一個16乘16的二維陣列嗎」，所以再補上splice把一維陣列裡的東西搬家到新的二維陣列，結果前者就剩下空殼在那吹風了哈哈。可能之後有時間再修改一下吧，或許還可以加上不一樣的移動模式。