> 웹 프론트엔드 > JS 튜토리얼 > p5.js는 피타고라스 트리를 구현합니다(코드 포함).

p5.js는 피타고라스 트리를 구현합니다(코드 포함).

php中世界最好的语言
풀어 주다: 2018-05-09 09:45:24
원래의
2115명이 탐색했습니다.

이번에는 p5.js로 피타고라스 트리를 구현하는 방법(코드 포함)을 알려드리겠습니다. p5.js로 피타고라스 트리를 구현할 때 주의사항은 무엇인가요? 다음은 실제 사례입니다.

효과는 다음과 같습니다:

주요 방법

  1. translate()

  2. rotate()

  3. Rect()

  4. push ()

  5. 팝 ()

  6. map()

주요 아이디어

Recursion

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()函数只执行一次
}
로그인 후 복사

3. 피타고라스 트리 그리기 시작

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(); 
 
}
로그인 후 복사

에서 사례를 읽으신 후 마스터하셨을 것입니다. 이 기사 더 흥미로운 방법을 알고 싶다면 PHP 중국어 웹사이트의 다른 관련 기사를 주목해 보세요!

추천 자료:

JS는 정규 표현식을 사용하여 생년월일을 결정합니다

JS는 원래 값과 참조 값을 어떻게 저장합니까

위 내용은 p5.js는 피타고라스 트리를 구현합니다(코드 포함).의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!

관련 라벨:
원천:php.cn
본 웹사이트의 성명
본 글의 내용은 네티즌들의 자발적인 기여로 작성되었으며, 저작권은 원저작자에게 있습니다. 본 사이트는 이에 상응하는 법적 책임을 지지 않습니다. 표절이나 침해가 의심되는 콘텐츠를 발견한 경우 admin@php.cn으로 문의하세요.
인기 튜토리얼
더>
최신 다운로드
더>
웹 효과
웹사이트 소스 코드
웹사이트 자료
프론트엔드 템플릿