p5.js临摹旋转爱心


Posted in Javascript onOctober 23, 2019

运用p5.js临摹旋转爱心,供大家参考,具体内容如下

原图

我的临摹

效果不错的样子,让我们看看实现过程。

第一步、分析原图GIF

因为原图中旋转速度较快,无法用肉眼直观地找到规律。所以我把gif分解,共90帧,一帧一帧的寻找旋转规律。

从上往下顺序,第一层到第六层。从简单的说起。
第六层:逆时针匀速旋转一圈。
第五层:先逆时针旋转α,速度由v1变为0。再顺时针旋转180°+2α,速度由0变为v2,再变为0。最后逆时针旋转α,速度由0变为v1。(观察原图,我将α设为30°0)
第四层:先逆时针旋转α,再顺时针旋转3×180°+2α,最后逆时针旋转α。速度规律与第五层相同。
第三层:先逆时针旋转α,再顺时针旋转5×180°+2α,最后逆时针旋转α。速度规律与第五层相同。
第二层:先逆时针旋转α,再顺时针旋转7×180°+2α,最后逆时针旋转α。速度规律与第五层相同。
第一层:先逆时针旋转α,再顺时针旋转9×180°+2α,最后逆时针旋转α。速度规律与第五层相同。
(注:使用时记得转化为弧度制。)

第二步、绘制基本形状

首先创建画布,设置背景色

function setup() {
  createCanvas(windowWidth, windowHeight,WEBGL);
}

function draw() {
background(220);
}

绘制第一层立方体

值得注意的是translate()函数使用的是偏移量,而不是坐标值。

function drawHeart1(BoxSize,posX,posY,posZ,r,g,b)  //第一排方块
{
fill(r,g,b);
translate(posX-(10/9)*BoxSize,posY,posZ);
box(BoxSize);
translate(-(10/9)*BoxSize,0,0);
box(BoxSize);
translate(3*(10/9)*BoxSize,0,0);
box(BoxSize);
translate((10/9)*BoxSize,0,0);
box(BoxSize);
translate(0,0,(10/9)*BoxSize);
box(BoxSize);
translate(-(10/9)*BoxSize,0,0);
box(BoxSize);
translate(-2*(10/9)*BoxSize,0,0);
box(BoxSize);
translate(-(10/9)*BoxSize,0,0);
box(BoxSize);
}

在draw()函数中,添加代码。
drawHearts()中第一个参数是立方体的边长,第二到第四个参数是XYZ轴的偏移量,最后三个为立方体颜色RGB值。

push();
translate(0,0);
drawHeart1(40*size1,0,-2*40*10/9,-20,251,68,104);
pop();

以此类推画出其余五层的立方体。

效果图如上(此处调整了一下相机位置)

第三步、旋转

在之前绘制每一层时,要注意物体的X、Z为0,因为rotateY()函数绕Y轴旋转,否则每一层在旋转时不是以绕其中心旋转。

第六层的旋转

①设置旋转角度变量

②在draw()函数中关于第六层代码。其中theta6-=360*PI/180/90表示一帧旋转的弧度增量。

 /></p>
<p>第五层的旋转</p>
<p>①设置旋转角度变量</p>
<p><img/resources/imgs/img_not_found.png

②在draw()函数中关于第五层代码。

③RotateCubes5()函数。第一个参数表示逆时针旋转角度,第二个参数表示顺时针旋转角度的二分之一,第四、五、六个参数用来判断旋转时帧的范围,并用于计算旋转角度。
以第一个if语句为例
在第一帧到第f1帧时,theta5减小,即实现逆时针绕Y轴旋转。其中,frameCount表示当前第几帧。frameCount%90,因为原图有90帧。(f1-frameCount%90)* delta1 * PI *180/Summation(0,f1-1)实现1到f1范围内当前帧数越大,旋转弧度越小。

function RotateCubes5(delta1,delta2,f1,f2,f3){
 if(frameCount%90>=1&&frameCount%90<=f1)
 {
 theta5-=(f1-frameCount%90)*delta1*PI/180/Summation(0,f1-1); 
 }
 if(frameCount%90>=f1+1&&frameCount%90<=f2)
 {
 theta5+=(frameCount%90-f1-1)*delta2*PI/180/Summation(0,f2-f1-1);
 }
 if(frameCount%90>=f2+1&&frameCount%90<=f3)
 {
 theta5+=(f3-frameCount%90)*delta2*PI/180/Summation(0,f2-f1-1);
 }
 if(frameCount%90>=f3+1&&frameCount%90<=89)
 {
 theta5-=(frameCount%90-f3-1)*delta1*PI/180/Summation(0,f1-1);
 }
 if(frameCount%90==0)
 {
    theta5-=(90-f3-1)*delta1*PI/180/Summation(0,f1-1);
 }
  return theta5;
}

③Summation()函数,即高斯求和。

function Summation(n1,n2)
{
 return (n1+n2)*(n2-n1+1)/2;
}

第一到四层的旋转
第一到四层的旋转与第五层一致,修改传入参数即可。
其实RotateCubes()的内容是一致的,最后返回一个theta。但当我为theta赋值后return(如下图),产生效果发生错误 ,分配数据发生错误。第一次接触p5.js,感觉代码写得比较冗余,后续学习中优化。

以上,即完成了对原图的临摹。

拓展作品

让立方体的大小随帧数变化,90帧一循环。

随帧数增加,深粉立方体变小,浅粉立方体变大。并在一瞬间,深粉立方体和浅粉立方体大小相同,形成一个完整的爱心。

if(frameCount%200>=0&&frameCount%200<=99)  //扩展作品2
{
 size1=frameCount%100*0.02;      
  size2=(100-frameCount%100)*0.02;
  size3=frameCount%100*0.02;
  size4=(100-frameCount%100)*0.02;
  size5=frameCount%100*0.02;
  size6=(100-frameCount%100)*0.02;
}
if(frameCount%200>=100&&frameCount%200<=199)
{     
  size1=(100-frameCount%100)*0.02;
  size2=frameCount%100*0.02;
  size3=(100-frameCount%100)*0.02;
  size4=frameCount%100*0.02;
  size5=(100-frameCount%100)*0.02;
  size6=frameCount%100*0.02; 
}

体会:

三维图形比起二维图像要多一个z参数,所以在排布位置的时候难度增大,且translate()函数的参数是偏移量,又为图形绘制增加了难度。

本GIF又一难点在于运动规律不能用肉眼直接获得,需要把GIF分解到每一帧,逐帧观察。运动规律相对复杂,且每一层运动规律都不同,需要控制的变量较多。

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
javascript下阻止表单重复提交、防刷新、防后退
Aug 17 Javascript
JavaScript prototype属性使用说明
May 13 Javascript
jQuery的实现原理的模拟代码 -2 数据部分
Aug 01 Javascript
JS 弹出层 定位至屏幕居中示例
May 21 Javascript
JS中的Replace方法使用经验分享
May 20 Javascript
jQuery获取访问者IP地址的方法(基于新浪API与QQ查询接口)
May 25 Javascript
jquery封装插件时匿名函数形参和实参的写法解释
Feb 14 Javascript
JS使用对象的defineProperty进行变量监控操作示例
Feb 02 Javascript
JavaScript中的 new 命令
May 22 Javascript
js简单的分页器插件代码实例
Sep 11 Javascript
浅谈vue项目,访问路径#号的问题
Aug 14 Javascript
JS如何调用WebAssembly编译出来的.wasm文件
Nov 05 Javascript
JavaScript 作用域scope简单汇总
Oct 23 #Javascript
node.js使用fs读取文件出错的解决方案
Oct 23 #Javascript
jquery 键盘事件 keypress() keydown() keyup()用法总结
Oct 23 #jQuery
JavaScript提升机制Hoisting详解
Oct 23 #Javascript
使用p5.js实现动态GIF图片临摹重现
Oct 23 #Javascript
p5.js临摹动态图形的方法
Oct 23 #Javascript
Vue 实现点击空白处隐藏某节点的三种方式(指令、普通、遮罩)
Oct 23 #Javascript
You might like
discuz程序的PHP加密函数原理分析
2011/08/05 PHP
php魔术方法与魔术变量、内置方法与内置变量的深入分析
2013/06/03 PHP
PHP 5.6.11 访问SQL Server2008R2的几种情况详解
2016/08/08 PHP
JavaScript判断两种格式的输入日期的正确性的代码
2007/03/25 Javascript
使用JQuery和s3captche实现一个水果名字的验证
2009/08/14 Javascript
javascript实现的像java、c#之类的sleep暂停的函数代码
2010/03/04 Javascript
JQuery设置文本框和密码框得到焦点时的样式
2013/08/30 Javascript
JS鼠标滑过图片时切换图片实现思路
2013/09/12 Javascript
nodejs中实现阻塞实例
2015/03/24 NodeJs
js实现鼠标划过给div加透明度的方法
2015/05/25 Javascript
学习使用bootstrap基本控件(table、form、button)
2016/04/12 Javascript
页面向下滚动ajax获取数据的实现方法(兼容手机)
2016/05/24 Javascript
vue.js如何更改默认端口号8080为指定端口的方法
2017/07/14 Javascript
weebox弹出窗口不居中显示的解决方法
2017/11/27 Javascript
详解swipe使用及竖屏页面滚动方法
2018/06/28 Javascript
layer弹出层 iframe层去掉滚动条的实例代码
2018/08/17 Javascript
Vue.js实现的购物车功能详解
2019/01/27 Javascript
js实现小星星游戏
2020/03/23 Javascript
微信小程序入门之绘制时钟
2020/10/22 Javascript
Django中实现点击图片链接强制直接下载的方法
2015/05/14 Python
python的socket编程入门
2018/01/29 Python
tensorflow 只恢复部分模型参数的实例
2020/01/06 Python
python 计算方位角实例(根据两点的坐标计算)
2020/01/17 Python
Python过滤掉numpy.array中非nan数据实例
2020/06/08 Python
Python爬取网页信息的示例
2020/09/24 Python
有原因的手表:Flex Watches
2019/03/23 全球购物
教师实习期自我鉴定
2013/10/06 职场文书
技术人员面试提纲
2013/11/28 职场文书
出资证明书范本(标准版)
2014/09/24 职场文书
公司优秀员工推荐信
2015/03/24 职场文书
学校推普周活动总结
2015/05/07 职场文书
公务员学习中国梦心得体会
2016/01/05 职场文书
你对自己的信用报告有过了解吗?
2019/07/09 职场文书
SpringAop日志找不到方法的处理
2021/06/21 Java/Android
python脚本框架webpy模板控制结构
2021/11/20 Python
Flink 侧流输出源码示例解析
2022/09/23 Servers