首頁 > web前端 > js教程 > 主體

p5.j​​s 畢達哥拉斯樹的實作程式碼

亚连
發布: 2018-05-26 15:47:51
原創
1565 人瀏覽過

這篇文章主要介紹了p5.js 畢達哥拉斯樹的實現程式碼,現在分享給大家,也給大家做個參考。

本文介紹了p5.js 畢達哥拉斯樹的實作程式碼,分享給大家,具體如下:

##效果如下:

#主要方法

  1. translate()

  2. rotate()

  3. rect()

  4. push()

  5. #pop()

  6. # #map()
主要想法

遞迴


##草圖

過程分解

#一、畢達哥拉斯樹的遞迴函數

function Pythagorian(x){
 noStroke();
 fill(107, 142, 35,map(x, 0, a, 150, 255));//根据正方形边长设置填充色
 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);//递归调用毕达哥拉斯函数
 pop();
 
 /* 绘制左上角的正方形 */
 push();
 rotate( - t);//坐标轴逆时针旋转约53deg
 translate(0,-x/5 * 3);//坐标轴向上平移3边的长度
 Pythagorian(x/5*3);//递归调用毕达哥拉斯函数
 pop(); 
 
}
登入後複製

二、宣告變數、建立畫布

var a = 100; //最大正方形边长
var t;//4边所对应的角度
function setup(){
 t = 53.1301024 / 360 * 2 * PI;//约为53deg
 createCanvas(windowWidth, windowHeight);//创建画布
 background(255);
 noLoop();//draw()函数只执行一次
}
登入後複製

三、開始繪製畢達哥拉斯樹

function draw(){
 translate(windowWidth/2, windowHeight - a * 2);//将坐标系平移至画布中间底部
 Pythagorian(a);//调用毕达哥拉斯递归函数
}
登入後複製

#繪製畢達哥拉斯樹完整程式碼

#

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(); 
 
}
登入後複製

上面是我整理給大家的,希望今後對大家有幫助。

相關文章:

ajax檔案上傳成功解決瀏覽器相容問題

#Ajax傳送和接收二進位位元組流資料的方法


laypage前端分頁外掛實現ajax非同步分頁



#

以上是p5.j​​s 畢達哥拉斯樹的實作程式碼的詳細內容。更多資訊請關注PHP中文網其他相關文章!

相關標籤:
來源:php.cn
本網站聲明
本文內容由網友自願投稿,版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容,請聯絡admin@php.cn
最新問題
熱門教學
更多>
最新下載
更多>
網站特效
網站源碼
網站素材
前端模板
關於我們 免責聲明 Sitemap
PHP中文網:公益線上PHP培訓,幫助PHP學習者快速成長!