p5.js 畢達哥拉斯樹的實現(xiàn)代碼
更新時間:2018年03月23日 08:34:36 作者:SampleTape
這篇文章主要介紹了p5.js 畢達哥拉斯樹的實現(xiàn)代碼,小編覺得挺不錯的,現(xiàn)在分享給大家,也給大家做個參考。一起跟隨小編過來看看吧
本文介紹了p5.js 畢達哥拉斯樹的實現(xiàn)代碼,分享給大家,具體如下:
效果如下:

主要方法
- translate()
- rotate()
- rect()
- push()
- pop()
- map()
主要思想
遞歸
草圖

過程分解
一、畢達哥拉斯樹的遞歸函數(shù)
function Pythagorian(x){
noStroke();
fill(107, 142, 35,map(x, 0, a, 150, 255));//根據(jù)正方形邊長設置填充色
rect(0,0,x,x);//繪制當前的正方形
if(x <= 3) return 0;//當正方形邊長小于3時,結束遞歸
/* 繪制右上角的正方形 */
push();
rotate(PI / 2 - t);//坐標軸順時針旋轉約37deg
translate(0,-x/5 * 3 - x/5*4);//坐標軸向上平移3邊+4邊的長度
Pythagorian(x/5*4);//遞歸調用畢達哥拉斯函數(shù)
pop();
/* 繪制左上角的正方形 */
push();
rotate( - t);//坐標軸逆時針旋轉約53deg
translate(0,-x/5 * 3);//坐標軸向上平移3邊的長度
Pythagorian(x/5*3);//遞歸調用畢達哥拉斯函數(shù)
pop();
}
二、聲明變量、創(chuàng)建畫布
var a = 100; //最大正方形邊長
var t;//4邊所對應的角度
function setup(){
t = 53.1301024 / 360 * 2 * PI;//約為53deg
createCanvas(windowWidth, windowHeight);//創(chuàng)建畫布
background(255);
noLoop();//draw()函數(shù)只執(zhí)行一次
}
三、開始繪制畢達哥拉斯樹
function draw(){
translate(windowWidth/2, windowHeight - a * 2);//將坐標系平移至畫布中間底部
Pythagorian(a);//調用畢達哥拉斯遞歸函數(shù)
}
繪制畢達哥拉斯樹完整代碼
var a = 100;
var t;
function setup(){
t = 53.1301024 / 360 * 2 * PI;
createCanvas(windowWidth, windowHeight);
background(255);
noLoop();
}
function draw(){
translate(windowWidth/2, windowHeight - a * 2);
Pythagorian(a);
}
function Pythagorian(x){
noStroke();
fill(107, 142, 35,map(x, 0, a, 150, 255));
rect(0,0,x,x);
if(x <= 3) return 0;
push();
rotate(PI / 2 - t);
translate(0,-x/5 * 3 - x/5*4);
Pythagorian(x/5*4);
pop();
push();
rotate( - t);
translate(0,-x/5 * 3);
Pythagorian(x/5*3);
pop();
}
以上就是本文的全部內容,希望對大家的學習有所幫助,也希望大家多多支持腳本之家。
相關文章
JS使用ajax方法獲取指定url的head信息中指定字段值的方法
這篇文章主要介紹了JS使用ajax方法獲取指定url的head信息中指定字段值的方法,實例分析了Ajax操作URL中head信息的技巧,具有一定參考借鑒價值,需要的朋友可以參考下2015-03-03
KnockoutJS 3.X API 第四章之表單value綁定
Knockout是一個以數(shù)據(jù)模型(data model)為基礎的能夠幫助你創(chuàng)建富文本,響應顯示和編輯用戶界面的JavaScript類庫。這篇文章主要介紹了KnockoutJS 3.X API 第四章之表單value綁定的相關資料,需要的朋友可以參考下2016-10-10
詳解JavaScript中的構造器Constructor模式
構造器Constructor不能被繼承,因此不能重寫Overriding,但可以被重載Overloading。通過本文給大家分享JavaScript中的構造器Constructor模式,對構造器constructor相關知識感興趣的朋友一起學習吧2016-01-01
解決bootstrap導航欄navbar在IE8上存在缺陷的方法
這篇文章主要為大家詳細介紹了解決bootstrap導航欄navbar在IE8上存在缺陷的方法,需要的朋友可以參考下2016-07-07
JavaScript動態(tài)數(shù)量的文件上傳控件
本文給大家分享一段js代碼關于動態(tài)數(shù)量的文件上傳控件,代碼簡單易懂,非常不錯具有參考借鑒價值,感興趣的朋友一起看看2016-11-11
淺談javascript的url參數(shù)parse和build函數(shù)
下面小編就為大家?guī)硪黄獪\談javascript的url參數(shù)parse和build函數(shù)。小編覺得挺不錯的,現(xiàn)在就分享給大家,也給大家做個參考。一起跟隨小編過來看看吧2017-03-03

