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

最新推荐文章于 2019-01-07 19:48:20 发布
最新推荐文章于 2019-01-07 19:48:20 发布
阅读量2k 收藏 3
点赞数 1
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/Sugar_me_/article/details/85343594
版权
本文档介绍了如何利用p5.js实现一个名为Doodle Board的互动画板，该画板允许用户使用不同类型的笔刷（如rectangle, facebrush, boidbrush）进行创作。通过鼠标事件处理，boidbrush笔刷可以生成动态的boid群体，用户可以通过鼠标操作改变群体行为。此外，还实现了界面完善和声音功能，提供了一种新颖的动态绘画体验。" 111615072,10293923,比对结果质控：samtools与qualimap详解,"['生物信息学', '测序分析', '数据质控', 'samtools', 'qualimap']
摘要由CSDN通过智能技术生成

目标

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

阅读资料

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”，游戏中可以通过几个相同或不同的元素合成新的元素，感觉很像我

最低0.47元/天 解锁文章
Sugar_me_
关注
P5.js创意画板
Lynnnnnnnnn的博客
12-30 1425
简单创意画板 一、展示     这次的作业是基于图元模型进行扩充完成的创意画板，这个画板有静态和动态两种笔触形式，下面这个是一些动态笔刷，可自选颜色。我日常中最常使用的绘图工具是Photoshop，它对于一个手绘能力不强的人来说，对板绘的完成给予了很大的帮助，它有非常的工具可以供人使用，可以帮助去修改和调整画面，或者辅助绘图，还有很多的笔刷可以供人使用，对于我做的这个创意画板，它具有普通绘图板...
基于P5.js的动态绘板
weixin_42178301的博客
12-30 447
前言 这次的实验要求是做一个动态绘板，我还是同前两次作业一样使用的P5.JS。其实拿到这个题目的最开始还是有很多想法的，比如做一些类似油画的处理，水墨画的处理，也有想过能不能对画面进行拟物处理从而创造出新的画面。但是怎么说呢，想象很丰满，现实很骨感，我这个大概算是格外骨感，最后在经历期末地狱的各种兵荒马乱后也只完成了一个普通的基础画板，还是极大地参考了一个（大家都看过的）画板代码的成果。 参考...
# 互动媒体期末作业——P5.js“画板”
燕燊的博客
12-29 1539
前言 之前的推文就曾说过对于画画简直是一窍不通，然而最近的大作业最后还是需要做一个与画画有关的内容——画板。不过，还好，最后并不是要我再画，而且就算是画，也不需要动手画，所以这对我来说，还是可以接受的。不过，相对于传统的画板，对于在画板上的操作全凭的是绘画的人的技巧，而对于这作业要求的“画板”，更需要的是主动为画板提供一些基本的功能，让不擅长绘画的人，通过简单的操作，就可以作出一幅比手绘来得较为难...
p5.js之动态魔幻画板
aasdf245的博客
12-31 998
基于p5.js的魔幻画板 一.起因 本学期的互动媒体技术大作业要求每个人做一个“绘画系统”，提供一系列绘画材料（例如画笔/颜料/滤镜）给用户操作，以创作出动态/交互的绘画作品。这个绘画系统是对“绘画”的概念的扩展，但仍然体现出与传统绘画系统的相似性。 概念解释 按照文章《什么是绘画？——以抽象思维理解绘画》对于“绘画”的界定，绘画可以看作四个要素的构成： 材料：颜料，画布，画笔等物质要素； 作画者...
p5.js 实现创意绘板
sinat_40521443的博客
12-30 857
前言 由p5.js实现创意绘板，我分成了动态创意绘板和静态创意绘板。 静态创意绘板 上图仿照水粉画。 上述图中实现了对于水粉笔的模仿。 可以调节颜色的变化，对rgb直接进行调节，大小形状也可调节，上图展示的是使用正方形笔刷，颜色是根据画布横坐标来表现，可以看出，左边偏玫红，右边偏绿，笔刷的形状会对深浅有影响。交互的时候还挺好玩的，一个动作在整个画布中不局限于一种颜色，实现画布上颜色的渐变。 不...
使用tensorflow.js和p5.js处理一些新示例-JavaScript开发
05-26
TensorFlow.js示例XOR香草神经网络Doodle分类器此仓库是实验性的，正在进行中。 这是一个使用Google QuickDraw数据集，p5js和数十个TensorFlow.js的“ MNIST”样式分类示例。 这是一个使用Google QuickDraw数据集，...
css-doodle.js螺旋状动画特效特效代码
03-20
`css-doodle.js`是一个强大的CSS画布库，它允许开发者利用CSS来绘制复杂的图形和动画，无需JavaScript的直接干预。这个特定的特效是通过CSS3技术实现的，将动态的圆点和线条组合成一个旋转的螺旋体，为网页增添...
基于css-doodle.js螺旋动画特效.zip
07-04
"jiaoben6705"可能是另一个文件，可能是一个JavaScript文件，包含自定义脚本以配合css-doodle.js库实现螺旋动画。 【知识点详解】 1. **CSS-doodle.js**：这个库提供了CSS画布，使得开发者可以通过JavaScript编写...
基于css-doodle.js螺旋动画特效特效代码
03-20
CSS-Doodle.js是一个强大的JavaScript库，它为CSS提供了一个画布，允许开发者创建复杂的、自定义的图形和动画，而无需深入学习SVG或者Canvas API。 一、CSS-Doodle.js基础 CSS-Doodle.js的核心是将CSS规则作为...
Doodle-Board:Doodle是一块木板，用户可以在其上绘制具有多种颜色和不同厚度级别的二维图形。 应用程序底部的滑块可跟踪用户在板上绘制的每个过程。 用户还可以通过单击向前播放按钮和向后播放按钮来重播绘图过程
04-28
涂鸦： Doodle is a board that user can draw 2-d graphs on with mutiple colors and different levels of thickness. A slider in the bottom of the application keeps track of every proccess that user draws on the board. User can also replay the drawing process by click on the forward play button and backward play button. 用户界面： 1.Color buttons: user can click on the existed color button to change the cur
p5-manager, p5js模板生成器&草图管理器 为p5js爱好者构建.zip
10-10
p5-manager, p5js模板生成器&草图管理器 为p5js爱好者构建 p5-manager是一个 p5js插件模板生成器和草图管理器。 这个命令行工具还支持 livereload，Babel ES6自动编译和其他有用的功能。 为 p5.js 爱好者构建。 快速启动$ npm install
js电子白板
07-30
用 nodejs+websocket+canvas 实现的电子白板demo 功能齐全，适合参考学习
p5js-pixel-flowfield:P5.js Flowfield动画模拟
05-25
P5.js Flowfield动画/模拟 使用perlin噪声为画布上的每个像素分配单独方向的流场动画/模拟。 起点是随机的，每个像素的方向会随时间推移而变化，以获得更“毛茸茸”的外观。 用。
p5js-particle-flowfield:带有粒子的P5.js流场动画模拟
05-25
P5.js粒子流场动画 通过在基于网格的场上移动粒子而实现的基于流场的动画。 它的工作原理类似于流场。它的渲染速度比快得多。 这是一种在使用的方法。 您可以更改一些基本参数： DEBUG使您可以显示流场并渲染无痕迹的粒子。 FLOW_TILE_SIZE通过定义图块的大小来设置流场分辨率。 FLOW_TILE_INFLUENCE定义场移动粒子的强度。 当在流场的一个图块上移动时，粒子的电流方向朝流场的给定方向缓慢地内插。 定义每一帧的每个插值步长。 FLOW_TILE_MOVEMENT流场随时间变化的速度。 PARTICLES_NUMBER在屏幕上渲染多少个粒子。 当粒子离开屏幕时，将创建一个新粒子。 PARTICLES_MAX_MAGNITUDE粒子可以有多快。 在2和此值之间随机选择。 用。
P5.js：动态画板鉴赏
qq_42264210的博客
01-07 1501
上期博客我利用了西河某人的动态绘板为原型，扩展了特效画笔，这期则是鉴赏其他作者的优秀动态绘板。 ValdisX的Canvas魔法实验 链接：https://blog.csdn.net/sinat_36461778/article/details/85423676 效果图： 评论：绘画系统的前两种画笔，一种是随机圆大小，一种是随机颜色，前者的效果颇有水彩的感觉，后者则比较平常，都不属于动态画笔...
p5.js之“列阵绘图画板”实现大面积规律性绘制
qq_40301536的博客
12-30 1808
第一次的作品简单体会码绘与手绘的不同之处，浅显的进行比较；第二次的作业增加了动态效果和交互性，让人更能直观地感受到码绘的魅力。 此次作业，主要是在传统水彩和钢笔绘画方式上，做出些改变。 总体设计方案 设计灵感 我们发现生活中有许多中心旋转对称的图形 这是波西米亚地毯的图案，呈现中心对称的效果 这是烟花，如果不计算自由落体运动，那么他也是个中心对称图案 这是万花筒 这些图案都是中心旋转对称图形，他...
码绘：使用p5.js进行简单的作画
qq_42264210的博客
11-19 2315
使用工具 Visual Studio Code+p5.js 下载地址 Visual Studio Code：https://code.visualstudio.com/Download p5.js:https://p5js.org/zh-Hans/download/ 目标 在网页上用简单的线条画出一辆自行车 具体流程 首先我们建立一个index.html文件（主页）和一个sketch.js文件（码...
用p5.js实现动态形状笔刷
qq_38406696的博客
12-30 1713
用p5.js实现动态创意画板 跟之前两篇文章有关联的是，这次也是为了互动媒体大作业写了一篇博客。 这次的作业内容是编写一个绘画系统，提供一系列绘画颜料给用户操作，这颜料可以是画笔、颜料或者滤镜的形式，然后创造出动态/交互的绘画作品。这个绘画系统是对“绘画”的概念进行扩展，但仍然要体现出与传统绘画系统的相似性。 按照习惯我们还是先放出成品图。 （时间原因就只是实现了最基本的功能） 这一次的作业相比较...
评论 1
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值