Doodle Board（p5.js实现互动画板）

目标

• 编写一个“绘画系统”，提供一系列绘画材料（例如画笔/颜料/滤镜）给用户操作，以创作出动态/交互的绘画作品。这个绘画系统是对“绘画”的概念的扩展，但仍然体现出与传统绘画系统的相似性；
• 在材料/交互方式/作品呈现/作画者四个方面中，至少有两方面要体现出与通常的国画/水彩/油画/素描/数位板+电脑作画/钢笔画等大家熟知的绘画形态有较高相似性；
• 在材料/交互方式/作品呈现/作画者四个方面中，至少要有一方面要体现出不同于通常绘画的特色；
• 在作品呈现方面，必须体现出动态效果，最好能体现出交互性；

阅读资料

https://blog.csdn.net/magicbrushlv/article/details/83858469

https://blog.csdn.net/magicbrushlv/article/details/84106686

制作过程

最终演示视频和相关代码展示：https://www.bilibili.com/video/av39374689/

Step.1

为什么叫Doodle Board？

这个名字灵感来源于我很喜欢的游戏“Doodle God”，游戏中可以通过几个相同或不同的元素合成新的元素，感觉很像我写作业的过程……

doodle board的重要组成元素有四部分：

• 画板总体框架参考：https://blog.csdn.net/qq_27534999/article/details/79427721
• 鼠标事件的响应：https://github.com/magicbrush/PixelArray/tree/master/PixelArrayV1/MouseInteractionDemo