2

I'm working on processing for a project related to my studies. I want to make 3d boxes with specific textures, so far I created a box with different textures on it. I also want to display them in a grid by using an array so the code is below and can't figure out how to convert it to an array

ps. as image i just simply created 6 different color box to check how it works. 

Cube myCube;
int x;
void setup(){
size(800,800,P3D);
myCube = new Cube();

}

void draw(){

myCube.display();

}



class Cube{
 PImage tex, tex1, tex2, tex3, tex4, tex5; 

void display(){
  background(0);
  noStroke();
  translate(100+x,100+x, 0);
  rotateY(map(mouseX, 0, width, 0, PI));
  rotateX(map(mouseY, 0, height, 0, PI));
  scale(50);
  tex = loadImage("image0.jpg");
  tex1 = loadImage("image1.jpg");
  tex2 = loadImage("image2.jpg");
  tex3 = loadImage("image3.jpg");
  tex4 = loadImage("image4.jpg");
  tex5 = loadImage("image5.jpg");
  textureMode(NORMAL);

beginShape(QUADS);
  texture(tex);

  // +Z "front" face
  vertex(-1, -1, 1, 0, 0);
  vertex( 1, -1, 1, 1, 0);
  vertex( 1, 1, 1, 1, 1);
  vertex(-1, 1, 1, 0, 1);
  endShape();
  beginShape(QUADS);
  // -Z "back" face
  texture(tex1);
  vertex( 1, -1, -1, 0, 0);
  vertex(-1, -1, -1, 1, 0);
  vertex(-1, 1, -1, 1, 1);
  vertex( 1, 1, -1, 0, 1);

  endShape();
  beginShape(QUADS);
  // +Y "bottom" face
  texture(tex2);
  vertex(-1, 1, 1, 0, 0);
  vertex( 1, 1, 1, 1, 0);
  vertex( 1, 1, -1, 1, 1);
  vertex(-1, 1, -1, 0, 1);

  endShape();
  beginShape(QUADS);
  // -Y "top" face
  texture(tex3);
  vertex(-1, -1, -1, 0, 0);
  vertex( 1, -1, -1, 1, 0);
  vertex( 1, -1, 1, 1, 1);
  vertex(-1, -1, 1, 0, 1);

  endShape();
  beginShape(QUADS);
  // +X "right" face
  texture(tex4);
  vertex( 1, -1, 1, 0, 0);
  vertex( 1, -1, -1, 1, 0);
  vertex( 1, 1, -1, 1, 1);
  vertex( 1, 1, 1, 0, 1);

  endShape();
  beginShape(QUADS);
  // -X "left" face
  texture(tex5);
  vertex(-1, -1, -1, 0, 0);
  vertex(-1, -1, 1, 1, 0);
  vertex(-1, 1, 1, 1, 1);
  vertex(-1, 1, -1, 0, 1);
  endShape();

}
}

Here is the code after Kevin's help.

ArrayList<Cube> myCubes = new ArrayList<Cube>();

void setup(){
   size(800,800,P3D);
   frameRate(60);
   for(int i = 0; i < 10; i++){
      myCubes.add(new Cube());
   }
}

void draw(){
   for(Cube myCube : myCubes){
      myCube.display();
   }
}

class Cube{
   PImage tex, tex1, tex2, tex3, tex4, tex5;
   float x;
   float y;
   float scale;

public Cube(){
  this.x = random(width);
  this.y = random(height);
  this. scale = random(10, 50);
}

void display(){
  background(0);
  noStroke();
  pushMatrix();
  background(0);
  noStroke();
  translate(x,y, 0);
  rotateY(map(mouseX, 0, width, 0, PI));
  rotateX(map(mouseY, 0, height, 0, PI));
  scale(scale);
  tex = loadImage("image0.jpg");
  tex1 = loadImage("image1.jpg");
  tex2 = loadImage("image2.jpg");
  tex3 = loadImage("image3.jpg");
  tex4 = loadImage("image4.jpg");
  tex5 = loadImage("image5.jpg");
  textureMode(NORMAL);

beginShape(QUADS);
  texture(tex);

  // +Z "front" face
  vertex(-1, -1, 1, 0, 0);
  vertex( 1, -1, 1, 1, 0);
  vertex( 1, 1, 1, 1, 1);
  vertex(-1, 1, 1, 0, 1);
  endShape();
  beginShape(QUADS);
  // -Z "back" face
  texture(tex1);
  vertex( 1, -1, -1, 0, 0);
  vertex(-1, -1, -1, 1, 0);
  vertex(-1, 1, -1, 1, 1);
  vertex( 1, 1, -1, 0, 1);

  endShape();
  beginShape(QUADS);
  // +Y "bottom" face
  texture(tex2);
  vertex(-1, 1, 1, 0, 0);
  vertex( 1, 1, 1, 1, 0);
  vertex( 1, 1, -1, 1, 1);
  vertex(-1, 1, -1, 0, 1);

  endShape();
  beginShape(QUADS);
  // -Y "top" face
  texture(tex3);
  vertex(-1, -1, -1, 0, 0);
  vertex( 1, -1, -1, 1, 0);
  vertex( 1, -1, 1, 1, 1);
  vertex(-1, -1, 1, 0, 1);

  endShape();
  beginShape(QUADS);
  // +X "right" face
  texture(tex4);
  vertex( 1, -1, 1, 0, 0);
  vertex( 1, -1, -1, 1, 0);
  vertex( 1, 1, -1, 1, 1);
  vertex( 1, 1, 1, 0, 1);

  endShape();
  beginShape(QUADS);
  // -X "left" face
  texture(tex5);
  vertex(-1, -1, -1, 0, 0);
  vertex(-1, -1, 1, 1, 0);
  vertex(-1, 1, 1, 1, 1);
  vertex(-1, 1, -1, 0, 1);
  endShape();
  popMatrix();




}
}
Improve this question

1 Answer 1

Reset to default
1

First, you have to make it so each instance of your Cube class will display at a different location, otherwise you won't be able to tell if you have multiple Cubes anyway. Something like this:

class Cube{
   PImage tex, tex1, tex2, tex3, tex4, tex5;
   float x;
   float y;
   float scale;

public Cube(){
   this.x = random(width);
   this.y = random(height);
   this. scale = random(10, 50);
}

void display(){
  pushMatrix();
  noStroke();
  translate(x,y, 0);
  rotateY(map(mouseX, 0, width, 0, PI));
  rotateX(map(mouseY, 0, height, 0, PI));
  scale(scale);
  //rest of your code
  popMatrix();

Notice I've added calls to pushMatrix() and popMatrix() so your translations and rotations don't stack.

Then you can easily use an array instead of a single instance:

Cube[] myCubes = new Cube[10];

void setup(){
   size(800,800,P3D);
   for(int i = 0; i < myCubes.length; i++){
      myCubes[i] = new Cube();
   }
}

void draw(){
   backgrond(0);
   for(Cube myCube : myCubes){
      myCube.display();
   }
}

You could also use an ArrayList:

ArrayList<Cube> myCubes = new ArrayList<Cube>();

void setup(){
   size(800,800,P3D);
   for(int i = 0; i < 10; i++){
      myCubes.add(new Cube());
   }
}

void draw(){
   for(Cube myCube : myCubes){
      myCube.display();
   }
}

Edit: After you updated the code, you could only see one Cube because you're redrawing the background for every Cube, so you end up painting over previous Cubes. Move that to the beginning of the draw() function. Also, you're loading the texture files every single time you draw a Cube, which is causing your slowness. Move that to the Cube constructor. Putting it all together:

ArrayList<Cube> myCubes = new ArrayList<Cube>();

void setup() {
  size(800, 800, P3D);
  frameRate(60);
  for (int i = 0; i < 10; i++) {
    myCubes.add(new Cube());
  }
}

void draw() {
  background(0);
  for (Cube myCube : myCubes) {
    myCube.display();
  }
}

class Cube {
  PImage tex, tex1, tex2, tex3, tex4, tex5;
  float x;
  float y;
  float scale;

  public Cube() {
    this.x = random(width);
    this.y = random(height);
    this. scale = random(10, 50);

    tex = loadImage("image0.jpg");
    tex1 = loadImage("image1.jpg");
    tex2 = loadImage("image2.jpg");
    tex3 = loadImage("image3.jpg");
    tex4 = loadImage("image4.jpg");
    tex5 = loadImage("image5.jpg");
  }

  void display() {

    noStroke();
    pushMatrix();
    noStroke();
    translate(x, y, 0);
    rotateY(map(mouseX, 0, width, 0, PI));
    rotateX(map(mouseY, 0, height, 0, PI));
    scale(scale);

    textureMode(NORMAL);

    beginShape(QUADS);
    texture(tex);

    // +Z "front" face
    vertex(-1, -1, 1, 0, 0);
    vertex( 1, -1, 1, 1, 0);
    vertex( 1, 1, 1, 1, 1);
    vertex(-1, 1, 1, 0, 1);
    endShape();
    beginShape(QUADS);
    // -Z "back" face
    texture(tex1);
    vertex( 1, -1, -1, 0, 0);
    vertex(-1, -1, -1, 1, 0);
    vertex(-1, 1, -1, 1, 1);
    vertex( 1, 1, -1, 0, 1);

    endShape();
    beginShape(QUADS);
    // +Y "bottom" face
    texture(tex2);
    vertex(-1, 1, 1, 0, 0);
    vertex( 1, 1, 1, 1, 0);
    vertex( 1, 1, -1, 1, 1);
    vertex(-1, 1, -1, 0, 1);

    endShape();
    beginShape(QUADS);
    // -Y "top" face
    texture(tex3);
    vertex(-1, -1, -1, 0, 0);
    vertex( 1, -1, -1, 1, 0);
    vertex( 1, -1, 1, 1, 1);
    vertex(-1, -1, 1, 0, 1);

    endShape();
    beginShape(QUADS);
    // +X "right" face
    texture(tex4);
    vertex( 1, -1, 1, 0, 0);
    vertex( 1, -1, -1, 1, 0);
    vertex( 1, 1, -1, 1, 1);
    vertex( 1, 1, 1, 0, 1);

    endShape();
    beginShape(QUADS);
    // -X "left" face
    texture(tex5);
    vertex(-1, -1, -1, 0, 0);
    vertex(-1, -1, 1, 1, 0);
    vertex(-1, 1, 1, 1, 1);
    vertex(-1, 1, -1, 0, 1);
    endShape();
    popMatrix();
  }
}
Improve this answer
Sign up to request clarification or add additional context in comments.

7 Comments

I don't know if did everything you wrote correct because I still have single Cube with a random position and scale. Also a lot of lagging. what I really want is something like this. <dropbox.com/s/86vyh9nqj64kkgi/saved.jpg?dl=0> I've done it by using Box function but couldnt make it here.
@PoYo Please post your updated code. You can either edit your question or post a new one.
Done :) and thanks a lot for taking your time and trying to help me.
@PoYo No problem. I've edited my answer to include your other issues.
thank you a lot, again :) I have only one question left :). The positioning, again here Items are randomly placed. But I want them to be placed evenly like this <dropbox.com/s/o4uqt074bx8mjo9/saved.png?dl=0>
|

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.