基于P5.js的动态绘板

本文介绍了一个基于P5.js的动态绘板,包括背景板、四种画笔和功能按钮的设计。画笔涉及基础形状绘制、直线、特殊效果笔刷以及贴图等,适合小朋友使用。同时探讨了码绘的技法、工具、理念和创作体验,指出其在动态效果和意外惊喜方面的优势。
摘要由CSDN通过智能技术生成

前言

这次的实验要求是做一个动态绘板,我还是同前两次作业一样使用的P5.JS。其实拿到这个题目的最开始还是有很多想法的,比如做一些类似油画的处理,水墨画的处理,也有想过能不能对画面进行拟物处理从而创造出新的画面。但是怎么说呢,想象很丰满,现实很骨感,我这个大概算是格外骨感,最后在经历期末地狱的各种兵荒马乱后也只完成了一个普通的基础画板,还是极大地参考了一个(大家都看过的)画板代码的成果。

参考连接:https://blog.csdn.net/qq_27534999/article/details/79427721)

设计方案

一个画板首先要具有的功能就是能画,但是“画”的定义本身就是很模糊的,在这里我擅自理解为可以进行交互并最终有画面可见。因此首先需要的就是一块画布,那么画布已经由善良的P5.JS提供了,我十分偷懒地在背景上只换了几个颜色。那么除此之外我们需要解决的就是画笔了。画笔的表现形式是多种多样的,我在这里主要设置了三类画笔,下面会分别介绍。

背景板:

红圈的地方就是更换背景颜色的地方啦,准备了四个颜色供大家更换,按钮里面的圈圈显示的颜色就是下一个可更换的背景色,有两个深色两个浅色。

画笔1:

第一个按钮里的画笔就是参考资料里的画笔࿰

评论 1
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值