毕达哥拉斯树
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();
}
相关阅读
作品集对于一个设计师来说很重要，不管是新手设计师还是资深设计师，不管你是找工作还是准备换工作。我们首先要明确的是，作品集最能够
提到作品包装最常见的分为平台型作品包装和作品集包装，我们今天一起探讨的是作品集包装思路。随着用人单位对设计师的要求逐渐变高
只有准备好自己的作品集，才能找得到工作，以后才能吃得起盖浇饭。作品集的重要性上学的时候小褚讲过一个栗子，某学长把自己的作品集打
原文地址为：最新30个漂亮的个人作品集网页设计案例作品集网页可设计成多种形式，特别是有关设计，摄影和其他创造性的职业。 这是在以
注：在网页设计这个事情上，大的趋势总会在很长的一个时间尺度上发挥作用，就像极简的设计风格，似乎还没有一个其他的设计趋势或者风格能