# Drawing multiple 3D box plots

**URL:** <https://discourse.processing.org/t/drawing-multiple-3d-box-plots/7008>\
**Category:** Coding Questions\
**Created:** [December 29, 2018, 8:00am UTC](https://discourse.processing.org/t/drawing-multiple-3d-box-plots/7008 "2018-12-29T08:00:00Z")\
**Posts on this page:** 10\
**Page:** 1

<div class="post-metadata">

**Author:** ![kikisarp](https://avatars.discourse-cdn.com/v4/letter/k/c77e96/32.png) [@kikisarp](https://discourse.processing.org/u/kikisarp)\
**Post date:** [December 29, 2018, 8:00am UTC](https://discourse.processing.org/t/drawing-multiple-3d-box-plots/7008/1 "2018-12-29T08:00:00Z")

</div>

Hi,  
I need to draw a 3D shape, specifically a cube at different locations on a grid and to simulate that, I’m using the randomize function to give me random values for the parameters of “translate()” and also the “box()” function to draw the cube but all I get is the cube jumping from one location to another. I know the reason why, and its basically because as the translate location changes, the box location changes but what I actually want is for the box to stay at the old location and for a new box to be drawn at the new randomized location. Is there any simple solution I could use, because I tried some complicated solutions and I didn’t get anywhere.  
Thanks in advance for your help

 ![image](https://canada1.discourse-cdn.com/flex036/uploads/processingfoundation1/original/2X/8/8e9b8ab4517477e7160e62f94a30c61020552f29.png)

```auto
vec_x = random(grid_size); 
vec_y = random(grid_size); 
vec_z = random(100); 

pushMatrix();
translate(vec_x,vec_y,vec_z);
fill(0);
stroke(4);
box(100);
popMatrix();

```

---

<div class="post-metadata">

**Author:** ![kll](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/kll/32/964_2.png) [@kll](https://discourse.processing.org/u/kll)\
**Post date:** [December 29, 2018, 8:14am UTC](https://discourse.processing.org/t/drawing-multiple-3d-box-plots/7008/2 "2018-12-29T08:14:57Z")

</div>

your code sniplet looks good,  
but not tells the whole story

if you do a

```auto
void draw() {
  background(255);

}

```

you delete all and  
might draw a grid and axis and ONE box.  
( WHAT looks like jumping )

in that case you must remember the random positions like to a PVector[]  
and do them in a loop all over again.

but if you not use the background thing it should work??

---

<div class="post-metadata">

**Author:** ![kikisarp](https://avatars.discourse-cdn.com/v4/letter/k/c77e96/32.png) [@kikisarp](https://discourse.processing.org/u/kikisarp)\
**Post date:** [December 29, 2018, 10:00am UTC](https://discourse.processing.org/t/drawing-multiple-3d-box-plots/7008/3 "2018-12-29T10:00:26Z")

</div>

Hey,  
unfortunately, my grid isn’t stationary and I can rotate it in different directions with the mouse so I can’ t get rid of the background(255) and by “jumping” , I mean the box is just redrawn at different locations on the grid.  
I tried the idea of saving the locations to a PVector arraylist but it wasn’t redrawing the whole thing. I’ll try it again and post the code anyway to see I’m doing it right

---

<div class="post-metadata">

**Author:** ![kikisarp](https://avatars.discourse-cdn.com/v4/letter/k/c77e96/32.png) [@kikisarp](https://discourse.processing.org/u/kikisarp)\
**Post date:** [December 29, 2018, 2:09pm UTC](https://discourse.processing.org/t/drawing-multiple-3d-box-plots/7008/4 "2018-12-29T14:09:02Z")

</div>

Heey again, I stayed up to work on it and the PVector array worked after I tuned the code up a bit. i also needed to add another “translate” in the negative under the box() function to offset the cumulative nature of the main “translate” function. I got some help on the PVector from this link [https://forum.processing.org/one/topic/sort-arraylist-with-pvector-on-distance-to-a-point.html](https://forum.processing.org/one/topic/sort-arraylist-with-pvector-on-distance-to-a-point.html)  
Thanks so much for your help, I really appreciate it:grinning:

 ![image](https://canada1.discourse-cdn.com/flex036/uploads/processingfoundation1/original/2X/d/d099c25624275f7d6a3f0fe43dcb0467466caa9d.png)

---

<div class="post-metadata">

**Author:** ![TfGuy44](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/tfguy44/32/41_2.png) [@TfGuy44](https://discourse.processing.org/u/TfGuy44)\
**Post date:** [December 29, 2018, 3:41pm UTC](https://discourse.processing.org/t/drawing-multiple-3d-box-plots/7008/5 "2018-12-29T15:41:47Z")

</div>

Look into using `pushMatrix()` and `popMatrix()` instead of doing the inverse translate.

---

<div class="post-metadata">

**Author:** ![Chrisir](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/chrisir/32/45_2.png) [@Chrisir](https://discourse.processing.org/u/Chrisir)\
**Post date:** [December 29, 2018, 9:45pm UTC](https://discourse.processing.org/t/drawing-multiple-3d-box-plots/7008/6 "2018-12-29T21:45:05Z")

</div>

@kikisarp: could you post your entire code please?

---

<div class="post-metadata">

**Author:** ![Chrisir](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/chrisir/32/45_2.png) [@Chrisir](https://discourse.processing.org/u/Chrisir)\
**Post date:** [December 29, 2018, 10:01pm UTC](https://discourse.processing.org/t/drawing-multiple-3d-box-plots/7008/7 "2018-12-29T22:01:37Z")

</div>

instead of

`ArrayList<PVector> dots = new ArrayList();`

you could use your own class `Box3D`

`ArrayList<Box3D> boxes = new ArrayList();`

and add many boxes to the ArrayList

like this (short form):

```auto
class Box3D {

  PVector posBox; 

  int sizeBox = int (random(2, 55)); 

  color colorBox = color(random(256), random(256), random(256)); 

  // no constructor required

  void display() {
    pushMatrix();
    translate(posBox.x, posBox.y, posBox.z);
    fill(colorBox);
    box(sizeBox);
    popMatrix();
  }//method
}//class

```

full sketch without ArrayList :

```auto
Box3D box1;

void setup() {
  size(1100, 800, P3D);
  background(0);
  box1 = new Box3D();
}

void draw() {
  background(0);
  box1.display();
}

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

class Box3D {

  float dist = 800;

  PVector posBox = new PVector(
    random(0, dist), 
    random(0, dist), 
    random(-dist, 0)); 

  int sizeBox = int (random(22, 55)); 

  color colorBox = color(random(256), random(256), random(256)); 

  // no constructor required

  void display() {
    pushMatrix();
    //posBox.x=440;
    //posBox.y=440;
    //posBox.z=-330;
    translate(posBox.x, posBox.y, posBox.z);
    fill(colorBox);
    box(sizeBox);
    popMatrix();
  }//method
}//class

```

---

<div class="post-metadata">

**Author:** ![kikisarp](https://avatars.discourse-cdn.com/v4/letter/k/c77e96/32.png) [@kikisarp](https://discourse.processing.org/u/kikisarp)\
**Post date:** [December 30, 2018, 1:34am UTC](https://discourse.processing.org/t/drawing-multiple-3d-box-plots/7008/8 "2018-12-30T01:34:17Z")

</div>

hey unfortunately, the entire code is part of a group project but I can post the part about the box creation.

```auto
ArrayList<PVector> data_points = new ArrayList<PVector>(); //dynamic PVector array
PVector new_p,old_p;

void setup(){
 size(1200,900,P3D); 
}

void draw(){
new_p = new PVector(random(grid_size),random(grid_size), random(100));
pushMatrix();
if(new_p != old_p)
{
 data_points.add(new_p); 
}
 for(int a = 0; a < data_points.size()-1; a++)
 {
   //data_points.add(new_p);
   new_p = data_points.get(a);
   //vec_x = new_p.x;// - old_p.x;
   //vec_y = new_p.y;// - old_p.y;
   //vec_z = new_p.z ;//- old_p.z;
  translate(new_p.x,new_p.y,new_p.z);

  //println(old_p.x);
  fill(0);
  noStroke();
  box(2);
  translate(-new_p.x,-new_p.y,-new_p.z);
 }
popMatrix();
old_p = new_p;

}

```

---

<div class="post-metadata">

**Author:** ![Chrisir](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/chrisir/32/45_2.png) [@Chrisir](https://discourse.processing.org/u/Chrisir)\
**Post date:** [December 30, 2018, 1:55am UTC](https://discourse.processing.org/t/drawing-multiple-3d-box-plots/7008/9 "2018-12-30T01:55:00Z")

</div>

Nicely done.

If you’d use my approach with the class you can have boxes of different sizes and colors.

Not a big step.

**Also** for Z-Value: instead of

```auto
random(100));

```

better

`random(-500,100));`

Chrisir

---

<div class="post-metadata">

**Author:** ![kikisarp](https://avatars.discourse-cdn.com/v4/letter/k/c77e96/32.png) [@kikisarp](https://discourse.processing.org/u/kikisarp)\
**Post date:** [December 30, 2018, 5:35am UTC](https://discourse.processing.org/t/drawing-multiple-3d-box-plots/7008/10 "2018-12-30T05:35:07Z")

</div>

Amazing…got it