本次互动媒体期末大作业是编写一个“绘画系统”，该系统可提供一系列绘画材料（例如画笔/颜料/滤镜）给用户操作，以创作出动态/交互的绘画作品。该绘画系统是对“绘画”的概念的扩展，但仍然体现出与传统绘画系统的相似性。
在正式做这个系统前我在网上进行了相关资料的查阅，发现了某位大佬做出的创意动态绘画板，原博客如下：https://blog.csdn.net/qq_27534999/article/details/79427721
在通读该代码后我在源代码基础上进行了扩展，包括一些修改与功能的增加。

总体设计方案

刚进入系统有重要快捷键提醒：隐藏菜单栏和保存画布；
画面左侧是菜单栏：上方是画笔取色板；左下方是功能按钮：
下方第一个调节画布颜色，预置了了九个颜色，如下（请勿长时间盯着这张图，对双眼有害）：

第二个是原博主系统的三种笔刷：

第三个是我增加的4种笔刷：

第四个是禁止动态运动；第五个是局部改变运动时间：

六七不同大小橡皮，方便修改：

八清空画布：

九保存画布/快捷键S，快捷键Shift隐藏菜单栏：

对于扩展绘画概念的理念

对于绘画这个概念，百度百科给的定义是“绘画（Drawing 或Painting）在技术层面上，是一个以表面作为支撑面，再在其之上加上颜色的做法，那些表面可以是纸张或布，加颜色的工具可以通过画笔、也可以通过刷子、海绵或是布条等。”

传统绘画

在未进行这门课的学习之前，我所理解的绘画就是，素描，速写，油画，手绘板绘画等，绘画是某种工具在一个载体上以基本的点线进行的创作，我认为这应该就是传统绘画。
本次制作的绘画系统与传统绘画有什么区别呢，我们从多方面进行比较：

技法

传统绘画中一切从最基本的确定比例布局开始，画线稿，勾线，阴影，填色等，步骤繁多，过程繁琐；绘画系统绘画用鼠标操控，笔刷形状确定，可直接做成复杂图案，减轻绘画任务。

工具

传统绘画：各种绘画用具，宣纸，素描纸，铅笔，勾线笔，毛笔，水彩笔还有各类颜料等，种类繁多，根据绘画风格选择；绘画系统：选色区，各类笔刷，鼠标操控。

理念

传统绘画作画一笔一划而成，效率低；绘画系统拓展出笔刷，一秒刷出n个图案，简单快捷；
传统绘画绘图静态，无法在一幅画中展现动态效果；绘画系统拓展动态笔刷，绘出的图形根据代码规定运动。

创作体验

本次绘画系统的创作主要是基于大神的代码进行拓展，站在巨人的肩膀上登高远眺，学习到了很多新知识。创作过程中也感到十分有趣，在体验已完成的绘画系统时，有成就感，各种笔刷的交替使用，随意作图也感觉不丑陋，有SWAG的感觉，比自己传统绘图感到快乐。

呈现效果

背景颜色很重要，这张图很明显就有一种，十年前的QQ空间感觉。

这张稍微好一点?我感觉

如果你们觉得不好看，嗯，那不是系统问题，是我的问题。

载体

与传统绘画差别只是在背景颜色可随意更换。

局限性

无法画出主观意愿强烈的作品，无法画出写实画；用鼠标操控线条流畅度跟不上，容易歪斜，而且动态图案的运动以我目前能力并不能完全操控。

总结

本系统为传统绘画概念拓展而做，呈现效果与传统绘画有所不同，主要是笔刷的制作与动态效果的实现。

源代码：https://editor.p5js.org/sentient/sketches/Bk2mlpEWV

参考资料

https://blog.csdn.net/qq_27534999/article/details/79427721
http://wow.techbrood.com/fiddle/30598
https://p5js.org/zh-Hans/examples/form-star.html

绘画系统——P5.js相关推荐

绘画系统的简单实现（p5.js）
绘画定义搜狗词条给了"绘画"一个很有意思的词----"猴子的艺术",这是在中世纪的欧洲这样形容的,我觉得十分地贴切,因为如同猴子喜欢模仿人类活动一样,绘画也是 ...
一个基于p5.js的绘画系统
一个基于p5.js的绘画系统一.实现效果本系统基于p5.js完成,具有一般绘画系统的特点,作画者可以通过选择不同的笔刷完成自己的作品.作画者可以根据自己的需要选择静态或动态效果,在动态效果下可以看 ...
基于p5.js的简单绘画系统
本次实验的主题是编写一个绘画系统,提供一系列绘画材料例如画笔.颜料.滤镜等给用户操作,以创作出动态.交互的绘画作品.这个绘画是对传统绘画概念的拓展,但仍然要体现出与传统绘画的相似性. 注意:目标可以理 ...
利用p5.js进行“运动”主题的绘画创作
利用p5.js进行"运动"主题的绘画创作主题用码绘和手绘两种方式创作"运动"主题的作品,对比二者在表现"动态"方面的异同. 码绘工具 ...
基于P5“尝试开发”一个“绘画系统”
为了完成大作业,"自愿"开发的"绘画"系统源代码因为源代码比较多,所以这里只给出网址: https://editor.p5js.org/Wangshuo/s ...
p5.js-创意绘画系统
p5.js-创意绘画系统一.前言二.实验内容 (一)主题 (二)操作说明 1.界面介绍 2.功能介绍 (三)效果展示 1.动态画刷模板 2.模拟画笔 3.背景变化 4.橡皮擦 5.滤镜三.程序详 ...
P5.js 实现交互式动态绘画
p5.js 实现交互式动态绘画 1.关于交互式绘画的思考 2.选定题目 3.内容展示 4.代码分析 (1).按钮的实现 (2).笔刷(画笔) (3).动作 5.总结 6.参考文献 1.关于交互式绘画的 ...
p5.js之“列阵绘图画板”实现大面积规律性绘制
第一次的作品简单体会码绘与手绘的不同之处,浅显的进行比较:第二次的作业增加了动态效果和交互性,让人更能直观地感受到码绘的魅力. 此次作业,主要是在传统水彩和钢笔绘画方式上,做出些改变. 总体设计方案 ...
纯属娱乐的涂色绘画系统
P5.js 之秘密花园--自制线稿上色绘画系统一.灵感来源小时候大家肯定都会见过或者玩过这个,砂画就是给一个模板上面会有轮廓,然后用给好的彩砂颜料上色,画完之后还blingbling的,也是很好 ...

绘画系统——P5.js