p5.js实现斐波那契螺旋的示例代码

本文主要介绍p5.js实现斐波那契螺旋的示例代码，分享给大家，自己做个笔记

效果如下：

主要方法

平移()旋转()圆弧()斐波那契螺旋

斐波那契螺旋又称“黄金螺旋”，是根据斐波那契数列绘制的螺旋曲线。90度扇形画在一个以斐波那契数为边的正方形中，连接的圆弧是斐波那契螺线。

素描

过程分解

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

var Fibonacci=[]；第二，初始化

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

函数setup(){ createCanvas(window width，window height)；//创建一个宽度和高度与浏览器背景相同的画板(255)；//将背景颜色设置为白色帧率(10)；//设置每秒10帧}第三，设置斐波那契螺线的样式

函数draw(){ 0.笔画(0)；//线条颜色为黑色noFill()；//strokewight(5)无填充色(5)；//线宽5translate (windowwidth/2，window height/2)；//将坐标系移动到页面中心.}第四，开始画斐波那契螺旋

函数draw(){ 0.笔画(0)；noFill()；斯特洛克威特(5)；平移(windowWidth/2，window height/2)；for(var I=0；i 20I ){//画20个90度圆弧var a=i=1？1 :斐波那契[i-1]斐波那契[I-2]；//这是一个条件表达式。如果I等于0或1，那么A等于1；否则等于斐波那契数列前两项之和的斐波那契推(a)；//将新的a加到斐波那契数列弧上(0，0，a * 2，a * 2，0，PI/2)；//画一个圆心在(0，0)，直径为2*a，度数为90度的圆弧/* * * * * * *以下是为下一个圆弧做准备* * * * * * * * */旋转(pi/2)；//顺时针旋转坐标系90度平移(-斐波那契[i-1]，0)；//将坐标系沿X轴向后移动上一项的长度}} 5。让斐波那契螺旋上升

函数draw(){ background(255)；//将背景设置为白色，并“覆盖”上一个绘图笔画(0)；noFill()；斯特洛克威特(5)；平移(windowWidth/2，window height/2)；旋转(-PI/6 * frame count)；//每帧旋转30度，frameCount表示当前播放的帧数(var I=0；i 20i ){ var a=i=1？1 :斐波那契[i-1]斐波那契[I-2]；斐波那契推(a)；arc(0，0，a * 2，a * 2，0，PI/2)；旋转(/2)；translate(-Fibonacci[i-1]，0)；}}完整代码

var Fibonacci=[]；函数setup(){ createCanvas(window width，window height)；背景(255)；帧率(10)；}函数draw(){ background(255)；笔画(0)；noFill()；斯特洛克威特(5)；平移(windowWidth/2，window height/2)；旋转(-PI/6 * frame count)；for(var I=0；i 20i ){ var a=i=1？1 :斐波那契[i-1]斐波那契[I-2]；斐波那契推(a)；arc(0，0，a * 2，a * 2，0，PI/2)；旋转(/2)；translate(-Fibonacci[i-1]，0)；} }函数window resized(){ resizeCanvas(window width，window height)；}以上就是本文的全部内容。希望对大家的学习有帮助，支持我们。