How to make Grid out of Boxes (3D)

@ Chrisir

hi

how are you

int unit = 90; 
int count; 
Module[] mods;
 
void setup() { 
  size(600, 660, OPENGL); 
  noStroke(); 
  int wideCount = width / unit; 
  int highCount = height / unit; 
  int depthCount = highCount;
  count = wideCount * highCount * depthCount; 
  mods = new Module[count];
 
  int index = 0; 
  for (int z = 0; z < depthCount; z++) {
    for (int y = 0; y < highCount; y++) { 
      for (int x = 0; x < wideCount; x++) { 
        if (z==0||y==0||x==0||
          z==depthCount-1||y==highCount-1||x==wideCount-1)
          mods[index++] = new Module(x*unit+200, y*unit+600, z*unit-800, true);
        else
          mods[index++] = new Module(x*unit+200, y*unit+600, z*unit-800, false);
      }
    }
  }
}
 
void draw() { 
  background(0); 
  //ortho();
  rotateY (.4);
  for (int i = 0; i < count; i++) { 
    mods[i].draw();
  }
}
 
class Module { 
  int xOffset; 
  int yOffset; 
  int zOffset; 
  float x, y;
  color col = color(random(255), random(255), random(255));
  boolean exist = false; 
 
  // Contructor 
  Module(int xOffsetTemp, int yOffsetTemp, int zOffset, boolean existTemp) { 
    xOffset = xOffsetTemp; 
    yOffset = yOffsetTemp;
    this.zOffset = zOffset;
    exist = existTemp;
  }
 
  // Custom method for drawing the object 
  void draw() { 
    if (exist) {
      noFill(); 
      stroke(255); 
      strokeWeight(0.3); 
      pushMatrix();
      fill(col);
      translate(xOffset, yOffset, zOffset);
      box(unit);
      popMatrix();
    }
  }
}

this is your sketch if you kind i want to make grid of boxes instead of rects and what i need is control boxes numbers in each raw and column and the sizes of the box like this sketch which is yours also

// GRID array of a class

int grid=5, // how many cells per row and column
  many=grid*grid;    // how many in total 

Button [] myButtons = new Button [many];

void setup() {
  size (600, 600);

  int x=40, y=x, // dist from screen border 
    w=100, h=w, // width and height of one cell 
    off=5;  // dist between cells 

  int k=0; 
  for (int i = 0; i < grid; i++) {
    for (int i2 = 0; i2 < grid; i2++) {
      myButtons [k] = new Button ( x+ i *( w+off), y+ i2 *(h+off), 
        w, h, 
        int(random(255)), 
        25 ); // 25 = size
      k++;
    }
  }
}

void draw() {
  background (255);
  for (int i = 0; i < many; i++) 
    myButtons[i].display();
}




i just want grid with boxes with out mouse or color stuff

boxes with raw and column not cubic grid

if you kind help if you can thanks in advance

I don’t know if I understood you correctly but here is my Sketch

Otherwise please ask

Cube[] cubes;

void setup() { 
  size(1600, 860, P3D);

  int unit = 90; 
  int count; 

  int rows = 10; 
  int columns = 8;

  count =  rows * columns;  // wideCount * highCount * depthCount; 
  cubes = new Cube[count];

  // setting up the grid 
  int index = 0; 
  for (int z = 0; z < rows; z++) {
    //for (int y = 0; y < highCount; y++) { 
    for (int x = 0; x < columns; x++) { 
      cubes[index++] = new Cube(x*unit+200, height/2+280, z*unit-800, true);
    }
    //  }
  }
}

void draw() { 
  background(0); 
  // lights();

  for (int i = 0; i < cubes.length; i++) { 
    cubes[i].display();
  }
}

// ==============================================================================================================

class Cube { 
  int posX; 
  int posY; 
  int posZ; 

  color col = color(255, 0, 0); // color(random(255), random(255), random(255));
  boolean exist = false; 

  float sizeCube = 90;

  // Contructor 
  Cube(int xOffsetTemp, int yOffsetTemp, int zOffsetTemp, boolean existTemp) { 
    posX = xOffsetTemp; 
    posY = yOffsetTemp;
    posZ = zOffsetTemp;
    exist = existTemp;
  }// Contructor 

  // Custom method for drawing the object 
  void display() { 
    if (exist) {
      stroke(0); 
      fill(col);
      pushMatrix();
      translate(posX, posY, posZ);
      box(sizeCube);
      popMatrix();
    }//if
  }//method
  //
} //class
//

1 Like

Chrisir

hi and thank you

almost yes this what i want but i need extra modifications first how to Increase and decrease the Z axes ?? the Z of the boxes i mean

and the other thing i want to rotate it " the grid "

i still have some questions but after those steps
thanks for you

X is left / right
Y how high (to the top of the screen)
Z is depth, how near or far away INTO the screen

rotating is either around x-axis, y-axis or z-axis

we need to place the cubes around 0,0 to make rotation really work.

Cube[] cubes;

float angle1; 

void setup() { 
  size(1600, 860, P3D);

  int unit = 90; 
  int count; 

  int rows = 10; 
  int columns = 8;

  count =  rows * columns;  // wideCount * highCount * depthCount; 
  cubes = new Cube[count];

  // setting up the grid 
  int index = 0; 
  for (int z = 0; z < rows; z++) {
    //for (int y = 0; y < highCount; y++) { 
    for (int x = 0; x < columns; x++) { 
      cubes[index++] = new Cube(
        x*unit-(4*unit), // X
        0, // Y 
        z*unit-800, // Z  
        true);                         // visible
    }
    //  }
  }
}

void draw() { 
  background(0); 
  // lights();

  translate (width/2, height/2+190, 0); 
  rotateZ(angle1); 
  angle1+=0.004; 
  for (int i = 0; i < cubes.length; i++) { 
    cubes[i].display();
  }
}

// ==============================================================================================================

class Cube { 
  int posX; 
  int posY; 
  int posZ; 

  color col = color(255, 0, 0); // color(random(255), random(255), random(255));
  boolean exist = false; 

  float sizeCube = 90;

  // Contructor 
  Cube(int xOffsetTemp, int yOffsetTemp, int zOffsetTemp, boolean existTemp) { 
    posX = xOffsetTemp; 
    posY = yOffsetTemp;
    posZ = zOffsetTemp;
    exist = existTemp;
  }// Contructor 

  // Custom method for drawing the object 
  void display() { 
    if (exist) {
      stroke(0); 
      fill(col);
      pushMatrix();
      translate(posX, posY, posZ);
      box(sizeCube);
      popMatrix();
    }//if
  }//method
  //
} //class
//

1 Like

hi
i add mouse rotation but not rotate x y z in center

Cube[] cubes;

void setup() { 
  size(800, 860, P3D);

  int unit = 140; 
  int count; 

  int rows = 3; 
  int columns = 6;

  count =  rows * columns;  // wideCount * highCount * depthCount; 
  cubes = new Cube[count];

  // setting up the grid 
  int index = 0; 
  for (int z = 0; z < rows; z++) {
    //for (int y = 0; y < highCount; y++) { 
    for (int x = 0; x < columns; x++) { 
      cubes[index++] = new Cube(x*unit+200, height/2+280, z*unit-800, true);
    }
    //  }
  }
}

void draw() { 
  background(0,88,122); 
  // lights();
translate(width/2, height/2);
 
rotateY(map(mouseX, 0, width, -PI, PI));
rotateX(-map(mouseY, 0, height, -PI, PI));
 
 
  
  for (int i = 0; i < cubes.length; i++) { 
    cubes[i].display();
  }
}

// ==============================================================================================================

class Cube { 
  int posX; 
  int posY; 
  int posZ; 

 // color col = color(255, 0, 0); // color(random(255), random(255), random(255));
  boolean exist = false; 

  float sizeCube = 140;

  // Contructor 
  Cube(int xOffsetTemp, int yOffsetTemp, int zOffsetTemp, boolean existTemp) { 
    posX = xOffsetTemp; 
    posY = yOffsetTemp;
    posZ = zOffsetTemp;
    exist = existTemp;
  }// Contructor 

  // Custom method for drawing the object 
  void display() { 
    if (exist) {
     // stroke(0); 
   noFill();
      pushMatrix();
      translate(posX, posY, posZ);
      box(sizeCube);
      popMatrix();
    }//if
  }//method
  //
} //class
//

what i mean is to increase the z of box

box(size) box(w, h, d)

Increase and decrease d

heightCube is your d



Cube[] cubes;

float angle1; 

void setup() { 
  size(1600, 860, P3D);

  int unit = 90; 
  int count; 

  int rows = 10; 
  int columns = 8;

  count =  rows * columns;  // wideCount * highCount * depthCount; 
  cubes = new Cube[count];

  // setting up the grid 
  int index = 0; 
  for (int z = 0; z < rows; z++) {
    //for (int y = 0; y < highCount; y++) { 
    for (int x = 0; x < columns; x++) { 
      cubes[index++] = new Cube(
        x*unit-(4*unit), // X
        0, // Y 
        z*unit-800, // Z  
        true);                         // visible
    }
    //  }
  }
}

void draw() { 
  background(0); 
  // lights();

  translate (width/2, height/2+190, 0);
  rotateX(-0.4); 
  rotateZ(angle1); 
  angle1+=0.004; 
  for (int i = 0; i < cubes.length; i++) { 
    cubes[i].display();
  }
}

// ==============================================================================================================

class Cube { 
  int posX; 
  int posY; 
  int posZ; 

  color col = color(255, 0, 0); // color(random(255), random(255), random(255));
  boolean exist = false; 

  float sizeCube = 90;

  float heightCube = 10 + int(random(1) * 300); 

  // Contructor 
  Cube(int xOffsetTemp, int yOffsetTemp, int zOffsetTemp, boolean existTemp) { 
    posX = xOffsetTemp; 
    posY = yOffsetTemp;
    posZ = zOffsetTemp;
    exist = existTemp;
  }// Contructor 

  // Custom method for drawing the object 
  void display() { 
    if (exist) {
      stroke(0); 
      fill(col);
      pushMatrix();
      translate(posX, posY + heightCube/2, posZ);
      box(sizeCube, sizeCube + heightCube, sizeCube);
      popMatrix();
    }//if
  }//method
  //
} //class
//
1 Like

I added mouse control for rotate

(the rotation is better than yours because mine rotates around the grid’s center)

This looks better with lights(); see below [EDITED]

Chrisir

Cube[] cubes;

float angle1; 

void setup() { 
  size(1600, 860, P3D);

  int unit = 90; 
  int count; 

  int rows = 10; 
  int columns = 8;

  count =  rows * columns;  // wideCount * highCount * depthCount; 
  cubes = new Cube[count];

  // setting up the grid 
  int index = 0; 
  for (int z = 0; z < rows; z++) {
    //for (int y = 0; y < highCount; y++) { 
    for (int x = 0; x < columns; x++) { 
      cubes[index++] = new Cube(
        x*unit-(4*unit), // X
        0, // Y 
        z*unit-(5*unit), // Z  
        true);                         // visible
    }
    //  }
  }
}

void draw() { 
  background(0); 
  lights();

  translate (width/2, height/2+190, -330);

  //rotateX(-0.4); 
  //rotateZ(angle1); 
  //angle1+=0.004;

  rotateY(map(mouseX, 0, width, -TWO_PI, TWO_PI));
  rotateX(-map(mouseY, 0, height, -TWO_PI, TWO_PI));

  for (int i = 0; i < cubes.length; i++) { 
    cubes[i].display();
  }
}

// ==============================================================================================================

class Cube { 
  int posX; 
  int posY; 
  int posZ; 

  color col = color(255, 0, 0); // color(random(255), random(255), random(255));
  boolean exist = false; 

  float sizeCube = 90;

  float heightCube = 10 + int(random(1) * 300); 

  // Contructor 
  Cube(int xOffsetTemp, int yOffsetTemp, int zOffsetTemp, boolean existTemp) { 
    posX = xOffsetTemp; 
    posY = yOffsetTemp;
    posZ = zOffsetTemp;
    exist = existTemp;
  }// Contructor 

  // Custom method for drawing the object 
  void display() { 
    if (exist) {
      stroke(0); 
      fill(col);
      pushMatrix();
      translate(posX, posY + heightCube/2, posZ);
      box(sizeCube, sizeCube + heightCube, sizeCube);
      popMatrix();
    }//if
  }//method
  //
} //class
//

1 Like

sure your rotation better you are a teacher :heart:

how to add this function to the code

Assuming

We have 16 boxes, four in a row and four in a column, or more or less, and I want to increase or decrease the height of each boxes independently from the other

here the value for each box is in a list at the beginning

  { 1, 2, 3, 4 }, 
  { 8, 7, 6, 5 }, 
  { 8, 2, 8, 2 }, 
  { 1, 2, 3, 4 }

Sketch





Cube[] cubes;

float angle1; 

int [][] gridHeight =  {
  { 1, 2, 3, 4 }, 
  { 8, 7, 6, 5 }, 
  { 8, 2, 8, 2 }, 
  { 1, 2, 3, 4 }
};  

void setup() { 
  size(1600, 860, P3D);

  int unit = 90; 
  int count; 

  int rows = 4; 
  int columns = 4;

  count =  rows * columns;  // wideCount * highCount * depthCount; 
  cubes = new Cube[count];

  // setting up the grid 
  int index = 0; 
  for (int z = 0; z < rows; z++) {
    //for (int y = 0; y < highCount; y++) { 
    for (int x = 0; x < columns; x++) { 
      cubes[index++] = new Cube(
        x*unit-(4*unit), // X
        0, // Y 
        z*unit-(5*unit), // Z  
        30*gridHeight[x][z], 
        true);                         // visible
    }
    //  }
  }
}

void draw() { 
  background(0); 
  lights();

  translate (width/2, height/2+190, -330);

  //rotateX(-0.4); 
  //rotateZ(angle1); 
  //angle1+=0.004;

  rotateY(map(mouseX, 0, width, -TWO_PI, TWO_PI));
  rotateX(-map(mouseY, 0, height, -TWO_PI, TWO_PI));

  for (int i = 0; i < cubes.length; i++) { 
    cubes[i].display();
  }
}

// ==============================================================================================================

class Cube { 
  int posX; 
  int posY; 
  int posZ; 

  color col = color(255, 0, 0); // color(random(255), random(255), random(255));
  boolean exist = false; 

  float sizeCube = 90;

  float heightCube = 10 + int(random(1) * 300); 

  // Contructor 
  Cube(int xOffsetTemp, int yOffsetTemp, int zOffsetTemp, 
    float d, 
    boolean existTemp) { 
    posX = xOffsetTemp; 
    posY = yOffsetTemp;
    posZ = zOffsetTemp;

    heightCube = d;  

    exist = existTemp;
  }// Contructor 

  // Custom method for drawing the object 
  void display() { 
    if (exist) {
      stroke(0); 
      fill(col);
      pushMatrix();
      translate(posX, posY + heightCube/2, posZ);
      box(sizeCube, sizeCube + heightCube, sizeCube);
      popMatrix();
    }//if
  }//method
  //
} //class
//

1 Like

do you mean you want to change the height of the cube by mouse or by keyboard? You have to explain better.

in these lines you can set the height individual for each cube initially

  { 1, 2, 3, 4 }, 
  { 8, 7, 6, 5 }, 
  { 8, 2, 8, 2 }, 
  { 1, 2, 3, 4 }
1 Like

i am making some experiments with your sketch it more than great i need some time to walk to the next step and i need your help

thanks again and again for you :heart: :heart: :heart:

We can make it so that you can click each box with the mouse and drag the mouse to change the height of the box

Or by keyboard

@Chrisir

hi i have spend a lot time thinking how to make best usage of this sketch i rise the cells to 100*100 reduse the size to 8 and use the same random height it gives wonderful shape

what if you use controlP5 sliders ?

one for numbers of columns and other for raw

other one for height and one other more for color(of the cell itself)

and for size final slider

i think it could draw then variable colored 3d shape on demand

@Chrisir

hi i have figured-out a solution for touch issue of controlP5 on android i can share it for all

Great progress here!

Please share.

For a GUI with sliders see libraries | p5.js

Chrisir

hi i have figured-out a solution for touch issue of controlP5 on android i can share it for all

i mean this library
http://www.sojamo.de/libraries/controlP5/

I’m currently finishing up my own lib for android gui, with menus sliders tabs docks and windows. Its taken some time, but its almost finished now. Just have to convert the library I’ve already made for pc to handle mousepressed on handheld devices, will update later.

2 Likes

nice work… :smiley:

currently only the menu’s work. Again there is code for everything else, but I have to sort the button logic, to make it useful for android.