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 相关文章推荐
解析js如何获取当前url中的参数值并复制给input
Jun 23 Javascript
对Jquery中的ajax再封装,简化操作示例
Feb 12 Javascript
JavaScript数组去重的3种方法和代码实例
Jul 01 Javascript
js 自带的sort() 方法全面了解
Aug 16 Javascript
JavaScript探测CSS动画是否已经完成的方法
Aug 30 Javascript
使用jQuery实现购物车结算功能
Aug 15 jQuery
JavaScript常用数组操作方法,包含ES6方法
May 10 Javascript
Vue-cli3.X使用px2 rem遇到的问题及解决方法
Aug 08 Javascript
Vue列表循环从指定下标开始的多种解决方案
Apr 08 Javascript
浅谈vue生命周期共有几个阶段?分别是什么?
Aug 07 Javascript
vue制作toast组件npm包示例代码
Oct 29 Javascript
JavaScript实现筛选数组
Mar 02 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
图书管理程序(三)
2006/10/09 PHP
PHP 5.3.0 安装分析心得
2009/08/07 PHP
探讨PHP JSON中文乱码的解决方法详解
2013/06/06 PHP
ThinkPHP多语言支持与多模板支持概述
2014/08/22 PHP
浅谈php优化需要注意的地方
2014/11/27 PHP
php+ajax无刷新分页实例详解
2015/12/07 PHP
PHP Smarty模版简单使用方法
2016/03/30 PHP
Javascript attachEvent传递参数的办法
2009/12/14 Javascript
基于Jquery的表格隔行换色,移动换色,点击换色插件
2010/12/22 Javascript
js call方法详细介绍(js 的继承)
2013/11/18 Javascript
关于js里的this关键字的理解
2015/08/17 Javascript
jQuery实现仿QQ空间装扮预览图片的鼠标提示效果代码
2015/10/30 Javascript
JavaScript重载函数实例剖析
2016/05/13 Javascript
JQuery.validate在ie8下不支持的快速解决方法
2016/05/18 Javascript
json实现添加、遍历与删除属性的方法
2016/06/17 Javascript
JavaScript获取css行间样式,内连样式和外链样式的简单方法
2016/07/18 Javascript
vue项目中仿element-ui弹框效果的实例代码
2019/04/22 Javascript
详解iview的checkbox多选框全选时校验问题
2019/06/10 Javascript
[02:06]DOTA2英雄基础教程 暗影萨满
2013/12/16 DOTA
Python中的Numpy入门教程
2014/04/26 Python
200 行python 代码实现 2048 游戏
2018/01/12 Python
python找出完数的方法
2018/11/12 Python
详解用Python练习画个美队盾牌
2019/03/23 Python
Python切图九宫格的实现方法
2019/10/10 Python
TensorFlow tf.nn.max_pool实现池化操作方式
2020/01/04 Python
pandas中的ExcelWriter和ExcelFile的实现方法
2020/04/24 Python
Python项目跨域问题解决方案
2020/06/22 Python
利用Canvas模仿百度贴吧客户端loading小球的方法示例
2017/08/13 HTML / CSS
中兴通讯全球官方网站:ZTE
2020/12/26 全球购物
平安建设实施方案
2014/03/19 职场文书
《最佳路径》教学反思
2014/04/13 职场文书
法制宣传月活动方案
2014/05/11 职场文书
2014年学习厉行节约反对浪费思想汇报
2014/09/10 职场文书
高中生第一学年自我鉴定2015
2014/09/28 职场文书
CSS3实现的3D隧道效果
2021/04/27 HTML / CSS
Python自动化实战之接口请求的实现
2022/05/30 Python