这次给大家带来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 <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>相信看了本文案例你已经掌握了方法,更多精彩请关注php中文网其它相关文章!</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>
以上就是p5.js实现毕达哥拉斯树(附代码)的详细内容,更多请关注php中文网其它相关文章!
Copyright 2014-2024 https://www.php.cn/ All Rights Reserved | php.cn | 湘ICP备2023035733号