How to make Grid out of Boxes (3D)

jafal · February 25, 2021, 1:30am

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

Chrisir · February 25, 2021, 8:55am

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
//

jafal · February 25, 2021, 4:35pm

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

Chrisir · February 25, 2021, 5:22pm

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
//

jafal · February 25, 2021, 5:38pm

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
//

jafal · February 25, 2021, 5:50pm

what i mean is to increase the z of box

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

Increase and decrease d

Chrisir · February 25, 2021, 6:17pm

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
//

Chrisir · February 25, 2021, 6:22pm

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
//

jafal · February 25, 2021, 6:51pm

sure your rotation better you are a teacher

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

Chrisir · February 25, 2021, 7:00pm

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
//

Chrisir · February 25, 2021, 7:21pm

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 }

jafal · February 25, 2021, 9:57pm

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

Chrisir · February 25, 2021, 10:08pm

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

jafal · February 26, 2021, 3:02am

@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

jafal · February 26, 2021, 3:26am

@Chrisir

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

Chrisir · February 26, 2021, 8:31am

Great progress here!

Please share.

For a GUI with sliders see libraries | p5.js

jafal · February 26, 2021, 10:32am

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/

paulgoux · February 26, 2021, 10:37am

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.

jafal · February 26, 2021, 10:41am

nice work…

paulgoux · February 26, 2021, 1:51pm

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.

Topic		Replies	Views
3d drawing with mouse Coding Questions	36	1008	March 2, 2021
Problem in code Beginners	1	377	November 23, 2021
Spawning PGraphics using 2D array Coding Questions	0	250	October 26, 2021
Basic white triangle grid homework pls help Coding Questions homework	3	476	December 22, 2021
【Processing】Shooting Star 3 Project Guidance homework	6	1250	January 5, 2021

How to make Grid out of Boxes (3D)

Related topics