p5.js毕达哥拉斯树的实现代码

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

效果如下：

主要方法

translate()rotate()rect()push()pop()map()主要思想

递归的

素描

过程分解

1.毕达哥拉斯树的递归函数

函数毕达哥拉斯(x){ noStroke()；填充(107，142，35，映射(x，0，a，150，255))；//根据正方形的边长设置填充颜色rect(0，0，x，x)；//如果(x=3)返回0，则绘制当前正方形；//当正方形边长小于3时，结束递归/*在右上角画出正方形*/push()；旋转(/2-t)；//坐标轴顺时针旋转约37平移(0，-x/5 * 3-x/5 * 4)；//坐标轴上移3边4边毕达哥拉斯(x/5*4)的长度；//递归调用毕达哥拉斯函数pop()；/*画左上角的正方形*/push()；旋转(-t)；//坐标轴逆时针旋转约53deg translate(0，-x/5 * 3)；//坐标轴向上移动3边的长度毕达哥拉斯(x/5 * 3)；//递归调用毕达哥拉斯函数pop()；} 2.声明变量并创建画布

var a=100//最大平方边长var t；//4边对应的角度为function setup(){ t=53.1301024/360 * 2 * pi；//关于53deg创建画布(窗口宽度、窗口高度)；//创建画布背景(255)；no Loop()；//draw()函数只执行一次} 3。开始画毕达哥拉斯树

函数draw(){ translate(windowWidth/2，window height-a* 2)；//将坐标系翻译成画布中间底部的毕达哥拉斯(a)；//调用毕达哥拉斯递归函数}绘制毕达哥拉斯树的完整代码

var a=100var t；函数设置(){ t=53.1301024/360 * 2 * PI；createCanvas(windowWidth，window height)；背景(255)；no Loop()；}函数draw(){ translate(windowWidth/2，window height-a* 2)；毕达哥拉斯学派(一)；}函数毕达哥拉斯(x){ noStroke()；填充(107，142，35，映射(x，0，a，150，255))；rect(0，0，x，x)；如果(x=3)返回0；push()；旋转(/2-t)；translate(0，-x/5 * 3-x/5 * 4)；毕达哥拉斯(x/5 * 4)；pop()；push()；旋转(-t)；translate(0，-x/5 * 3)；毕达哥拉斯(x/5 * 3)；pop()；}以上就是本文的全部内容。希望对大家的学习有帮助，支持我们。