p5.js动态图形临摹以及拓展

最新推荐文章于 2020-12-30 19:35:23 发布
最新推荐文章于 2020-12-30 19:35:23 发布
阅读量1k 收藏 9
点赞数
分类专栏： p5.js 文章标签： p5.js 创意编程 前端绘制
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/Yuasin18/article/details/102547400
版权

p5.js动态图形临摹以及拓展

动态图形原图

本次选择临摹图形为该图
在这里插入图片描述

原图分析

可以看出，图形底层由六行六列一共36个圆形组成，每个圆形之间有一定的空隙，并不是完全贴合。每个圆中可以看到有一个黑色的扇形在旋转，扇形一共有两种旋转模式，即顺时针与逆时针。

认真观察后可以发现扇形的旋转速度是符合正弦函数的，而且在每半个正弦周期内扇形旋转的角度是 PI/2，即90°。简单点说就是扇形在转过90°的过程中，速度从0变大再变成0.

代码分析与公式推导

分析

整篇代码值得说的地方不多，临摹中遇到的最困难的问题就是如何实现扇形旋转时速度呈现正弦变换，而且关键在于旋转角度刚好要是90°。实现如上效果其实只需要两行代码，但是涉及到了高数知识，而且刚开始时思路没理清，一直调整不好旋转角度，花了挺多时间。

  c = frameCount/(4*PI)
最低0.47元/天 解锁文章
Yuasin18
关注
  • 0
    点赞
  • 踩
  • 9
    收藏
    觉得还不错? 一键收藏
  • 1
    评论
专栏目录
p5.js画一幅自画像（虽然和自己并不像）
weixin_44550647的博客
11-03 879
用p5.js画一幅自画像 如何画基础图形 扇形：arc(200, 130, 112, 80, PI, 0);//绘制弧(x,y,宽,高,起始角度,终止角度) 圆形：ellipse(175,150,30,30);//绘制椭圆(x,y,宽,高) 四边形：quad(100,0,200,0,0,200,0,100); //绘制四边形（x1,y1,x2,y2,x3,y3,x4,y4） 矩形：rect(19...
【第二次码绘】使用p5.js绘制自画像
qq_44647378的博客
11-03 828
【第二次码绘】使用p5.js绘制自画像 背景说明 互动媒体技术课作业要求使用p5.js或者其他语言绘制自画像，表达自己的追求、梦想、爱好等主题，正好最近作业特别多，觉得写作业写的崩溃，就想以此为题绘制出带有动态效果的表达自己心声的图像。灵感突现，就想画出一幅看到代表作业的vs等软件以及deadline快到时想要哭泣的心情，以及作业完成时的喜悦。 相关技术 实际上绘制所用相关函数非常简单，但是就是绘...
p5.js实现动态码绘（3d旋转、2d旋转基础）
qq_41713179的博客
10-21 3270
p5.js实现动态码绘（3d旋转、2d旋转基础） 一.在开始前遇到的编译器问题 p5有一套自己的绘图框架，并且有一个非常易用的离线网页版编译器，免除了新的编译器带来的烦恼。但是它的web editor也有缺点，即没有词义联想和代码补全。因此最终还是选择了使用vscode。不过作为一个非常轻量级的编译器，vscode虽然能够在自动补全函数参数表的同时提示用户相应的函数方法需要传递什么样的参数，也无法...
老慜的A5作业——p5.js &动态、周期、随机、面向对象
h_ush_的博客
12-30 1573
A5 “运动”主题的创意编程习作 终于到了这学期最后一个编程习作了，来看看最后这学期都憋出来什么玩意吧！ A4pluse，上次作业中对蝴蝶的飞舞动作进行了优化，并且增加了一些环境细节，日夜更替有周期，但是无规则的运动没有周期。代码很容易读，只做了简单的注释 直接看效果： 完整代码： xoff=0; yoff=10000; bgc=225;//背景亮度 function setup() { createCanvas(500, 500); } function draw() { back
p5.js|frameCount属性
资资的博客
10-30 2817
如果想要实现一些前后相互关联的效果，那就可以用到frameCount这个属性。 frameCount记录了从开始运行到目前一共刷新了几帧，draw()是连续运行的，因此可以先在setup()函数中frameRate，一秒刷新的次数。 官网案例 function setup() { frameRate(30); textSize(30); textAlign(CENTER); } function draw() { background(200); text(frameCou
P5.JS绘制动态图形
weixin_44514166的博客
10-21 2936
P5.JS绘制动态图形 一、平台 第一次使用p5.js进行码绘，此次直接使用P5.JS官网的在线编辑器进行编写，完成后点击file->download即可保存到本地。 在正式绘制之前，我经过小小的尝试首先弄明白：画布的坐标系是怎样的？ 原点在画布中央，x轴正向水平向右，y轴正向竖直向下，z轴正向垂直屏幕向外。 当要使用box()等构造3d图形的函数时，创建画布需添加参数WEBGL，即 cre...
p5.js实现动态图形临摹
10-16
主要为大家详细介绍了p5.js实现动态图形临摹，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
使用p5.js临摹动态图形
11-21
最近正在学习用代码绘图，于是按照下面的动态图形自己临摹了一幅图形 临摹结果 观察发现，整个图案都是由基础的正六边形组成 首先创建一个画布 function setup() { createCanvas(400, 400); } 画六边形的函数为...
p5.js临摹动态图形实现方法详解
10-16
主要为大家详细介绍了p5.js临摹动态图形的实现方法，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
p5.js临摹动态图形的方法
10-16
主要为大家详细介绍了p5.js临摹动态图形的方法，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
p5.js创意绘图(1)动态图形
lepaipai的博客
10-20 1538
利用p5.js临摹一幅动态图形。 原图 分析 看起来像是两个葫芦在转圈，其实每个圆点并没有旋转，只是在以图形中心为原点的射线上来回移动。长瘦葫芦上的圆点移动的周期是短胖葫芦上的圆点移动的周期的两倍，且长瘦葫芦上的圆点的初相位与短胖葫芦上的圆点的初相位相差PI。 因此其实就是每个圆点与图形中心距离按正弦函数随时间发生变化，且每个圆点的初相位与其极坐标下（以图形中心为原点）的角度有关。 (t:时间变...
p5.js创意绘图(2)自画像
lepaipai的博客
11-01 1448
利用p5.js画一幅自画像，最终效果如下图：
JavaScript教程：对P5.js使用可重复的随机性
cxu0262的博客
05-16 1014
在过去的几周中，我们介绍了P5.js并将其用于生成带纹理的纸张背景和相对压倒性（但很有趣！） 的watercolor表示 。 在这篇文章中，我们将讨论可重复的随机性以及为什么要使用它（提示：可重复性！）。 然后，我们将深入研究并更新代码，以利用可重复的随机性来帮助我们隔离和保留所生成的最佳视觉效果。 到目前为止，使用我们已经编写的代码，每次浏览器评估我们JavaScript时，水彩图像都会...
拟合直线 二次函数曲线 最小二乘法 javascript（p5.js，附完整代码）
热门推荐
华容道的博客
12-21 1万+
最小二乘法拟合 使用工具 p5.js 是开源的设计师工具，专攻画图 下面是文档、工具包和官网(本文只用了其中的p5.min.js) 链接：https://pan.baidu.com/s/1i5D0OpZ 密码：e04v https://p5js.org/ 拟合直线 最终效果 数学公式 ∑ni=0(x−x¯)(y−y¯)∑ni=0(x−x¯)(x−x¯)
基于P5.js的创意交互自画像（状态切换实现变身效果）
qq_43444903的博客
11-04 891
创意交互GIF图展示
p5js动态作业临摹
gomavsjy的博客
10-20 932
动态作业临摹 临摹作品 规律分析 先观察正方形分布情况，可以得到奇数行是白黑，偶数行是黑白。 再观察其运动规律，先是白方块放大 然后黑方块放大，也可以看成白方块放大缩小。（随着一定的周期进行变化） 代码分析 先根据刚才得到的规律画好正方形，代码如下：` for(i=0;i<8;i++){ for(j=0;j<8;j++){ if(i%2==0){ if(j...
用P5 JS绘制动态绚丽烟花——动态篇
qq_40427180的博客
11-23 4196
整个自然界，从最小的东西到最大的东西，从沙粒到太阳，从原生生物到人，都处于永恒的产生和消灭中，处于不断的流动中，处于无休止的运动和变化中。–〔德〕恩格斯：《自然辩证法·导言》 世界处于永恒的运动之中。万物皆在不停顿地运动。–〔法〕蒙田：《散文集》 ...
p5.js创意编程——动态图形临摹及拓展
weixin_44374653的博客
10-21 720
目录观察图形动态所需函数代码实现一些需要注意的点全部代码生成效果一个拓展完整代码实现效果 观察图形动态 显而易见，这是一个小方块先分别进行在长、宽、高即，x，y，z轴上的放大，然后旋转的同时进行等比例缩小回原来的大小。 所需函数 根据以上观察到的结果，仔细参考一下p5.js的Reference便能够轻松地找到所需要用到的一些p5.js自带的函数。 代码实现 一些需要注意的点 // 每...
p5.js实现绘画系统
最新发布
11-01
p5.js是一个基于JavaScript的创意编程库，可以实现绘画系统。使用p5.js，你可以通过编写代码来创建绘画、图形和动画。 要开始使用p5.js绘画系统，首先需要设置画布。你可以指定画布的大小、颜色和位置等属性。然后...

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 1
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值