How to layer 3d objects in p5.js using WEBGL

Viewed 53

I have 2 3D objects, a torus and a cylinder. I want the cylinder to go on top of the torus, rather than below.

function setup() {
  createCanvas(400, 400, WEBGL);
}

function draw() {
  angleMode(DEGREES)
  background(220);
  noStroke();
  rotateX(30)
  // The torus
  // The color(Torus)
  fill(241, 177, 102);
  // Drawing the Torus
  torus(100, 40);
  // The Cylinder
  // The color
  fill(138, 78, 27);
  // Drawing the cylinder
  push();
  rotateX(90);
  cylinder(130, 10);
  pop();
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/p5.js/1.4.1/p5.js"></script>

In this drawing, the cylinder will appear more obvious, since it's on its side this time rather than laying flat as if it's a circle. This is simply to make it easier to see and understand what I mean.

function setup() {
  createCanvas(400, 400, WEBGL);
}

function draw() {
  angleMode(DEGREES)
  background(220);
  noStroke();
  // rotateX(30)
  // The torus
  // The color(Torus)
  fill(241, 177, 102);
  // Drawing the Torus
  torus(100, 40);
  // The Cylinder
  // The color
  fill(138, 78, 27);
  // Drawing the cylinder
  // push();
  // rotateX(90);
  cylinder(130, 10);
  // pop();
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/p5.js/1.4.1/p5.js"></script>

So far, I have tried to rotate the cylinder on the Z axis, but that did not work, and I also tried drawing the cylinder before the torus, but that also did not work.

0 Answers
Related