이 글은 주로 p5.js 피타고라스 트리의 구현 코드를 소개하고 있으니 참고하시기 바랍니다.
이 글에서는 p5.js 피타고라스 트리의 구현 코드를 소개하고 모두와 공유합니다. 자세한 내용은 다음과 같습니다.
효과는 다음과 같습니다.
주요 방법
translate( )
rotate()
Rect()
push()
pop()
map()
주요 아이디어
재귀
Sketch
프로세스 분해
1. 피타고라스 트리의 재귀 함수
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(); }
2. 변수 선언 그리고 캔버스를 만듭니다
var a = 100; //最大正方形边长 var t;//4边所对应的角度 function setup(){ t = 53.1301024 / 360 * 2 * PI;//约为53deg createCanvas(windowWidth, windowHeight);//创建画布 background(255); noLoop();//draw()函数只执行一次 }
Three , 피타고라스 나무 그리기 시작
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(); }
위 내용은 앞으로 모든 사람에게 도움이 되기를 바랍니다.
관련 기사:
바이너리 바이트 스트림 데이터를 보내고 받는 Ajax 방법
laypage 프론트 엔드 페이징 플러그인은 ajax 비동기 페이징을 구현합니다
위 내용은 p5.js 피타고라스 트리 구현 코드의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!