P5.js:动态画板鉴赏

2024-03-24 06:10
文章标签 动态 js 画板 p5 鉴赏

本文主要是介绍P5.js:动态画板鉴赏,希望对大家解决编程问题提供一定的参考价值,需要的开发者们随着小编来一起学习吧!

上期博客我利用了西河某人的动态绘板为原型,扩展了特效画笔,这期则是鉴赏其他作者的优秀动态绘板。

SkyLchnoise的简易绘画系统

链接:https://blog.csdn.net/qq_40779137/article/details/85366724
效果图:在这里插入图片描述
在这里插入图片描述
评论:这个绘画系统并不是使用p5.js是使用processing来写的,其实这本质上并没有什么太大的区别,动态的实现都是依靠将笔迹预存,再不断改变其的状态而实现的,画板中内置了许多实用的画笔,可以画出许多效果来,如上图中的喷泉效果,万华镜效果,还是很棒的。

ValdisX的Canvas魔法实验

链接:https://blog.csdn.net/sinat_36461778/article/details/85423676
效果图:在这里插入图片描述
在这里插入图片描述
在这里插入图片描述
在这里插入图片描述
评论:绘画系统的前两种画笔,一种是随机圆大小,一种是随机颜色,前者的效果颇有水彩的感觉,后者则比较平常,都不属于动态画笔。第三种则是将用户上传的图片转换成用p5.js画的点阵图,这种操作如果加上阵点按某种规律变换的话效果应该是很棒的,但由于掉帧的问题(阵点太多,刷新起来会疯狂掉帧,作者也有说明)。第四种画笔则是我最感兴趣的,是欧普艺术风格(欧普艺术是精心计算的视觉的艺术,使用明亮的色彩, 造成刺眼的颤动效果,达到视觉上的亢奋。)的画笔,用户可以拖动鼠标在画布中画出鼠标移动的轨迹,区别于静态画笔的是,背景线条的运动,以及笔迹只在线条上呈现,我不太了解欧普艺术,但这种线条的风格我很喜欢。

包邮猿的水墨风格画板:

链接:https://mp.weixin.qq.com/s?__biz=MzUzNjk4NjIxMQ==&mid=2247483672&idx=1&sn=36051e72894827a538c30f2d2f9adea5&chksm=faec9614cd9b1f025654ad803cfb4c3acf2d7cf004dab9b846232396cb61afe1aee9be56da98&token=158454085&lang=zh_CN#rd
效果图:
在这里插入图片描述
评论:这位同学的画板是为了还原水墨画的风格,包括背景纸的质感,以及水墨风格的画笔,很好的还原了毛笔绘画的感觉(即墨会在纸上晕染开来的质感),同时将鸟、鱼、虾等做成了预制体,并用代码赋予其动作,使这些小生物在泛黄的宣纸上能够动起来,有点上个世纪的水墨动画的韵味。

妖妖漆兒的DIY画板

链接 :https://mp.weixin.qq.com/s/rPu-zFLG6pk__6Xf8tFHOA
在这里插入图片描述
在这里插入图片描述
评论:这个作者的画笔应该是看过的最有感觉的,其中的镜面对称画笔(上图)和“捕梦网”画笔(下图)给人的视觉感受非常震撼,前者是通过丝线画笔和对称效果的组合来达到画出富有梦幻色彩有具有高度对称美感的画面,后者则是单独的实现丝线画笔的效果,为不对称画面服务,两者都通过线的叠加交错来表现出一种构造美,非常棒。

这篇关于P5.js:动态画板鉴赏的文章就介绍到这儿,希望我们推荐的文章对编程师们有所帮助!



http://www.chinasem.cn/article/840679

相关文章

SpringBoot基于配置实现短信服务策略的动态切换

《SpringBoot基于配置实现短信服务策略的动态切换》这篇文章主要为大家详细介绍了SpringBoot在接入多个短信服务商(如阿里云、腾讯云、华为云)后,如何根据配置或环境切换使用不同的服务商,需... 目录目标功能示例配置(application.yml)配置类绑定短信发送策略接口示例:阿里云 & 腾

JS+HTML实现在线图片水印添加工具

《JS+HTML实现在线图片水印添加工具》在社交媒体和内容创作日益频繁的今天,如何保护原创内容、展示品牌身份成了一个不得不面对的问题,本文将实现一个完全基于HTML+CSS构建的现代化图片水印在线工具... 目录概述功能亮点使用方法技术解析延伸思考运行效果项目源码下载总结概述在社交媒体和内容创作日益频繁的

Node.js 数据库 CRUD 项目示例详解(完美解决方案)

《Node.js数据库CRUD项目示例详解(完美解决方案)》:本文主要介绍Node.js数据库CRUD项目示例详解(完美解决方案),本文给大家介绍的非常详细,对大家的学习或工作具有一定的参考... 目录项目结构1. 初始化项目2. 配置数据库连接 (config/db.js)3. 创建模型 (models/

使用Node.js制作图片上传服务的详细教程

《使用Node.js制作图片上传服务的详细教程》在现代Web应用开发中,图片上传是一项常见且重要的功能,借助Node.js强大的生态系统,我们可以轻松搭建高效的图片上传服务,本文将深入探讨如何使用No... 目录准备工作搭建 Express 服务器配置 multer 进行图片上传处理图片上传请求完整代码示例

MySQL中动态生成SQL语句去掉所有字段的空格的操作方法

《MySQL中动态生成SQL语句去掉所有字段的空格的操作方法》在数据库管理过程中,我们常常会遇到需要对表中字段进行清洗和整理的情况,本文将详细介绍如何在MySQL中动态生成SQL语句来去掉所有字段的空... 目录在mysql中动态生成SQL语句去掉所有字段的空格准备工作原理分析动态生成SQL语句在MySQL

Java调用C++动态库超详细步骤讲解(附源码)

《Java调用C++动态库超详细步骤讲解(附源码)》C语言因其高效和接近硬件的特性,时常会被用在性能要求较高或者需要直接操作硬件的场合,:本文主要介绍Java调用C++动态库的相关资料,文中通过代... 目录一、直接调用C++库第一步:动态库生成(vs2017+qt5.12.10)第二步:Java调用C++

用js控制视频播放进度基本示例代码

《用js控制视频播放进度基本示例代码》写前端的时候,很多的时候是需要支持要网页视频播放的功能,下面这篇文章主要给大家介绍了关于用js控制视频播放进度的相关资料,文中通过代码介绍的非常详细,需要的朋友可... 目录前言html部分:JavaScript部分:注意:总结前言在javascript中控制视频播放

C#如何动态创建Label,及动态label事件

《C#如何动态创建Label,及动态label事件》:本文主要介绍C#如何动态创建Label,及动态label事件,具有很好的参考价值,希望对大家有所帮助,如有错误或未考虑完全的地方,望不吝赐教... 目录C#如何动态创建Label,及动态label事件第一点:switch中的生成我们的label事件接着,

SpringCloud动态配置注解@RefreshScope与@Component的深度解析

《SpringCloud动态配置注解@RefreshScope与@Component的深度解析》在现代微服务架构中,动态配置管理是一个关键需求,本文将为大家介绍SpringCloud中相关的注解@Re... 目录引言1. @RefreshScope 的作用与原理1.1 什么是 @RefreshScope1.

MyBatis 动态 SQL 优化之标签的实战与技巧(常见用法)

《MyBatis动态SQL优化之标签的实战与技巧(常见用法)》本文通过详细的示例和实际应用场景,介绍了如何有效利用这些标签来优化MyBatis配置,提升开发效率,确保SQL的高效执行和安全性,感... 目录动态SQL详解一、动态SQL的核心概念1.1 什么是动态SQL?1.2 动态SQL的优点1.3 动态S