Wie mache ich eine 3D-Tabelle mit Processing.JS?

Question

Ich möchte eine for-Schleife ausführen, die eine Linie mit einer Farbe von braun haben wird. Diese Linie wird kleiner und kleiner, aber nicht zu klein.

wird das endgültige Bild so aussehen, aber mit der Tischplatte in braun gefärbt ist:

//Back wall 
fill(102, 102, 102); 
rect(50,50,300,300); 
//Top Left Corner 
line(50,50,0,0); 
//Top Right Corner 
line(350,50,400,0); 
//Bottom Left Corner 
line(350,350,400,400); 
//Bottom Riight Corner 
line(50,350,0,400); 

//Table 
//Top Left 
fill(48, 17, 0); 
rect(163,312,3,38); 
//Top Right 
fill(48, 17, 0); 
rect(230,312,3,38); 
//Mesa 
fill(48, 17, 0); 
rect(126,322,142,5); 
//Right Side 
line(126,322,168,312); 
//Top Side 
line(234,312,168,312); 
//Right Side 
line(269,322,232,312); 
//Bottom Left Leg 
rect(126,327,5,41); 
line(126,368,126,322); 
//Bottom Right Leg 
rect(263,327,5,41); 
line(269,368,268,322); 

habe ich versucht, diese für Schleife:

verringert

for(var x = 200; x > 100; x--){ 

stroke(61, 34, 0); 
line(x,200,x,200); 

} 

Der x-Wert bis x = 100. Aber es zeigt nicht, dass die Linie immer kleiner wird, nachdem der Hintergrund sichergestellt wurde(); ist außerhalb der Schleife.

P.S. Die Teile des Codes sind getrennt.

Answer 1

Sie ändern nur die x Koordinate der Linien, die Sie zeichnen, also bewegt sich die Linie horizontal, nicht vertikal.

Wenn Sie möchten, dass die Linie vertikal (um in der Tabelle zu färben) und horizontal (um sie kleiner zu machen, wenn sie "weiter entfernt" wird), müssen Sie sowohl die Werte x als auch y ändern die line() Funktion.

Aber Sie machen das schwieriger, als es sein muss. Es gibt keinen Grund für Sie, eine Reihe von Linien zu zeichnen, um diese Form zu erhalten. Verwenden Sie einfach die beginShape() Funktion, um das Polygon direkt zu zeichnen. Etwas wie folgt aus:

beginShape(); 
    vertex(100, 100); //upper-left 
    vertex(200, 100); //upper-right 
    vertex(250, 200); //lower-right 
    vertex(50, 200); //lower=left 
    endShape(CLOSE); 

Beachten Sie, dass dies nur ein Beispiel ist, und Sie werden mit den Werten herumspielen müssen, um sie an der richtigen Stelle zu ziehen. Aber der Punkt ist, dass Sie keine for-Schleife verwenden müssen, um Linien zu zeichnen, nur um ein Polygon zu zeichnen.

Da Sie versuchen, eine 3D-Szene zu zeichnen, sollten Sie auch beachten, dass Sie einfach 3D-Koordinaten zusammen mit der vertex()-Funktion verwenden können, um in 3D zu zeichnen. Kein Grund zu versuchen, die Perspektive selbst zu erzwingen.