java旋转爱心_p5.js临摹旋转爱心
运用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表示一帧旋转的弧度增量。
②在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分解到每一帧,逐帧观察。运动规律相对复杂,且每一层运动规律都不同,需要控制的变量较多。
以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持脚本之家。
java旋转爱心_p5.js临摹旋转爱心相关推荐
- HTML5七夕情人节表白网页(抖音-流动爱心表白)HTML+CSS+JavaScript 求婚示爱代码 520情人节告白代码 程序员表白源码 3D旋转相册 js烟花代码 爱心表白网页
HTML5七夕情人节表白网页❤抖音-流动爱心表白❤ HTML+CSS+JavaScript 求婚示爱代码 520情人节告白代码 程序员表白源码 3D旋转相册 js烟花代码 爱心表白网页 这是程序员表白 ...
- css和js实现3d图片,JavaScript_纯JS实现旋转图片3D展示效果,CSS:style type=text/cssgt - phpStudy...
纯JS实现旋转图片3D展示效果 CSS: #show{position:relative;margin:20px auto;width:800px;} .item{position:absolute; ...
- 解惑:如何使用html+css+js实现旋转相册,立方体相册等动画效果
解惑:如何使用html+css+js实现旋转相册,立方体相册等动画效果 一.前言 最初还是在抖音上看到可以使用简单地代码实现炫酷的网页效果的,但是想要找到可以运行的代码还是比较困难的,最近突然想起就在 ...
- 前端实现图片查看器(滚轮放大,缩小,旋转)——Viewer.js
一.前端实现图片查看器(放大,缩小,旋转)--Viewer.js [附参考链接:(14条消息) Viewer.js第一次点击图片无法显示解决方案(vue使用)_李墨瞳的博客-CSDN博客] 1.0 J ...
- 520情人节程序员的浪漫告白~html+css+js浪漫星空❤爱心3D相册 (含音乐)
❉ 来自程序员的浪漫告白~html+css+js浪漫星空❤爱心3D相册 (含音乐)可自定义编辑文字 一年一度的/520情人节/七夕情人节/生日礼物/告白师妹/圣诞节/元旦节跨年/程序员表白,是不是要给 ...
- php js 图片旋转,jQuery制作图片旋转效果
以前用JQuery写过一个纵深方向上的图片旋转效果,在这里拿出来跟大家分享下,贴上一张图片看看效果是如何的: 其实现原理并不复杂,在数学上只用到了其中的正弦函数,制作过程大致如下: (1)先定义好图片 ...
- java计算机毕业设计Vue.js网上书城管理系统设计与实现服务端MyBatis+系统+LW文档+源码+调试部署
java计算机毕业设计Vue.js网上书城管理系统设计与实现服务端MyBatis+系统+LW文档+源码+调试部署 java计算机毕业设计Vue.js网上书城管理系统设计与实现服务端MyBatis+系统 ...
- 百度旋转验证码及同类型旋转验证码的识别思路
百度旋转验证码及同类型旋转验证码的0~20毫秒小模型识别思路 11弟弟搞百度旋转验证码的心酸 具体讲解识别思路 百度拖动旋转验证码被破解?当代流行的人机验证到底安不安全? 提示:以下是皆为学习交流之, ...
- 沿着x轴旋转的html例子,CSS3旋转实例学习(附3D旋转实例)
我们都有在网页上见过一些交互性的效果,比如用鼠标滑向图标或是按钮的时候,图标会自动旋转一周,这就是CSS3旋转效果.在CSS3中有个常见的transform应用,transform主要包括以下几种:旋 ...
最新文章
- Java实现二维码QRCode的编码和解码
- 笨方法学python3-笨办法学python3 pdf下载|
- 管理员端API——任仲行
- POJ 1041 John's trip(欧拉回路)
- 实现.Net程序中OpenTracing采样和上报配置的自动更新
- 【转】继承过程中 父类子类的 字段方法 内存分配 (非java语言)
- 软件工程 第一次作业
- eclipse中maven项目pom文件第一行报错解决方法
- android5.1蓝牙opp协议去掉Notification和Dialog操作提示
- android 监听连接超时,android – Retrofit和OkHttpClient,在失败方法中捕获连接超时
- Java家庭收支记账系统
- xy轴坐标图数字表示_cad图纸上的X、Y坐标是什么意思? 丫坐标和x坐标图纸上的数...
- 人人商城小程序 用户登录授权接口 wx.getUserProfile后,个别用户出现无法登录的问题
- EtherCAT运动控制卡开发教程之Qt(下):SCARA机械手正反解的建立
- 白盒测试的几种覆盖方法:语句覆盖、判定覆盖、条件覆盖、判定/条件覆盖、组合覆盖和路径覆盖详解
- 计算机主机三维模型,三维模型
- Qt之调用笔记本摄像头录像功能
- Error obtaining UI hierarchy Error while obtaining UI hierarchy XML file: com.android.ddmlib.SyncExc
- 单片机c语言延时程序计算,单片机 计算延时子程序执行时间
- oracle用户剩余空间,ORACLE 中删除了表肿么硬盘剩余空间没变?
热门文章
- HIbernate的检索方式
- python文件操作与异常处理_Python学习——文件操作和异常处理
- 带你学python基础:元祖tuple和字典dictionary
- servlet的重定向错误
- Java IO流之随机读写流RandomAccessFile
- android 加载html6,WebView使用总结2(加载HTML内容形式的String)
- C语言实现录入学生信息并按分数排序输出
- VueX(Vue状态管理模式)
- linux如何找到桌面,我怎样才能找到我正在使用的桌面环境?
- 图:DFS(深度优先搜索)图解分析代码实现