基於P5「嘗試開發」乙個「繪畫系統」

因為源**比較多，所以這裡只給出**：

請感興趣的朋友去看一看。

為了完成乙個「繪畫系統」，我們不妨將其想象為乙個傳統意義上的繪畫過程。在現實中，繪畫需要那些要素呢？首先，我們需要乙個畫布，p5.js已經為我們提供了。然後，我們需要乙個調色盤，讓我們不至於只能使用一種顏色來完成繪畫。

受到博主西河某人：創意動態繪圖板的啟發，按照rgb顏色與十六進製制顏色碼轉換，我們繪製了如下排列好的色塊：

![在這裡插入描述](

function colorshow()
}

這個調色盤給出了具體的顏色模版，除此之外，它還有什麼用呢？沒有任何用，因為它無法進行任何互動。下一步，我們希望這些色塊能像按鈕一樣，點一下就讓此刻「畫筆」的顏色變為對應的按鈕。

簡單編寫乙個drawellipse函式，來測試我們得調色盤，發現效果還是闊以的。

但是，有乙個問題，因為調色盤也是繪製出來的，難免被新畫的圖形覆蓋了，解決這個問題的方法，也簡單粗暴，就是框定繪製圖形的範圍，留出功能按鈕的區域。

function brushselect()
}}

效果如下：

其中一種圓形繪製函式：

//隨機圓形繪製函式
function drawellipse3(x,y)}}
}}}

能繪製一些基本圖形之後，我們遇到了乙個新問題，如果：有乙個圓形，畫的不是地方，怎麼辦，總不能重新執行程式，再畫一遍吧？很明顯，這樣效率太低了，那麼我們就應該做乙個橡皮函式，點一下，就能將滑鼠變成乙個橡皮。

//橡皮函式
function eraser()
} }}

有時候，橡皮太慢了，所以就額外做了畫板復原按鈕以及畫板顏色填充按鈕，這部分按鈕排列在了畫板右邊，與左邊的筆刷選擇按鈕區分開。每個按鈕對應了乙個函式，點一下復原按鈕可以將畫板重置為初始狀態，畫板顏色填充按鈕，可以讓畫板變為此時顏料板選定的顏色。

有了主框架之後，現在的需要進行的就是細節填充工作，這一部分其實是最耗費時間的事情，因為這一過程中，寫了大量函式以及將函式和相應按鈕匹配起來。

最後完成的繪板如下：

完整的**，請在鏈結中檢視，這裡只給出幾個簡單的筆刷函式：

//一般鉛筆函式
function zpencil()
} }}

//隨機三角形繪製函式
function drawsuijitri(x,y)}}}

我們簡單扼要的比較傳統繪畫與**繪畫的區別：

1.傳繪需要**低廉的紙和筆，但它們都是消耗品，碼繪需要**高昂的電腦和鍵盤，只要不砸鍵盤理論上無限使用

2.傳繪的創造過程循序漸進，添一筆有一筆的精彩，碼繪的完成進度難以估量，少乙個變數就啥都沒有了

3.傳繪需要大量重複行為的磨練技藝，碼繪只要for迴圈就夠了

4.然而，傳繪即使重複再多次也不能做到真正的複製，碼繪在貼上複製方面如火純青

5.傳繪的每一件作品都凝聚著創造者的心血和精力，碼繪的第一件作品也凝聚著創造者的心血，之後就只有電費了

6.傳繪需要大師，大師的作品總能照亮人心，碼繪需要大神，大神的**…更能照亮人心

7.傳繪的創造是心裡想著什麼，手中就會努力創造什麼，但是畫的總沒想的好看，碼繪的情況比較特殊，有時候bug改著改著就有意想不到的效果

8.傳繪需要品，每一筆都能看出作者的功底，碼繪需要查，每乙個函式都是文件搜尋來的

9.傳繪理論上不可能合作創作，因為合作了就不再是屬於某個人的作品，碼繪不存在完完全全個人的作品，除非它從二進位制去編碼。

10.傳繪是快樂的，它的快樂娓娓道來，一筆筆畫出來，每一筆都是愉悅的，碼繪也是快樂的，它的快樂就像過山車一樣，修改bug的心塞會在成功出效果的那一刻全都轉化為巨大的快感。