Get the vertical axis of object's array

Processing Coding Questions
1

Im trying to center this cluster of cubes, to be able to rotate them on the vertical axis, currently it rotate by using the corner as axis, i tried a lot instruments, translate, ortho, rotate, i really need a hand to figure out how get it clean centered, to be able to rotate it.
May ask if can you teach me how to set the right position by using this example? Basically to learn i try to reproduce this famous sketch :https://www.instagram.com/p/BfGNVtSh48f/?utm_source=ig_embed&utm_campaign=embed_video_watch_again

CubeClass[][][] cube = new CubeClass[8][8][8];
float d = 8;

float howMany = 0;
void setup(){
  size(400, 400, P3D);
  frameRate(60);
  pixelDensity(displayDensity());

        for (int x = 0; x < 8; x=x+1){
        for (int y = 0; y < 8; y=y+1){
          for (int z = 0; z < 8; z=z+1){
              
            cube[x][y][z] = new CubeClass(x*16,y*16,z*16, parseBoolean(int(random(0,1.3))));

        }}}
    
}

void draw(){
  background(100);
  noStroke();
  howMany = howMany+ 0.01;
ortho(-width/2, width/2, -height/2, height/2); // Same as ortho()
translate(width/2 -16, height/2 -16, 0);
rotateX(-PI/6);
rotateY(PI/3 + howMany);




        for (int x = 0; x < 8; x=x+1){            
        for (int y = 0; y < 8; y=y+1){ 
          for (int z = 0; z < 8; z=z+1){ 
            
           cube[x][y][z].update();
           
        }}}
    
    
}


class CubeClass { 
    float ypos, xpos, zpos;
    boolean oN;
    CubeClass (float x, float y, float z, boolean on) {  
    ypos = y; 
    xpos = x; 
    zpos = z; 
    oN = on; 
} 

void update() { 
  
  if(oN){
  pushMatrix();
  translate(xpos,ypos,zpos);
  beginShape(QUADS);
  fill(255,0,0);
  vertex(-d, -d,  d);
  vertex( d, -d,  d);
  vertex( d,  d,  d);
  vertex(-d,  d,  d);
  endShape();
  // Back
  beginShape(QUADS);
  fill(255,255,0);
  vertex( d, -d, -d);
  vertex(-d, -d, -d);
  vertex(-d,  d, -d);
  vertex( d,  d, -d);
  endShape();
  // Bottom
  beginShape(QUADS);
  fill( 255,0,255);
  vertex(-d,  d,  d);
  vertex( d,  d,  d);
  vertex( d,  d, -d);
  vertex(-d,  d, -d);
  endShape();
  // Top
  beginShape(QUADS);
  fill(0,255,0);
  vertex(-d, -d, -d);
  vertex( d, -d, -d);
  vertex( d, -d,  d);
  vertex(-d, -d,  d);
  endShape();
  // Right
  beginShape(QUADS);
  fill(0,0,255);
  vertex( d, -d,  d);
  vertex( d, -d, -d);
  vertex( d,  d, -d);
  vertex( d,  d,  d);
  endShape();
  // Left
  beginShape(QUADS);
  fill(0,255,255);
  vertex(-d, -d, -d);
  vertex(-d, -d,  d);
  vertex(-d,  d,  d);
  vertex(-d,  d, -d);
  endShape(); 
  popMatrix();
  }
  } }
2

Hello,

I encourage you to go through the tutorials and experiment a little:
https://processing.org/

Try this:

translate(width/2, height/2);
rotateY(howMany);
translate(-4*16, -4*16, -4*16);  //This will translate it to center

Most importantly worth through this by commenting lines and seeing what each one does.

:)

3

Thank YOU!
by adding ortho it start to be what i want:

howMany = howMany + 0.01;
ortho(-width/2, width/2, -height/2, height/2); // Same as ortho()
translate(width/2, height/2);
rotateY(-QUARTER_PI - howMany);
rotateX(-QUARTER_PI);
translate(-4*16, -4*16, -4*16);

The number 4, where it come from? i can’t understand the process,
Thanks for suggestion, sure i will!
Gian

4

Hello,

You have 8 cubes and 4 is half of that… that is what I used to center it.

Try changing the 4 from 0 to 8 and see what happens!

Try this:

float num = map(mouseX, 0, width, 0, 8); //This comes in very handy!

translate(width/2, height/2);
rotateY(howMany);
translate(-num*16, -num*16, -num*16);  //This will translate it to center

Reference to map():
https://processing.org/reference/map_.html

You may want to consider using this:
https://processing.org/reference/lights_.html

:)

5

Thanks for precious feedback, i play a little, im trying to enlarge the cluster, and now it match with the value 3.5, i can’t understand why.
It is not proportional, maybe an int rounded…
Also rotate value, currently i find the right degree by hand, step by step with keyPressed, i wonder if the right prospective could be done in a clean way.

CubeClass[][][] cube = new CubeClass[8][8][8];

float d = 12;

float howMany = 0;
color c1 = color(255,255,0) ;
color c2 = color(0,255,255) ;
color c3 = color(255,0,255) ;


color[] colors  = {  
 c1, c2, c3
};

void setup(){

size(400, 400, P3D);

frameRate(60);

pixelDensity(displayDensity());

genesi();


noStroke();

}

void genesi(){

for (int x = 0; x < 8; x=x+1){

for (int y = 0; y < 8; y=y+1){

for (int z = 0; z < 8; z=z+1){

 

cube[x][y][z] = new CubeClass(x*24,y*24,z*24, parseBoolean(int(random(0,1.4))), int(random(0,3) ) ,int(random(0,3)) ,int(random(0,3)) );


}}}
  
}
void draw(){

background(100);

//howMany = howMany + 0.01;
float im = (-0.6163185) - howMany;
println(im);
ortho(-width/2, width/2, -height/2, height/2); // Same as ortho()
translate(width/2, height/2);
rotateY(im);
rotateX(-QUARTER_PI);
translate(-3.5*24, -3.5*24, -3.5*24);



for (int x = 0; x < 8; x=x+1){  

for (int y = 0; y < 8; y=y+1){

for (int z = 0; z < 8; z=z+1){

 

cube[x][y][z].update();
 

}}}

}



class CubeClass {

float ypos, xpos, zpos;

boolean oN;

int colOne;

int colTwo;

int colTre;

CubeClass (float x, float y, float z, boolean on, int col1, int col2, int col3) {  

ypos = y;

xpos = x;

zpos = z;

oN = on;

colOne = col1;

colTwo = col2;

colTre = col3;


}


void update() {  

if(oN){

pushMatrix();

translate(xpos,ypos,zpos);

beginShape(QUADS);

fill(colors[colOne]);

vertex(-d, -d, d);

vertex( d, -d, d);

vertex( d, d, d);

vertex(-d, d, d);

endShape();

// Back

beginShape(QUADS);

fill(colors[colTwo]);

vertex( d, -d, -d);

vertex(-d, -d, -d);

vertex(-d, d, -d);

vertex( d, d, -d);

endShape();

// Bottom

beginShape(QUADS);

fill(colors[colTre] );

vertex(-d, d, d);

vertex( d, d, d);

vertex( d, d, -d);

vertex(-d, d, -d);

endShape();

// Top

beginShape(QUADS);

fill(colors[colOne] );

vertex(-d, -d, -d);

vertex( d, -d, -d);

vertex( d, -d, d);

vertex(-d, -d, d);

endShape();

// Right

beginShape(QUADS);

fill(colors[colTwo]);

vertex( d, -d, d);

vertex( d, -d, -d);

vertex( d, d, -d);

vertex( d, d, d);

endShape();

// Left

beginShape(QUADS);

fill(colors[colTre]);

vertex(-d, -d, -d);

vertex(-d, -d, d);

vertex(-d, d, d);

vertex(-d, d, -d);

endShape();

popMatrix();

}

} }


void keyPressed(){
if (key == '+'){
howMany = howMany + 0.001;
}

if (key == '-'){
howMany = howMany - 0.001;
}

if (key == 'r'){
genesi();
}
}