本篇文章主要介绍了p5.js实现斐波那契螺旋的示例代码,分享给大家,也给自己做个笔记
效果如下:
主要方法
<李>翻译()
<李>旋转()
<李>弧()
<强>斐波那契螺旋
斐波那契螺旋线也称“黄金螺旋”,是根据斐波那契数列画出来的螺旋曲线,以斐波那契数为边的正方形中画一个90度的扇形,连起来的弧线就是斐波那契螺旋。
<强>草图
过程分解
<强>一、定义一个空的斐波那契数组:
var斐波那契=[];
<强>二,初始化
默认情况下画()函数会无限重复绘图,帧速率()函数可以设置每秒重复绘图的次数,就像电影每秒播放的帧数。
函数设置(){
createCanvas (windowWidth windowHeight);//创建一块画板,画板的宽高与浏览器宽高相同
背景(255);//设置背景颜色为白色
帧速率(10);//设置每10秒帧
}
<强>三,设置斐波那契螺旋的样式
函数画(){
…
中风(0);//线条颜色为黑色
noFill();//无填充色
strokeWeight(5);//线条宽度为5
翻译(windowWidth/2, windowHeight/2);//将坐标系移动到页面中央
…
}
之前
<强>四,开始绘制斐波那契螺旋
函数画(){
…
中风(0);
noFill ();
strokeWeight (5);
翻译(windowWidth/2, windowHeight/2);
…
(var=0;我& lt;20;我+ +){//绘制20段90度弧线
var=我& lt;=1 & # 63;1:斐波那契(张)+斐波纳契(我2);//这是条件表达式,如果我等于0或1,那么一个等于1;否则等于斐波那契数列前两项的和
Fibonacci.push (a);//将新得到的一个加入斐波那契数列中
弧(0,0,* 2,* 2,0,π/2);//绘制圆心在(0,0)直径为2 *度数为90度的弧形/* * * * * * * * * *以下是为下一段弧线做准备* * * * * * * * * * * */旋转(π/2);//将坐标系按顺时针旋转90度
翻译(斐波纳契(张),0);//将坐标系沿着X轴反向移动上一项的长度
}
}
之前
<强>五,让斐波那契螺旋动起来
函数画(){
背景(255);//将背景设置成白色,“遮盖”之前的绘图
中风(0);
noFill ();
strokeWeight (5);
翻译(windowWidth/2, windowHeight/2);
旋转(-π/6 * frameCount);//每帧旋转30度,frameCount表示当前已播放帧数
(var=0;我& lt;20;我+ +){
var=我& lt;=1 & # 63;1:斐波那契(张)+斐波纳契(我2);
Fibonacci.push(一个);
弧(0,0,* 2,* 2,0,π/2);
旋转(π/2);
翻译(斐波纳契(张),0);
}
}
之前
<强>完整代码
var斐波那契=[];
函数设置(){
createCanvas (windowWidth windowHeight);
背景(255);
帧速率(10);
}
函数画(){
背景(255);
中风(0);
noFill ();
strokeWeight (5);
翻译(windowWidth/2, windowHeight/2);
旋转(-π/6 * frameCount);
(var=0;我& lt;20;我+ +){
var=我& lt;=1 & # 63;1:斐波那契(张)+斐波纳契(我2);
Fibonacci.push(一个);
弧(0,0,* 2,* 2,0,π/2);
旋转(π/2);
翻译(斐波纳契(张),0);
}
}
函数windowResized () {
resizeCanvas (windowWidth windowHeight);
}
之前
以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持。
