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宝典学习笔记
Feb 07 Javascript
jquery如何改变html标签的样式(两种实现方法)
Jan 16 Javascript
Web开发必知Javascript技巧大全
Feb 23 Javascript
Ionic默认的Tabs模板使用实例
Aug 29 Javascript
谈谈JavaScript中浏览器兼容问题的写法小议
Dec 17 Javascript
Bootstrap table使用方法总结
May 10 Javascript
详解Angular-cli生成组件修改css成less或sass的实例
Jul 27 Javascript
Vue父子组件之间的通信实例详解
Sep 28 Javascript
vue 使用element-ui中的Notification自定义按钮并实现关闭功能及如何处理多个通知
Aug 17 Javascript
在layui中对table中的数据进行判断(0、1)转换为提示信息的方法
Sep 28 Javascript
Vue触发input选取文件点击事件操作
Aug 07 Javascript
vue-cli脚手架的.babelrc文件用法说明
Sep 11 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
兼容各大浏览器带关闭按钮的漂浮多组图片广告代码
2014/06/05 PHP
php向js函数传参的几种方法
2014/08/10 PHP
分享PHP守护进程类
2015/12/30 PHP
必须收藏的php实用代码片段
2016/02/02 PHP
onkeypress字符按键兼容所有浏览器使用介绍
2013/04/24 Javascript
jquery 面包屑导航 具体实现
2013/06/05 Javascript
jQuery插件jQuery-JSONP开发ajax调用使用注意事项
2013/11/22 Javascript
jquery each的几种常用的使用方法示例
2014/01/21 Javascript
SeaJS入门教程系列之完整示例(三)
2014/03/03 Javascript
jQuery实现多级联动下拉列表查询框
2016/01/18 Javascript
jQuery控制控件文本的长度的操作方法
2016/12/05 Javascript
jQuery滑动到底部加载下一页数据的实例代码
2017/05/22 jQuery
利用vue.js把静态json绑定bootstrap的table方法
2018/08/28 Javascript
VuePress 静态网站生成方法步骤
2019/02/14 Javascript
浅谈Layui的eleTree树式选择器使用方法
2019/09/25 Javascript
vue中利用iscroll.js解决pc端滚动问题
2020/02/15 Javascript
浅谈JavaScript中的“!!”作用
2020/08/03 Javascript
[01:05:00]2018国际邀请赛 表演赛 Pain vs OpenAI
2018/08/24 DOTA
python基于windows平台锁定键盘输入的方法
2015/03/05 Python
在Python的Django框架上部署ORM库的教程
2015/04/20 Python
Python中条件判断语句的简单使用方法
2015/08/21 Python
python实现决策树分类算法
2017/12/21 Python
详解Python中如何写控制台进度条的整理
2018/03/07 Python
Python+Tensorflow+CNN实现车牌识别的示例代码
2019/10/11 Python
selenium中get_cookies()和add_cookie()的用法详解
2020/01/06 Python
Python3+Selenium+Chrome实现自动填写WPS表单
2020/02/12 Python
Python关键字及可变参数*args,**kw原理解析
2020/04/04 Python
如何在scrapy中捕获并处理各种异常
2020/09/28 Python
Python下使用Trackbar实现绘图板
2020/10/27 Python
CSS3绘制六边形的简单实现
2016/08/25 HTML / CSS
Html5+JS实现手机摇一摇功能
2015/04/24 HTML / CSS
益模软件Java笔试题
2012/03/27 面试题
学习决心书
2014/03/11 职场文书
汽车转让协议书
2015/01/29 职场文书
起诉书格式范文
2015/05/20 职场文书
Python实现的扫码工具居然这么好用!
2021/06/07 Python