So implementieren Sie den Pythagoras-Baum mit JS-js-Tutorial-php.cn

So implementieren Sie den Pythagoras-Baum mit JS

php中世界最好的语言

Freigeben： 2018-05-03 15:23:13

Original

2786 Leute haben es durchsucht

Dieses Mal zeige ich Ihnen, wie Sie den Pythagoras-Baum mit JS implementieren. Welche Vorsichtsmaßnahmen gelten für die Implementierung des Pythagoras-Baums? Der Effekt ist wie folgt:

Hauptmethode

Hauptidee

Rekursion

Skizze

Prozessaufschlüsselung

1. Rekursive Funktion des Pythagoras-Baums 3. Beginnen Sie mit dem Zeichnen des Pythagoras-Baums

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

Nach dem Login kopieren

Vollständiger Code zum Zeichnen des Pythagoras-Baums
var a = 100; //最大正方形边长 var t;//4边所对应的角度 function setup(){ t = 53.1301024 / 360 * 2 * PI;//约为53deg createCanvas(windowWidth, windowHeight);//创建画布 background(255); noLoop();//draw()函数只执行一次 }
Nach dem Login kopieren
Ich glaube, Sie haben die Methode nach dem Lesen gemeistert Der Fall in diesem Artikel ist spannender. Bitte beachten Sie andere verwandte Artikel auf der chinesischen PHP-Website!

Empfohlene Lektüre:

So speichern Sie JS-Originalwerte und Referenzwerte

So formatieren Sie Filter in Vue

Detaillierte Erläuterung der Schritte zur Verwendung von UI-Frameworks und -Steuerelementen von Drittanbietern in Angular

Das obige ist der detaillierte Inhalt vonSo implementieren Sie den Pythagoras-Baum mit JS. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!