p5.js实现黄金螺旋动画-js教程-PHP中文网

p5.js实现黄金螺旋动画

php中世界最好的语言

发布： 2018-05-09 10:16:44

原创

3747人浏览过

这次给大家带来p5.js实现黄金螺旋动画，p5.js实现黄金螺旋动画的注意事项有哪些，下面就是实战案例，一起来看一下。

效果如下：

主要方法

translate()
rotate()
arc()

斐波那契螺旋

斐波那契螺旋线也称“黄金螺旋”，是根据斐波那契数列画出来的螺旋曲线，以斐波那契数为边的正方形中画一个90度的扇形，连起来的弧线就是斐波那契螺旋。

草图

过程分解

一、定义一个空的斐波那契数组：

var Fibonacci = [];

登录后复制

二、初始化

默认情况下draw()函数会无限重复绘图， frameRate()函数可以设置每秒重复绘图的次数，就像电影每秒播放的帧数。

function setup(){
 createCanvas(windowWidth, windowHeight);//创建一块画板，画板的宽高与浏览器宽高相同
 background(255);//设置背景颜色为白色
 frameRate(10);//设置每秒10帧
}

登录后复制

三、设置斐波那契螺旋的样式

function draw(){
 ...
 stroke(0);//线条颜色为黑色
 noFill();//无填充色
 strokeWeight(5);//线条宽度为5
 translate(windowWidth/2, windowHeight/2);//将坐标系移动到页面中央
 ...
}

登录后复制

四、开始绘制斐波那契螺旋

function draw(){
 ...
 stroke(0);
 noFill();
 strokeWeight(5);
 translate(windowWidth/2, windowHeight/2);
 ...
 for( var i = 0; i <p style="text-align: left;"><strong>五、让斐波那契螺旋动起来</strong></p><pre class="brush:php;toolbar:false">function draw(){
 background(255);//将背景设置成白色，“遮盖”之前的绘图
 stroke(0);
 noFill();
 strokeWeight(5);
 translate(windowWidth/2, windowHeight/2);
 rotate(-PI / 6 * frameCount);//每帧旋转30度，frameCount表示当前已播放帧数
 for( var i = 0; i <p style="text-align: left;"><strong>完整代码</strong></p><pre class="brush:php;toolbar:false">var Fibonacci = [];
function setup(){
 createCanvas(windowWidth, windowHeight);
 background(255);
 frameRate(10);
}
function draw(){
 background(255);
 stroke(0);
 noFill();
 strokeWeight(5);
 translate(windowWidth/2, windowHeight/2);
 rotate(-PI / 6 * frameCount);
 for( var i = 0; i <p>相信看了本文案例你已经掌握了方法，更多精彩请关注php中文网其它相关文章！</p><p>推荐阅读：</p><p style="text-align: left;"><a href="http://www.php.cn/js-tutorial-395768.html" target="_blank">模糊框内使用WebUploader步骤详解</a><br></p><p style="text-align: left;"><a href="http://www.php.cn/js-tutorial-395767.html" target="_blank">Vue.js里computed使用案例详解</a><br></p><p style="text-align: left;"><a href="http://www.php.cn/js-tutorial-395763.html" target="_blank">使用selectpicker下拉框案例分析</a><br></p>

登录后复制

以上就是p5.js实现黄金螺旋动画的详细内容，更多请关注php中文网其它相关文章！