How do I draw a wireframe cube?

Processing Libraries
1

Hi, I’m working on a homework project, part of which requires me to draw a cube made out of triangles. I have drawn a frame and started to fill it in, so that each triangle is a different color. I’ve started writing the code, but I am not getting what I had expected:
<
import controlP5.*;
ControlP5 cp5;

float positionX = 15;
float positionY = 15;
float positionZ = 15;
float cameraBounds = 30;

void setup() {
size(1600, 1000, P3D);
stroke(255);
strokeWeight(2);

perspective(radians(50.0f), width/(float)height, 0.1, 1000);

cp5 = new ControlP5(this);
cp5.addSlider(“positionX”, -30, 30).setPosition(20, 30);
cp5.addSlider(“positionY”, -30, 30).setPosition(20, 50);
cp5.addSlider(“positionZ”, -30, 30).setPosition(20, 70);
}

void draw() {
background(200);
perspective(radians(60), (float)width/height, 0.1, 100);
camera(positionX, positionY, positionZ, 0, 0, 0, 0, 1, 0);

beginShape();
fill(255,0,0);
vertex(0, 0, 0);
vertex(0, 1, 0);
vertex(0, 1, 1);
vertex(0,0,0);
//end of first triangle
vertex(0, 0, 1);
vertex(0, 1, 1);
vertex(0, 0, 0);
vertex(0, 0, 1);
vertex(1, 0, 0);
vertex(0, 0, 0);
vertex(1, 0, 0);
vertex(0, 1, 0);
vertex(1, 1, 1);
vertex(1, 1, 0);
vertex(0, 1, 0);
vertex(1, 1, 1);
vertex(0, 1, 1);
vertex(0, 1, 0);
vertex(1, 1, 1);
vertex(0, 1, 1);
vertex(1, 0, 1);
vertex(1, 1, 1);
vertex(1, 0, 1);
vertex(1, 1, 0);
vertex(1, 0, 0);
vertex(1, 0, 1);
vertex(1, 1, 0);
vertex(1, 0, 0);
vertex(1, 0, 1);
vertex(0, 0, 1);
vertex(1, 0, 0);
vertex(1, 1, 0);
vertex(0, 1, 0);
vertex(0, 0, 1);
vertex(0, 1, 1);
vertex(1, 0, 1);
vertex(0,0,0);
endShape();

//Reset the perspective and camera matrices so Controlp5 will render correctly
perspective();
camera();
}/>
My first guess was that I was not closing the shape, but adding an extra vertex to just the first triangle didn’t seem to help. Now I am thinking that I have the vertexes out of order. I can try to rearrange them, but even so, this approach seems inneficient.
My question is 1) is there a better way to do this? Like a built in function, or code someone else has written? 2) If not, what mistake am I making with this code?

2

Hi

Format your code using preformatted text

Screenshot_2022-10-06-21-58-07-752
Screenshot_2022-10-06-21-58-07-752785×476 71.9 KB

1 Like
3

Hi @Umbrella,

As you need to get the cube faces as triangles, there is no build in function to do it for you.
Also the condition to get each of you triangles in a different color needs a special setup.

So first of all try to think more abstract what you need to do and how you could break down, resp. describe the cube at all…

  • A cube could be described by 6 squares
  • A square could be described by 4 corner points
  • 6 squares á 4 corner points = 24 corner points
  • The squares of a cube has common corner points as 3 squares of it shares a common point so in the end 24/3 = 8 points needs to be known.

That all leads to the fact that we only need to descibe 8 points and how to connect it to build the cube.
As we know that a square can also described by triangles we then only need to arange that connections that way.

here is an example which do it for the front and the back to demonstrate the above …

import peasy.*;

// description of the 8 cube points
float[][] cubepoints = new float[][] {
  {-1, -1, 1}, // top/left front
  { 1, -1, 1}, // top/right front
  { 1, 1, 1},  // bottom/right front
  {-1, 1, 1},  // bottom/left front

  {-1, -1, -1}, // top/left back
  { 1, -1, -1}, // top/right back
  { 1, 1, -1},  // bottom/right back
  {-1, 1, -1}   // bottom/left back
};

// index of the points above to get the triangles 
int[][] indices = new int[][] {
  {0, 1, 3},  // top/left front to top/right front to bottom/left front 
  {1, 2, 3},  // top/right front to bottom/left front to bottom/left front  
  {4, 5, 7},  // same for back 
  {5, 6, 7}
};

float cubescale = 50.; // scaling factor, resp. size of the cube 

color[] colors;
PeasyCam cam;
void setup() {
  size(500, 500, P3D);
  cam = new PeasyCam(this, 200); 

  // just give some colors. not neccassary for wireframe
  pushStyle();
  colorMode(HSB, indices.length, 100, 100);
  colors = new color[indices.length];
  for (int i=0; i<indices.length; i++) {
    colors[i] = color(i, 100, 100);
  }
  popStyle();
}

void draw() {
  background(0);     
  stroke(255);
  for (int i = 0; i < indices.length; i++) {
    if (mousePressed)
      fill(colors[i]);
    else 
      noFill();
    beginShape();
    for (int t=0; t<indices[i].length; t++) {
      int index = indices[i][t];
      vertex(cubepoints[index][0]*cubescale, 
             cubepoints[index][1]*cubescale, 
             cubepoints[index][2]*cubescale);
    }
    endShape(CLOSE);
  }
}

Cheers
— mnse

cube

EDIT: Apropos, you can describe a cube by one triangle strip but you would run into issues if you want to color each triangle a different unique color …

2 Likes
4

Thanks, I think I’ve got it now

1 Like