首頁 > web前端 > js教程 > 畢達哥拉斯樹怎麼用JS實現

畢達哥拉斯樹怎麼用JS實現

php中世界最好的语言
發布: 2018-05-03 15:23:13
原創
2913 人瀏覽過

這次帶給大家畢達哥拉斯樹怎樣用JS實現,畢達哥拉斯樹用JS實現的注意事項有哪些,下面就是實戰案例,一起來看一下。

效果如下:

主要方法

  1. translate()

  2. rotate()

  3. rect()

  4. push()

  5. pop()

  6. map()

#主要想法

##遞迴

草圖

#程式分解

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

1

2

3

4

5

6

7

8

9

10

11

12

13

14

15

16

17

18

19

20

21

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(); 

  

}

登入後複製

#二、宣告變數、建立畫布

1

2

3

4

5

6

7

8

var a = 100; //最大正方形边长

var t;//4边所对应的角度

function setup(){

 t = 53.1301024 / 360 * 2 * PI;//约为53deg

 createCanvas(windowWidth, windowHeight);//创建画布

 background(255);

 noLoop();//draw()函数只执行一次

}

登入後複製




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

###

1

2

3

4

function draw(){

 translate(windowWidth/2, windowHeight - a * 2);//将坐标系平移至画布中间底部

 Pythagorian(a);//调用毕达哥拉斯递归函数

}

登入後複製
###繪製畢達哥拉斯樹完整程式碼###

1

2

3

4

5

6

7

8

9

10

11

12

13

14

15

16

17

18

19

20

21

22

23

24

25

26

27

28

29

30

31

32

33

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(); 

  

}

登入後複製
###相信看了本文案例你已經掌握了方法,更多精彩請關注php中文網其它相關文章! ######推薦閱讀:#########JS原始值與參考值有哪些儲存方式###############Vue如何將篩選器格式化###############Angular中第三方UI框架、控制項使用步驟詳解#########

以上是畢達哥拉斯樹怎麼用JS實現的詳細內容。更多資訊請關注PHP中文網其他相關文章!

相關標籤:
本網站聲明
本文內容由網友自願投稿,版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容,請聯絡admin@php.cn
最新問題
怎麼實作 JavaScript點與圓的位置關係
來自於 1970-01-01 08:00:00
0
0
0
JavaScript鉤子函數是什麼?
來自於 1970-01-01 08:00:00
0
0
0
c++ 呼叫javascript
來自於 1970-01-01 08:00:00
0
0
0
熱門教學
更多>
最新下載
更多>
網站特效
網站源碼
網站素材
前端模板