繪畫定義

搜狗詞條給了“繪畫”一個很有意思的詞----“猴子的藝術”，這是在中世紀的歐洲這樣形容的，我覺得十分地貼切，因為如同猴子喜歡模仿人類活動一樣，繪畫也是模仿場景。

對繪畫的基本定義------繪畫是造型藝術中最主要的一種藝術形式。它是指運用線條、色彩和形體等藝術語言，通過造型、設色和構圖等藝術手段，在二維空間(即平面)里塑造出靜態的視覺形象，以表達作者審美感受的藝術形式。

關于繪畫分類

從使用材料、工具和技法劃分：中國畫、油畫、素描、版畫、水彩畫、水粉畫、粉筆畫等。

從題材內容劃分：肖像畫、風景畫、風俗畫、靜物畫、歷史畫、宗教畫、動物畫等。

從作品形式的不同劃分：壁畫、年畫、連環畫、宣傳畫、漫畫等。

繪畫是另一種形式的語言，其表現方式主要有以下幾個部分體現

(1)線條;(2)形體;(3)色彩;(4)色調;(5)動感;(6)筆墨(筆觸)

而對于要自己開發一個簡單的繪畫系統，我主要從 線條，色彩，動感和筆觸這四個方面進行研究和設計。

先來看看windows自帶的繪畫系統

整體界面

界面比較簡潔，明了，上部分是工具欄，可供用戶進行筆刷形狀的選擇，粗細的調整，顏色的選擇，下半部分就是畫布。

筆刷

其筆刷主要有以下幾種，質感不同，粗細不同

設計的繪畫系統

本次設計的繪畫系統也模仿其上，主要結構和上圖類似，也就是簡單地上面是工具欄，下面是畫布，如下圖（以深墨綠色作為畫布）

高更說：“畫面的表現內容，在它被人們認清之前，必須像一支有魅力的樂曲，浮現出來。”

本繪畫系統打破常規，在基本的繪畫基礎上，豐富展現交互的形式。

效果展示

- 畫線

- 畫圓

- 花環

- 驚訝臉&愛心

- moveline

- 莫比烏斯環

- 有趣的點線

- 煙花

- 會變粗細的點

- 絨毛狀筆刷

- 文字筆刷

- 橡皮擦

基本的筆刷功能的展現就到此處

與普通繪畫系統的對比

• 操作角度：

同：和普通的繪畫系統基本一致，都是通過鼠標的點擊、滑動進行繪畫，
異：此繪畫系統通過鍵盤上的方向鍵↑↓來更改筆刷的粗細。

• 工具：

同：都提供了顏色，以及筆刷的選擇
異：此繪畫系統提供的筆刷形狀不同于普通繪畫系統的單一線條，提供了各種涂鴉形狀，如：心形，驚訝臉，莫比烏斯環，圓圈，文字，絨毛狀的筆刷，煙花等。

• 技法：

同：都是用鼠標進行繪制
異：普通繪畫系統的線條主要是跟隨鼠標的位置進行移動其他的不受影響，而本繪畫系統，線條除了受鼠標位置的影響，還受鼠標移動速度的影響。

• 理念：

同：都是想讓作畫者在畫作面前馳騁自己的聯想和想象，達到心曠神怡的最佳審美境界。

• 創作體驗：

異：此繪畫系統能夠很好的進行交互而且畫出的形狀種類繁多，都些筆刷甚至可以達到治愈的效果

• 呈現效果：

異：普通的繪畫系統最終所作的圖是靜態的，而本繪畫系統最終的呈現是動態的，更加富有趣味性。普通的繪畫系統主要是在二維平面上，而本繪畫系統可以體現三維空間上。

• 載體：

異：普通的繪畫系統主要是以App/軟件作為載體
本繪畫系統是在網頁上進行的，無需安裝，當然也是可以保存畫作的。

• 保存方式：

同：如只需保存靜態圖，對于靜態圖而言，和普通的繪畫系統并無二致
異：本繪畫系統一般創作的均為動態圖，因此要體現動圖，必須進行錄屏操作。

• 局限性：

普通的繪畫系統無法體現動態的效果，缺乏一定的趣味性，這些此款繪畫系統可以解決，但是此款繪畫系統的不足之處在于，在畫動圖的時候消耗的內存較大，在網頁上運行時可能會出現卡頓的現象，從而來影響體驗。

關于

本繪畫系統運用p5.js ，簡單運用了粒子系統

繪制形狀 主要運用了如下函數
rect();ellipse(); line(); bezier();text();
其他的一些重要函數：
map();resetMatrix(); saveCanvas();keyPressed(); mouseClicked();等等

創新之處

• 制作出了具有絨毛質感的筆刷
• 運用動態的煙花進行繪畫
• 使用的線條有治愈的效果

靈感來源

想到了表演藝術導演蔡國強老師，他對焰火藝術有獨特的理解，用焰火的痕跡創作了很多畫作

我也想用煙花留下的痕跡來試試繪畫的效果，所以就在繪畫系統中運用了一下。

有些繪畫是具有治愈功能的，想通過此動畫系統也實現一下具有治愈功能的繪畫方式，以及繪畫作品。

字符圖片的創作（將一張圖片轉化成字符圖片如下圖，最近又十分流行）

在繪畫系統中實現用字符畫畫（將字符轉畫），并且實現動態的效果

本繪畫系統還有很多不足之處：
本系統只選了最近比較流行的顏色，檸檬黃，火焰紅，島嶼天堂藍，尼加拉藍等，因此顏色不夠豐富。
筆刷形式也有局限性

在這里要特別感謝 西河某人 的博客提供的p5.js web界面顯示的框架，以及在魔筆玩家博客中受到的啟發。

參考文獻

[1]以編程的思想來理解繪畫----（一）用”一筆畫“表現“過程美” magicbrushlv
[2]p5.js可以做什么 之 創意動態繪圖板 西河某人
[3]《繪畫色彩》
[4]《processing創意編程》

總結

以上是生活随笔為你收集整理的绘画系统的简单实现（p5.js）的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。