美文网首页程序员p5.js作品集Web前端之路
p5.js作品集(5):毕达哥拉斯树

p5.js作品集(5):毕达哥拉斯树

作者: SampleTape | 来源:发表于2017-12-19 09:37 被阅读417次
    Pythagorian Tree.png

    作品链接

    https://codepen.io/SampleTape/full/MrKrxG/

    主要方法

    • translate()
    • rotate()
    • rect()
    • push()
    • pop()
    • map()

    主要思想

    • 递归

    草图

    草图.png

    过程分解

    一、毕达哥拉斯树的递归函数

    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作品集(5):毕达哥拉斯树

        本文链接:https://www.haomeiwen.com/subject/akzvwxtx.html