P5.js动态绘板

最新推荐文章于 2023-08-08 23:23:20 发布
最新推荐文章于 2023-08-08 23:23:20 发布
阅读量845 收藏 2
点赞数 1
文章标签： p5.js 绘板
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_43383599/article/details/85336304
版权
本文介绍了一次使用p5.js创建动态交互绘板的实验，结合两个基础绘板的功能并进行扩展，实现了包括多种笔刷、颜色、形状选择及贴纸、暂停、清除等操作。通过编程实现的动态绘画方式既保留了传统绘画的某些特性，又增加了独特的动态效果和交互体验。对比传统绘画系统，该绘板更适合初学者，提供了一种新颖的创作工具。
摘要由CSDN通过智能技术生成

P5.js动态绘板

前言

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

目录

1.设计方案
2.成果展示
3.总结与对比
4.参考资料

设计方案

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


其中前一个绘板是老师给出的示例程序，拥有22中不同笔刷和简单的ui操控界面，后一个绘板相信一起做这个作业的同学们都见过，是csdn上为数不多的有关p5.js文章中展示的，具有一种可以有多种形状的笔刷以及很多有趣的功

最低0.47元/天 解锁文章
雁三白
关注
P5.js：动态画板鉴赏
qq_42264210的博客
01-07 1511
上期博客我利用了西河某人的动态绘板为原型，扩展了特效画笔，这期则是鉴赏其他作者的优秀动态绘板。 ValdisX的Canvas魔法实验 链接：https://blog.csdn.net/sinat_36461778/article/details/85423676 效果图： 评论：绘画系统的前两种画笔，一种是随机圆大小，一种是随机颜色，前者的效果颇有水彩的感觉，后者则比较平常，都不属于动态画笔...
p5.js 实现创意绘板
sinat_40521443的博客
12-30 870
前言 由p5.js实现创意绘板，我分成了动态创意绘板和静态创意绘板。 静态创意绘板 上图仿照水粉画。 上述图中实现了对于水粉笔的模仿。 可以调节颜色的变化，对rgb直接进行调节，大小形状也可调节，上图展示的是使用正方形笔刷，颜色是根据画布横坐标来表现，可以看出，左边偏玫红，右边偏绿，笔刷的形状会对深浅有影响。交互的时候还挺好玩的，一个动作在整个画布中不局限于一种颜色，实现画布上颜色的渐变。 不...
用P5.js实现一个动态的绘画系统
qq_40426798的博客
12-29 1202
摘要 通过一段时间的学习，我发现码绘的可能性比我想象的要更大，我们可以用码绘实现很多手绘很难达到的效果，比如创作一幅会动的、能进行交互的画作。如何通过类似画笔的东西在屏幕上创作出时刻在改变的，并且我们可以进行实时修改的像动画一样的作品？这就是我想要通过这个绘画系统想要做到的事。 基本原理 为了实现上面的想法，再结合使用的编程语言，我决定将绘画的最小单位设置成一个个矩形，类似于电脑图像里像素的概念。...
基于p5.js的简单绘画系统
qq_37900439的博客
12-30 1473
  本次实验的主题是编写一个绘画系统，提供一系列绘画材料例如画笔、颜料、滤镜等给用户操作，以创作出动态、交互的绘画作品。这个绘画是对传统绘画概念的拓展，但仍然要体现出与传统绘画的相似性。 注意：目标可以理解为： 创作一个app,看起来比较像绘画工具，但又不是重复已知的绘画行为，而要体现出绘画出不来的效果：动态/UI或者意图，传统绘画是创作的一个平面视觉图像，这个app可以创作其他东西。 设...
p5.js 互动媒体技术 创意编程作品
STAmbition的博客
11-03 2524
创意编程作品 基于p5.js 实验要求：一件编程创意作品，实现动态效果。 **实验过程：**我使用的是网页版的p5.js（https://editor.p5js.org/）本来想做个字画像，但老师要求也可以是体现编程的创意作品，因此我并没有做自画像，而是一个泡泡背景的弓箭： 程序如下：`var bubbleArray = []; var c1, c2;function Bubble(xloc, y...
基于 P5.js 的交互式人物换装小项目
01-06
P5.js 是一个强大的 JavaScript 库，专为网页上的艺术、教育、研究等领域的交互式图形设计而开发。它简化了WebGL和HTML5 Canvas API的使用，使得创建复杂的视觉效果和交互体验变得更加简单。在这个项目中，我们将...
P5.js 实现交互式动态绘画
bear_Tower的博客
12-30 8064
p5.js 实现交互式动态绘画1.关于交互式绘画的思考2.选定题目3.内容展示4.代码分析(1).按钮的实现(2).笔刷（画笔）(3).动作5.总结6.参考文献 1.关于交互式绘画的思考 在前几次的实验中，我们先后完成了静态码绘和动态码绘，对计算机码绘已经有了基本的了解。 在之前的文章中我也有提到过： 一副有趣的码绘需要更多理性的思考，想要实现一个有趣且内容丰富的码绘需要一定的代码经验和创造力。 ...
Javascript-P5.js-Memory-Game
04-08
在本项目中，我们关注的是一个使用JavaScript库P5.js实现的内存游戏。P5.js是一个强大的工具，它使得Web开发者能够轻松地进行图形编程，包括创建交互式艺术、游戏和数据可视化。让我们深入探讨一下JavaScript的基础...
paintjs:用p5.js编写的绘画应用程序
04-28
1. **p5.js库**：p5.js是基于Processing语言的一个JavaScript版本，它提供了一系列简单易用的函数，用于绘制2D图形、处理用户输入、动画制作等。通过p5.js，开发者可以快速构建视觉艺术和互动体验，而无需深厚的编程...
p5.js 绘制创意自画像（互动媒体技术作业）
weixin_44123437的博客
10-27 1857
p5.js 绘制自画像（互动媒体技术作业）作品展示p5.js 代码分析分析几个创意点：走过的弯路拓展总结 作品展示 代码寄存在—>CodePen<—点击体验交互！ 灵感来源于小王子B612星球，于是乎绘制了一个自己在星球上吹风欣赏夜景的绝美场景嘿嘿 p5.js 代码 使用p5.js官方Web Editor上手编程，代码保存在CodePen 所有代码如下： function setup...
用js实现建议绘图板
xxgTX的博客
10-15 545
用javaScript来实现一个简易绘图板 <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title></title> <style type="text/css"> #pos{position: absolute;left:20px...
用p5.js制作烟花特效
王命风的博客
09-28 6334
前言 之前看过一篇文章，使用processing制作烟花特效。效果如下 网上调查了一圈了，发现processing是一个互动编程软件，java语言发展而来。而且动画效果是跑在processing专门的模拟器上。 不过好在也有对应的web扩展语言，有processing.js和p5.js。 processing.js在github上已经好几年没有人维护了，一些processing的特性支持不了
用p5.js实现动态形状笔刷
qq_38406696的博客
12-30 1718
用p5.js实现动态创意画板 跟之前两篇文章有关联的是，这次也是为了互动媒体大作业写了一篇博客。 这次的作业内容是编写一个绘画系统，提供一系列绘画颜料给用户操作，这颜料可以是画笔、颜料或者滤镜的形式，然后创造出动态/交互的绘画作品。这个绘画系统是对“绘画”的概念进行扩展，但仍然要体现出与传统绘画系统的相似性。 按照习惯我们还是先放出成品图。 （时间原因就只是实现了最基本的功能） 这一次的作业相比较...
P5.js临摹动态图形并拓展——互动媒体技术
mimimimiii的博客
10-21 577
P5.js临摹动态图形并拓展——互动媒体技术 本次互动媒体技术作业要求： 作品: 要有一件临摹的作品；还要有至少一件拓展的作品；每幅作品录制一段半分钟内的视频；报告：写一篇文章，发表为博文/推文等形式，描述从原作中提炼出的规律，既要用平实易懂的语言描述，也要尝试运用凝练的数学语言表达（公式、方程、推导等），特别要描述出这些规律在原作中如何呈现的？在自己的扩展中如何呈现和变化的？ 临摹原图 通过观...
【p5.js】作业二——创意自画像
Bugreat的博客
11-04 1045
创意自画像 主题 用编程方式创作一幅介绍自己的作品 要求 编程语言与工具：编程可以用p5,processing，若想用其他语言或工具，提前向老师说明情况； 作品: 一件编程创意作品，必须实现动态效果或交互效果；作品录制一段一分钟内的视频；作品可以是具象化地描绘自己的形象，也可以是任何形式表现自己的兴趣、追求、特色、经历等； 报告：写一篇文章，发表为博文/推文等形式，描述运用的规律，若用到了数学/物...
p5.js画布操作实战：创建，绑定指定元素，动态调整大小，隐藏滚动条，删除画布...
weixin_39415598的博客
08-08 289
theme: smartblue 文章简介 之前在 《p5.js 光速入门》 里粗略讲过一下如何使用 p5.js 创建画布。 这次要介绍几个 p5.js 提供的画布相关的方法。 创建画布时的相关配置。 让画布绑定指定元素。 重置画布大小。 删除画布。 学习本文前你需要具备一点 p5.js 的知识，想了解的请查看 《p5.js 光速入门》。 创建画布 在 p5.js 里创建画布...
P5.js开发之——借助p5.shape插件库绘制2D形状(4)
我的博客
10-15 632
一 概述 本文介绍借助于p5.shape库，绘制一些简单的几何形状，效果图如下： 二 项目介绍 2.1 项目地址 p5.shape.js 2.2 如何使用 p5.shape:lib依赖文件,通过script导入 example:示例文件,类似于sketch.js 省略:index.html和p5.js 三 p5.shape示例 3.1 创建p5.js项目(vscode-p5 Project Create插件) 将p5.shape:放到libs目录下,并在index.html中通过script导入 将
p5.js 码绘第二弹———绘制自画像
weixin_43425465的博客
10-29 685
创作过程 对，一切创作都是要有其灵感及起因（比如要完成实验）的，最初是速写课画了线稿，信誓旦旦地以为可以用p5实现，结果还是被现实打醒，盲猜坐标式画图，还想上天是咋？？ 俺的线稿，真是觉得自己是神仙呢想画这个样子，那最后的成品是什么样呢？？直接放图↓↓↓ 嗯，变大头贴了，真的画不动了（寿终正寝.jpg），配色比较大胆，可能眼睛不太好，需要饱和度高的颜色进行视觉冲击，但真的努力还原了，就觉得还行...
p5.js实现绘画系统
最新发布
11-01
p5.js是一个基于JavaScript的创意编程库，可以实现绘画系统。使用p5.js，你可以通过编写代码来创建绘画、图形和动画。 要开始使用p5.js绘画系统，首先需要设置画布。你可以指定画布的大小、颜色和位置等属性。然后...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值