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); }
本文名称:p5.js临摹旋转爱心-创新互联
文章出自:http://hbruida.cn/article/ddecjh.html