p5.js 畢達(dá)哥拉斯樹的實(shí)現(xiàn)代碼
本文介紹了p5.js 畢達(dá)哥拉斯樹的實(shí)現(xiàn)代碼,分享給大家,具體如下:
效果如下:

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

過程分解
一、畢達(dá)哥拉斯樹的遞歸函數(shù)
function Pythagorian(x){
noStroke();
fill(107, 142, 35,map(x, 0, a, 150, 255));//根據(jù)正方形邊長設(shè)置填充色
rect(0,0,x,x);//繪制當(dāng)前的正方形
if(x <= 3) return 0;//當(dāng)正方形邊長小于3時(shí),結(jié)束遞歸
/* 繪制右上角的正方形 */
push();
rotate(PI / 2 - t);//坐標(biāo)軸順時(shí)針旋轉(zhuǎn)約37deg
translate(0,-x/5 * 3 - x/5*4);//坐標(biāo)軸向上平移3邊+4邊的長度
Pythagorian(x/5*4);//遞歸調(diào)用畢達(dá)哥拉斯函數(shù)
pop();
/* 繪制左上角的正方形 */
push();
rotate( - t);//坐標(biāo)軸逆時(shí)針旋轉(zhuǎn)約53deg
translate(0,-x/5 * 3);//坐標(biāo)軸向上平移3邊的長度
Pythagorian(x/5*3);//遞歸調(diào)用畢達(dá)哥拉斯函數(shù)
pop();
}
二、聲明變量、創(chuàng)建畫布
var a = 100; //最大正方形邊長
var t;//4邊所對(duì)應(yīng)的角度
function setup(){
t = 53.1301024 / 360 * 2 * PI;//約為53deg
createCanvas(windowWidth, windowHeight);//創(chuàng)建畫布
background(255);
noLoop();//draw()函數(shù)只執(zhí)行一次
}
三、開始繪制畢達(dá)哥拉斯樹
function draw(){
translate(windowWidth/2, windowHeight - a * 2);//將坐標(biāo)系平移至畫布中間底部
Pythagorian(a);//調(diào)用畢達(dá)哥拉斯遞歸函數(shù)
}
繪制畢達(dá)哥拉斯樹完整代碼
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();
}
以上就是本文的全部內(nèi)容,希望對(duì)大家的學(xué)習(xí)有所幫助,也希望大家多多支持腳本之家。
相關(guān)文章
CocosCreator經(jīng)典入門項(xiàng)目之flappybird
這篇文章主要介紹了CocosCreator經(jīng)典入門項(xiàng)目之flappybird,詳細(xì)說明了制作的每個(gè)步驟,還有詳盡的代碼,對(duì)CocosCreator感興趣的同學(xué),一定要看一下2021-04-04
ECMAScript5中的對(duì)象存取器屬性:getter和setter介紹
這篇文章主要介紹了ECMAScript5中的對(duì)象屬性存取器:getter和setter介紹,事實(shí)上在除ie外最新主流瀏覽器的實(shí)現(xiàn)中,任何一個(gè)對(duì)象的鍵值都可以被getter和setter方法所取代,這被稱之為“存取器屬性”,需要的朋友可以參考下2014-12-12
JavaScript動(dòng)態(tài)修改彈出窗口大小的方法
這篇文章主要介紹了JavaScript動(dòng)態(tài)修改彈出窗口大小的方法,涉及javascript中window.open方法的使用技巧,非常具有實(shí)用價(jià)值,需要的朋友可以參考下2015-04-04
深入理解JavaScript系列(2) 揭秘命名函數(shù)表達(dá)式
網(wǎng)上還沒用發(fā)現(xiàn)有人對(duì)命名函數(shù)表達(dá)式進(jìn)去重復(fù)深入的討論,正因?yàn)槿绱耍W(wǎng)上出現(xiàn)了各種各樣的誤解,本文將從原理和實(shí)踐兩個(gè)方面來探討JavaScript關(guān)于命名函數(shù)表達(dá)式的優(yōu)缺點(diǎn)2012-01-01
新手學(xué)習(xí)前端之js模仿淘寶主頁網(wǎng)站
淘寶網(wǎng)大家在熟悉不過了,那么淘寶網(wǎng)首頁模板是怎么做的呢?今天小編抽時(shí)間給大家分享新手學(xué)習(xí)前端之js模仿淘寶主頁網(wǎng)站的相關(guān)資料,需要的朋友可以參考下2016-10-10
JS?解決Cannot?set?properties?of?undefined的問題
遇到這樣問題當(dāng)前的是當(dāng)前對(duì)象或者數(shù)組是undefined,但是卻用來引用屬性或者索引,遇到這樣的問題如何解決呢,下面通過本文給大家介紹JS?如何解決Cannot?set?properties?of?undefined,需要的朋友可以參考下2024-01-01
Avalonjs 實(shí)現(xiàn)簡單購物車功能(實(shí)例代碼)

