p5.js 毕达哥拉斯树的实现代码
程序员文章站
2023-12-28 18:06:10
...
这篇文章主要介绍了p5.js 毕达哥拉斯树的实现代码,现在分享给大家,也给大家做个参考。
本文介绍了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(); }
上面是我整理给大家的,希望今后会对大家有帮助。
相关文章:
以上就是p5.js 毕达哥拉斯树的实现代码的详细内容,更多请关注其它相关文章!
推荐阅读
-
p5.js 毕达哥拉斯树的实现代码
-
PHP排序之二维数组的按照字母排序实现代码
-
PHP实现301重定向并通知搜索引擎的代码_PHP教程
-
php curl批量打开网址(curl_multi类)的实现代码
-
php同时使用session和cookie来保存用户登录信息的实现代码,sessioncookie_PHP教程
-
PHP调用Twitter的RSS的实现代码_PHP教程
-
使用ThinkPHP自带的Http类下载远程图片到本地的实现代码
-
ajax完美实现两个网页 分页功能的实例代码_php实例
-
javascript - 最小代码实现WIKI的内链接
-
PHP通过正则表达式下载图片到本地的实现代码_PHP