# Get the vertical axis of object's array

**URL:** https://discourse.processing.org/t/get-the-vertical-axis-of-objects-array/23319
**Category:** Coding Questions
**Created:** [August 17, 2020, 10:18pm UTC](https://discourse.processing.org/t/get-the-vertical-axis-of-objects-array/23319 "2020-08-17T22:18:25Z")
**Posts on this page:** 5
**Page:** 1

<div class="post-metadata">

### Author: ![chanof](https://avatars.discourse-cdn.com/v4/letter/c/3e96dc/32.png) [@chanof](https://discourse.processing.org/u/chanof)
#### Post date: [August 17, 2020, 10:18pm UTC](https://discourse.processing.org/t/get-the-vertical-axis-of-objects-array/23319/1 "2020-08-17T22:18:25Z")

</div>

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](https://www.instagram.com/p/BfGNVtSh48f/?utm_source=ig_embed&utm_campaign=embed_video_watch_again)

```auto
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();
  }
  } }

```

---

<div class="post-metadata">

### Author: ![glv](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/glv/32/18785_2.png) [@glv](https://discourse.processing.org/u/glv)
#### Post date: [August 17, 2020, 11:31pm UTC](https://discourse.processing.org/t/get-the-vertical-axis-of-objects-array/23319/2 "2020-08-17T23:31:55Z")

</div>

Hello,

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

Try this:

```auto
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.

`:)`

---

<div class="post-metadata">

### Author: ![chanof](https://avatars.discourse-cdn.com/v4/letter/c/3e96dc/32.png) [@chanof](https://discourse.processing.org/u/chanof)
#### Post date: [August 17, 2020, 11:41pm UTC](https://discourse.processing.org/t/get-the-vertical-axis-of-objects-array/23319/3 "2020-08-17T23:41:31Z")

</div>

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

```auto
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

---

<div class="post-metadata">

### Author: ![glv](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/glv/32/18785_2.png) [@glv](https://discourse.processing.org/u/glv)
#### Post date: [August 17, 2020, 11:43pm UTC](https://discourse.processing.org/t/get-the-vertical-axis-of-objects-array/23319/4 "2020-08-17T23:43:43Z")

</div>

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:

```auto
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](https://processing.org/reference/map_.html)

You may want to consider using this:  
[https://processing.org/reference/lights\_.html](https://processing.org/reference/lights_.html)

`:)`

---

<div class="post-metadata">

### Author: ![chanof](https://avatars.discourse-cdn.com/v4/letter/c/3e96dc/32.png) [@chanof](https://discourse.processing.org/u/chanof)
#### Post date: [August 18, 2020, 3:40am UTC](https://discourse.processing.org/t/get-the-vertical-axis-of-objects-array/23319/5 "2020-08-18T03:40:05Z")

</div>

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.

```auto
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();
}
}

```