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

相关文章

Android 悬浮窗开发示例((动态权限请求 | 前台服务和通知 | 悬浮窗创建 )

《Android悬浮窗开发示例((动态权限请求|前台服务和通知|悬浮窗创建)》本文介绍了Android悬浮窗的实现效果,包括动态权限请求、前台服务和通知的使用,悬浮窗权限需要动态申请并引导... 目录一、悬浮窗 动态权限请求1、动态请求权限2、悬浮窗权限说明3、检查动态权限4、申请动态权限5、权限设置完毕后

前端原生js实现拖拽排课效果实例

《前端原生js实现拖拽排课效果实例》:本文主要介绍如何实现一个简单的课程表拖拽功能,通过HTML、CSS和JavaScript的配合,我们实现了课程项的拖拽、放置和显示功能,文中通过实例代码介绍的... 目录1. 效果展示2. 效果分析2.1 关键点2.2 实现方法3. 代码实现3.1 html部分3.2

JS 实现复制到剪贴板的几种方式小结

《JS实现复制到剪贴板的几种方式小结》本文主要介绍了JS实现复制到剪贴板的几种方式小结,包括ClipboardAPI和document.execCommand这两种方法,具有一定的参考价值,感兴趣的... 目录一、Clipboard API相关属性方法二、document.execCommand优点:缺点:

Java使用POI-TL和JFreeChart动态生成Word报告

《Java使用POI-TL和JFreeChart动态生成Word报告》本文介绍了使用POI-TL和JFreeChart生成包含动态数据和图表的Word报告的方法,并分享了实际开发中的踩坑经验,通过代码... 目录前言一、需求背景二、方案分析三、 POI-TL + JFreeChart 实现3.1 Maven

Java导出Excel动态表头的示例详解

《Java导出Excel动态表头的示例详解》这篇文章主要为大家详细介绍了Java导出Excel动态表头的相关知识,文中的示例代码简洁易懂,具有一定的借鉴价值,有需要的小伙伴可以了解下... 目录前言一、效果展示二、代码实现1.固定头实体类2.动态头实现3.导出动态头前言本文只记录大致思路以及做法,代码不进

vue基于ElementUI动态设置表格高度的3种方法

《vue基于ElementUI动态设置表格高度的3种方法》ElementUI+vue动态设置表格高度的几种方法,抛砖引玉,还有其它方法动态设置表格高度,大家可以开动脑筋... 方法一、css + js的形式这个方法需要在表格外层设置一个div,原理是将表格的高度设置成外层div的高度,所以外层的div需要

SpringBoot实现动态插拔的AOP的完整案例

《SpringBoot实现动态插拔的AOP的完整案例》在现代软件开发中,面向切面编程(AOP)是一种非常重要的技术,能够有效实现日志记录、安全控制、性能监控等横切关注点的分离,在传统的AOP实现中,切... 目录引言一、AOP 概述1.1 什么是 AOP1.2 AOP 的典型应用场景1.3 为什么需要动态插

VUE动态绑定class类的三种常用方式及适用场景详解

《VUE动态绑定class类的三种常用方式及适用场景详解》文章介绍了在实际开发中动态绑定class的三种常见情况及其解决方案,包括根据不同的返回值渲染不同的class样式、给模块添加基础样式以及根据设... 目录前言1.动态选择class样式(对象添加:情景一)2.动态添加一个class样式(字符串添加:情

SpringCloud配置动态更新原理解析

《SpringCloud配置动态更新原理解析》在微服务架构的浩瀚星海中,服务配置的动态更新如同魔法一般,能够让应用在不重启的情况下,实时响应配置的变更,SpringCloud作为微服务架构中的佼佼者,... 目录一、SpringBoot、Cloud配置的读取二、SpringCloud配置动态刷新三、更新@R

Node.js 中 http 模块的深度剖析与实战应用小结

《Node.js中http模块的深度剖析与实战应用小结》本文详细介绍了Node.js中的http模块,从创建HTTP服务器、处理请求与响应,到获取请求参数,每个环节都通过代码示例进行解析,旨在帮... 目录Node.js 中 http 模块的深度剖析与实战应用一、引言二、创建 HTTP 服务器:基石搭建(一