Code d'implémentation de l'arbre de Pythagore p5.js

Cet article présente principalement le code d'implémentation de l'arbre de Pythagore p5.js. Maintenant, je le partage avec vous et le donne comme référence.

Cet article présente le code d'implémentation de l'arbre de Pythagore p5.js et le partage avec tout le monde. Les détails sont les suivants :

L'effet est le suivant :

Méthode principale

1. translate()

2. rotate()

3. rect()

4. push()

5. pop()

6. map()

Idée principale

Récursion

Esquisse

Décomposition du processus

Fonction récursive de l'arbre de Pythagore

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. Déclarez les variables et créez un canevas

var a = 100; //最大正方形边长
var t;//4边所对应的角度
function setup(){
 t = 53.1301024 / 360 * 2 * PI;//约为53deg
 createCanvas(windowWidth, windowHeight);//创建画布
 background(255);
 noLoop();//draw()函数只执行一次
}

3. Commencez à dessiner l'arbre de Pythagore

function draw(){
 translate(windowWidth/2, windowHeight - a * 2);//将坐标系平移至画布中间底部
 Pythagorian(a);//调用毕达哥拉斯递归函数
}

Le code complet pour dessiner l'arbre de Pythagore

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

Ce qui précède est ce que j'ai compilé pour vous. J'espère que cela vous sera utile à l'avenir.

Articles connexes :

Le téléchargement de fichiers Ajax résout avec succès les problèmes de compatibilité du navigateur

Méthode Ajax pour envoyer et recevoir des données de flux d'octets binaires

Le plug-in de pagination frontale Laypage implémente la pagination asynchrone ajax

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!