本篇文章主要介紹了p5.js實現(xiàn)斐波那契螺旋的示例代碼，分享給大家，也給自己做個筆記
辰溪ssl適用于網(wǎng)站、小程序/APP、API接口等需要進(jìn)行數(shù)據(jù)傳輸應(yīng)用場景，ssl證書未來市場廣闊！成為成都創(chuàng)新互聯(lián)的ssl證書銷售渠道，可以享受市場價格4-6折優(yōu)惠！如果有意向歡迎電話聯(lián)系或者加微信：18980820575（備注：SSL證書合作）期待與您的合作！
效果如下：
主要方法
斐波那契螺旋
斐波那契螺旋線也稱“黃金螺旋”，是根據(jù)斐波那契數(shù)列畫出來的螺旋曲線，以斐波那契數(shù)為邊的正方形中畫一個90度的扇形，連起來的弧線就是斐波那契螺旋。
草圖
過程分解
一、定義一個空的斐波那契數(shù)組：
var Fibonacci = [];
二、初始化
默認(rèn)情況下draw()函數(shù)會無限重復(fù)繪圖， frameRate()函數(shù)可以設(shè)置每秒重復(fù)繪圖的次數(shù)，就像電影每秒播放的幀數(shù)。
重慶分公司
重慶分公司
function setup(){
createCanvas(windowWidth, windowHeight);//創(chuàng)建一塊畫板，畫板的寬高與瀏覽器寬高相同
background(255);//設(shè)置背景顏色為白色
frameRate(10);//設(shè)置每秒10幀
}三、設(shè)置斐波那契螺旋的樣式
function draw(){
...
stroke(0);//線條顏色為黑色
noFill();//無填充色
strokeWeight(5);//線條寬度為5
translate(windowWidth/2, windowHeight/2);//將坐標(biāo)系移動到頁面中央
...
}
四、開始繪制斐波那契螺旋
function draw(){
...
stroke(0);
noFill();
strokeWeight(5);
translate(windowWidth/2, windowHeight/2);
...
for( var i = 0; i < 20; i ++){//繪制20段90度弧線
var a = i <= 1 ? 1 : Fibonacci[i-1] + Fibonacci[i-2];
//這是條件表達(dá)式，如果i等于0或1，那么a等于1；否則等于斐波那契數(shù)列前兩項的和
Fibonacci.push(a);//將新得到的a加入斐波那契數(shù)列中
arc(0,0,a * 2,a * 2,0,PI / 2);//繪制圓心在(0,0)直徑為2*a度數(shù)為90度的弧形
/**********以下是為下一段弧線做準(zhǔn)備************/
rotate(PI / 2);//將坐標(biāo)系按順時針旋轉(zhuǎn)90度
translate(-Fibonacci[i-1],0); //將坐標(biāo)系沿著X軸反向移動上一項的長度
}
}
五、讓斐波那契螺旋動起來
function draw(){
background(255);//將背景設(shè)置成白色，“遮蓋”之前的繪圖
stroke(0);
noFill();
strokeWeight(5);
translate(windowWidth/2, windowHeight/2);
rotate(-PI / 6 * frameCount);//每幀旋轉(zhuǎn)30度，frameCount表示當(dāng)前已播放幀數(shù)
for( var i = 0; i < 20; i ++){
var a = i <= 1 ? 1 : Fibonacci[i-1] + Fibonacci[i-2];
Fibonacci.push(a);
arc(0,0,a * 2,a * 2,0,PI / 2);
rotate(PI / 2);
translate(-Fibonacci[i-1],0);
}
}
完整代碼
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 < 20; i ++){
var a = i <= 1 ? 1 : Fibonacci[i-1] + Fibonacci[i-2];
Fibonacci.push(a);
arc(0,0,a * 2,a * 2,0,PI / 2);
rotate(PI / 2);
translate(-Fibonacci[i-1],0);
}
}
function windowResized(){
resizeCanvas(windowWidth, windowHeight);
}
以上就是本文的全部內(nèi)容，希望對大家的學(xué)習(xí)有所幫助，也希望大家多多支持創(chuàng)新互聯(lián)。
