p5.js 畢達(dá)哥拉斯樹的實(shí)現(xiàn)代碼
本文介紹了p5.js 畢達(dá)哥拉斯樹的實(shí)現(xiàn)代碼,分享給大家,具體如下:
效果如下:
主要方法
- translate()
- rotate()
- rect()
- push()
- pop()
- map()
主要思想
遞歸
草圖
過(guò)程分解
一、畢達(dá)哥拉斯樹的遞歸函數(shù)
function Pythagorian(x){ noStroke(); fill(107, 142, 35,map(x, 0, a, 150, 255));//根據(jù)正方形邊長(zhǎng)設(shè)置填充色 rect(0,0,x,x);//繪制當(dāng)前的正方形 if(x <= 3) return 0;//當(dāng)正方形邊長(zhǎ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邊的長(zhǎng)度 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邊的長(zhǎng)度 Pythagorian(x/5*3);//遞歸調(diào)用畢達(dá)哥拉斯函數(shù) pop(); }
二、聲明變量、創(chuàng)建畫布
var a = 100; //最大正方形邊長(zhǎng) 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(); }
以上就是本文的全部?jī)?nèi)容,希望對(duì)大家的學(xué)習(xí)有所幫助,也希望大家多多支持腳本之家。
相關(guān)文章
JS使用ajax方法獲取指定url的head信息中指定字段值的方法
這篇文章主要介紹了JS使用ajax方法獲取指定url的head信息中指定字段值的方法,實(shí)例分析了Ajax操作URL中head信息的技巧,具有一定參考借鑒價(jià)值,需要的朋友可以參考下2015-03-03javascrpt密碼強(qiáng)度校驗(yàn)函數(shù)詳解
這篇文章主要為大家詳細(xì)介紹了javascrpt密碼強(qiáng)度校驗(yàn)函數(shù),文中示例代碼介紹的非常詳細(xì),具有一定的參考價(jià)值,感興趣的小伙伴們可以參考一下2020-03-03KnockoutJS 3.X API 第四章之表單value綁定
Knockout是一個(gè)以數(shù)據(jù)模型(data model)為基礎(chǔ)的能夠幫助你創(chuàng)建富文本,響應(yīng)顯示和編輯用戶界面的JavaScript類庫(kù)。這篇文章主要介紹了KnockoutJS 3.X API 第四章之表單value綁定的相關(guān)資料,需要的朋友可以參考下2016-10-10JS實(shí)現(xiàn)的按鈕點(diǎn)擊顏色切換功能示例
這篇文章主要介紹了JS實(shí)現(xiàn)的按鈕點(diǎn)擊顏色切換功能,涉及js鼠標(biāo)事件響應(yīng)及頁(yè)面元素屬性動(dòng)態(tài)操作相關(guān)實(shí)現(xiàn)技巧,需要的朋友可以參考下2017-10-10深入淺出JSON.parse的實(shí)現(xiàn)方法
眾所周知,JSON.parse方法用于將一個(gè)json字符串轉(zhuǎn)換成由字符串描述的?JavaScript?值或?qū)ο?本文主要為大家介紹了JSON.parse方法的使用,需要的可以參考下2024-04-04詳解JavaScript中的構(gòu)造器Constructor模式
構(gòu)造器Constructor不能被繼承,因此不能重寫Overriding,但可以被重載Overloading。通過(guò)本文給大家分享JavaScript中的構(gòu)造器Constructor模式,對(duì)構(gòu)造器constructor相關(guān)知識(shí)感興趣的朋友一起學(xué)習(xí)吧2016-01-01解決bootstrap導(dǎo)航欄navbar在IE8上存在缺陷的方法
這篇文章主要為大家詳細(xì)介紹了解決bootstrap導(dǎo)航欄navbar在IE8上存在缺陷的方法,需要的朋友可以參考下2016-07-07JavaScript動(dòng)態(tài)數(shù)量的文件上傳控件
本文給大家分享一段js代碼關(guān)于動(dòng)態(tài)數(shù)量的文件上傳控件,代碼簡(jiǎn)單易懂,非常不錯(cuò)具有參考借鑒價(jià)值,感興趣的朋友一起看看2016-11-11小程序掃描普通鏈接二維碼跳轉(zhuǎn)小程序指定界面方法
這篇文章主要介紹了小程序掃描普通鏈接二維碼跳轉(zhuǎn)小程序指定界面,文中通過(guò)示例代碼介紹的非常詳細(xì),對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值,需要的朋友們下面隨著小編來(lái)一起學(xué)習(xí)學(xué)習(xí)吧2019-05-05淺談javascript的url參數(shù)parse和build函數(shù)
下面小編就為大家?guī)?lái)一篇淺談javascript的url參數(shù)parse和build函數(shù)。小編覺得挺不錯(cuò)的,現(xiàn)在就分享給大家,也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧2017-03-03