这次给大家带来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 <p style="text-align: left;"><strong>二、声明变量、创建画布</strong></p><pre class="brush:php;toolbar:false">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 <p>相信看了本文案例你已经掌握了方法，更多精彩请关注本站其它相关文章！</p><p>推荐阅读：</p><p style="text-align: left;"><a href="http://www.php.cn/js-tutorial-395743.html" target="_blank">JS用正则判断出生日期</a><br></p><p style="text-align: left;"><a href="http://www.php.cn/js-tutorial-395746.html" target="_blank">JS怎么储存原始值与引用值</a><br></p>