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

相关文章

Spring Gateway动态路由实现方案

《SpringGateway动态路由实现方案》本文主要介绍了SpringGateway动态路由实现方案,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随... 目录前沿何为路由RouteDefinitionRouteLocator工作流程动态路由实现尾巴前沿S

JS纯前端实现浏览器语音播报、朗读功能的完整代码

《JS纯前端实现浏览器语音播报、朗读功能的完整代码》在现代互联网的发展中,语音技术正逐渐成为改变用户体验的重要一环,下面:本文主要介绍JS纯前端实现浏览器语音播报、朗读功能的相关资料,文中通过代码... 目录一、朗读单条文本:① 语音自选参数,按钮控制语音:② 效果图:二、朗读多条文本:① 语音有默认值:②

在Node.js中使用.env文件管理环境变量的全过程

《在Node.js中使用.env文件管理环境变量的全过程》Node.js应用程序通常依赖于环境变量来管理敏感信息或配置设置,.env文件已经成为一种流行的本地管理这些变量的方法,本文将探讨.env文件... 目录引言为什么使php用 .env 文件 ?如何在 Node.js 中使用 .env 文件最佳实践引

使用Node.js和PostgreSQL构建数据库应用

《使用Node.js和PostgreSQL构建数据库应用》PostgreSQL是一个功能强大的开源关系型数据库,而Node.js是构建高效网络应用的理想平台,结合这两个技术,我们可以创建出色的数据驱动... 目录初始化项目与安装依赖建立数据库连接执行CRUD操作查询数据插入数据更新数据删除数据完整示例与最佳

Python动态处理文件编码的完整指南

《Python动态处理文件编码的完整指南》在Python文件处理的高级应用中,我们经常会遇到需要动态处理文件编码的场景,本文将深入探讨Python中动态处理文件编码的技术,有需要的小伙伴可以了解下... 目录引言一、理解python的文件编码体系1.1 Python的IO层次结构1.2 编码问题的常见场景二

Java使用Javassist动态生成HelloWorld类

《Java使用Javassist动态生成HelloWorld类》Javassist是一个非常强大的字节码操作和定义库,它允许开发者在运行时创建新的类或者修改现有的类,本文将简单介绍如何使用Javass... 目录1. Javassist简介2. 环境准备3. 动态生成HelloWorld类3.1 创建CtC

Three.js构建一个 3D 商品展示空间完整实战项目

《Three.js构建一个3D商品展示空间完整实战项目》Three.js是一个强大的JavaScript库,专用于在Web浏览器中创建3D图形,:本文主要介绍Three.js构建一个3D商品展... 目录引言项目核心技术1. 项目架构与资源组织2. 多模型切换、交互热点绑定3. 移动端适配与帧率优化4. 可

go动态限制并发数量的实现示例

《go动态限制并发数量的实现示例》本文主要介绍了Go并发控制方法,通过带缓冲通道和第三方库实现并发数量限制,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面... 目录带有缓冲大小的通道使用第三方库其他控制并发的方法因为go从语言层面支持并发,所以面试百分百会问到

一文详解SpringBoot中控制器的动态注册与卸载

《一文详解SpringBoot中控制器的动态注册与卸载》在项目开发中,通过动态注册和卸载控制器功能,可以根据业务场景和项目需要实现功能的动态增加、删除,提高系统的灵活性和可扩展性,下面我们就来看看Sp... 目录项目结构1. 创建 Spring Boot 启动类2. 创建一个测试控制器3. 创建动态控制器注

springboot如何通过http动态操作xxl-job任务

《springboot如何通过http动态操作xxl-job任务》:本文主要介绍springboot如何通过http动态操作xxl-job任务的问题,具有很好的参考价值,希望对大家有所帮助,如有错... 目录springboot通过http动态操作xxl-job任务一、maven依赖二、配置文件三、xxl-