本文介绍了p5.js 毕达哥拉斯树的实现代码，分享给大家，具体如下：

效果如下：

主要方法

translate()

rotate()

rect()

push()

pop()

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

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持。