P5.js动态绘板

最新推荐文章于 2023-08-08 23:23:20 发布

雁三白

最新推荐文章于 2023-08-08 23:23:20 发布

阅读量903

点赞数 1

CC 4.0 BY-SA版权

文章标签： p5.js 绘板

本文链接：https://blog.youkuaiyun.com/qq_43383599/article/details/85336304

本文介绍了一次使用p5.js创建动态交互绘板的实验，结合两个基础绘板的功能并进行扩展，实现了包括多种笔刷、颜色、形状选择及贴纸、暂停、清除等操作。通过编程实现的动态绘画方式既保留了传统绘画的某些特性，又增加了独特的动态效果和交互体验。对比传统绘画系统，该绘板更适合初学者，提供了一种新颖的创作工具。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

P5.js动态绘板

前言

现在是12月29日00.25，我觉得我迟早有一天被这个专业搞秃头。
这一次的实验要求是利用p5.js创作一个具有动态性和交互性的绘板，比起前面两次作业，难度有所提升，发挥空间也很大。但迫于各科作业和复习的压力，最终只在老师给出的程序基础上完成了一个比较粗糙的画板，下文将会展示画板的设计思路和实现情况。

设计方案

我的绘画系统是在两个绘板的基础上融合它们并进行扩展实现的：

其中前一个绘板是老师给出的示例程序，拥有22中不同笔刷和简单的ui操控界面，后一个绘板相信一起做这个作业的同学们都见过，是csdn上为数不多的有关p5.js文章中展示的，具有一种可以有多种形状的笔刷以及很多有趣的功能，感兴趣的朋友也可以去借鉴一下。
（链接：https://blog.youkuaiyun.com/qq_27534999/article/details/79427721）

看过这两个绘板后，我对自己的绘板有了一些初步设想：
1.融合两个绘板的结构
2.保留这两个绘板有的笔刷，并自己创造新的笔刷
3.拥有多种颜色和形状选择且可以应用于所有笔刷
4.创造一些类似于贴纸的笔刷
5.实现一个互动系统
6.继承第二个绘板具有的一些功能，如暂停，清除和保存图像
经过不断的代码编写和参数修改，上述设想基本都被实现了。

成果展示

首先是绘板的主界面：
在这里插入图片描述
其中ui界面里的功能依次是：颜料盘，背景色，贴纸，笔刷形状，笔刷类型，笔刷1的不同类型，交互笔刷以及下方的暂停，擦除，清空和保存按钮。
因为黑色背景更能展现出效果，接下来的展示部分背景均为黑色。

颜料盘有十二种基础色和黑色白色，只要鼠标点击就会改变颜色，点击白色或黑色时会使当前颜色变浅变深。
笔刷一就是继承了老师给出程序中的几个比较典型的笔刷，点击笔刷一后拖动右方滑动条就可以看到不同的笔刷效果。
这两部分我放在一起展示：
在这里插入图片描述
笔刷二是继承了第二个参考绘板的笔刷：

笔刷三和四是我自己创作的笔刷，笔刷三会在画笔处向外扩散粒子，笔刷四则利用了噪音算法使颜料外围不断波动：

接下来是两种贴纸，彩旗和花，加入了一些动态效果和随机性：
在这里插入图片描述
交互绘画则是会画出跟随鼠标移动的粒子：

最后，下方的暂停按钮可以暂停所有动态图形，擦除工具可以擦除图形，C负责清除整个画板，S可以保存当前画板为图像：

总结与对比

我认为编程绘画是一种非常新颖且有趣的绘画方式，它可以帮助没有传统绘画技巧的人发挥想象力进行创作。在p5.js的绘画过程中，实际上使用的并不是“笔”，而是一个个的粒子，通过获取鼠标位置，在鼠标经过的地方留下不同的粒子，就实现了绘画过程。

对传统绘画的保留和扩展：

在材料/交互方式/作品呈现/作画者四个方面中，我的绘板在前两个方面与传统绘画形态有较高的相似性，在材料方面，绘板与普通的作画相同，提供了多种颜色供使用者选择，且颜色深浅可以调整；在交互方式上，绘板与普通电脑作画相同，都是通过鼠标（或触控笔）来交互。
在作品呈现方面，绘板不同于通常的作画方式，画出的图像具有动态效果且可以进行交互。

虽然编程环境给了编写者非常多的选择，但在实现绘板的过程中，编写主题始终不能离开绘画，因此我在创作属于自己的两个笔刷时，都是在试图用粒子来模仿真实的画笔。笔刷四除去动态性外，基本是接近普通的画笔涂抹出的效果的；笔刷三则是想要模拟出水彩那种下笔后颜色漫开的效果，表现出来就是粒子在鼠标位置散开。
贴纸功能也是基于现实生活的，现在胶带和贴纸已经成为了一种新的作画方式，很多人会用胶带来进行画作的填色，贴纸也能适当的点缀自己的作品。

动态和交互效果是对传统绘画方式最大的扩展，绘板中每一个笔刷和贴纸在被“画”出来之后都具有动态效果且可以被暂停，这是在代码中控制时间和随机变量的结果，也是传统绘画所没有的优点。

与常规绘画系统的对比：

1.技法：常规的绘画系统多只提供基本的线条和颜色，对作画者的技法要求较高，而p5.js实现的绘板则提供了许多美观（花里胡哨）的功能，使得作画者可以随心所欲地创作，且最后能得到效果不错的作品。

2.创作体验：相信大部分创作者在第一次使用我的绘板时都会感到新奇有趣，但使用过仅有的一些功能后就会慢慢失去兴趣；但传统的绘画系统则会吸引使用者不断深入，提升自己的绘画技巧。

3.呈现效果：在这方面常规绘画系统与我的绘画系统各有优劣之处，我的绘板的优点在于大量的动态效果以及便利的贴纸功能，但在传统的绘画概念上，呈现出的效果却比不上常规的绘画系统，因为它的自由度更高，在画师手中能发挥更好的效果，而我的绘板固定了笔刷的样式，只提供形状与颜色的选择，是为入门者量身定制的趣味工具。

4.局限性：常规的绘画系统功能齐全，但只能创作出静态的图像，基本是面向有一定技巧人群的，需要慢慢摸索，对新手并不友好；我的绘画系统虽然充满趣味性，所有人都能轻松使用，但绘画方式固定，选择性不多，对使用者的绘画技巧没有太大提升。

5.应用：可以很明显地看出来，我的绘画系统主要面向绘画新手，或仅仅想发挥想象力而没有绘画知识的人群；相反的，常规绘画系统则面向绘画领域中的人群。