当前位置:首页 > IT技术

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

时间:2019-08-20 06:13:20来源:IT技术作者:seo实验室小编阅读:89次「手机版」
 

毕达哥拉斯树

9469540-24ccd21d962d37b5.png

Pythagorian Tree.png

作品链接

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

主要方法

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

主要思想

  • 递归

草图

9469540-35e60a6baa754686.png

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

相关阅读

五个技巧,告诉你该如何准备作品集

作品集对于一个设计师来说很重要,不管是新手设计师还是资深设计师,不管你是找工作还是准备换工作。我们首先要明确的是,作品集最能够

设计作品集的12个技巧:你需要一份更加专业的作品集

提到作品包装最常见的分为平台型作品包装和作品集包装,我们今天一起探讨的是作品集包装思路。随着用人单位对设计师的要求逐渐变高

靠着这份作品集,你终于能和HR谈薪水了

只有准备好自己的作品集,才能找得到工作,以后才能吃得起盖浇饭。作品集的重要性上学的时候小褚讲过一个栗子,某学长把自己的作品集打

最新30个漂亮的个人作品集网页设计案例

原文地址为:最新30个漂亮的个人作品集网页设计案例作品集网页可设计成多种形式,特别是有关设计,摄影和其他创造性的职业。 这是在以

极简网站怎么设计?这20个设计师作品集网站给你灵感

注:在网页设计这个事情上,大的趋势总会在很长的一个时间尺度上发挥作用,就像极简的设计风格,似乎还没有一个其他的设计趋势或者风格能

分享到:

栏目导航

推荐阅读

热门阅读