# Needing help with a design

**URL:** <https://discourse.processing.org/t/needing-help-with-a-design/2839>\
**Category:** Coding Questions\
**Created:** [August 22, 2018, 9:12am UTC](https://discourse.processing.org/t/needing-help-with-a-design/2839 "2018-08-22T09:12:20Z")\
**Posts on this page:** 4\
**Page:** 1

<div class="post-metadata">

**Author:** ![thedurf18](https://avatars.discourse-cdn.com/v4/letter/t/3ab097/32.png) [@thedurf18](https://discourse.processing.org/u/thedurf18)\
**Post date:** [August 22, 2018, 9:12am UTC](https://discourse.processing.org/t/needing-help-with-a-design/2839/1 "2018-08-22T09:12:20Z")

</div>

Hi,

I’m trying to create a 3D grid, like the pic below:  
 ![grid](https://canada1.discourse-cdn.com/flex036/uploads/processingfoundation1/original/2X/f/f8b4c4bf5bcb1ed64973c0ae1e23d6780ea48b25.png)

But I’d also like to add circles onto each axis: X, Y, Z. I’d appreciate any help. I have more than half of it done.  
Here’s the code I have so far:

```auto
int gridSize = 10;
float inc = 0.001;
int density = 10;
float znoise = 0.0;

void setup() {
  size(800,800,P3D);
  background(0);
  smooth();
  noFill();
  stroke(255);
}

void draw(){
  background(0);
  pushMatrix();
  translate(width/2, height/2);
  for(int i = -width/2; i < width/2; i+=gridSize) {
    for(int j = -height/2; j < height/2; j+=gridSize) {
      int y = 200;
      line(i, y, j, i+gridSize, y, j);
      line(i, y, j, i, y, j+gridSize);
    }
  }
    popMatrix();
float xnoise = 0.0;
  float ynoise = 0.0;
  for (int y = 0; y < 600; y += density) {
    for (int x = 0; x < width; x += density) {
      float n = noise(xnoise, ynoise, znoise) * 160;
      fill(100, n, 100);
      rect(x, y, density, density);
      xnoise += inc;
    }
    xnoise = 0;
    ynoise += inc;
  }
  znoise += inc;
}

```

---

<div class="post-metadata">

**Author:** ![TheWizardBear](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/thewizardbear/32/3552_2.png) [@TheWizardBear](https://discourse.processing.org/u/TheWizardBear)\
**Post date:** [August 22, 2018, 9:31am UTC](https://discourse.processing.org/t/needing-help-with-a-design/2839/2 "2018-08-22T09:31:06Z")

</div>

Make sure you format your code using the \</\> button!

Drawing the circle on the xy plane shouldn’t be too difficult, but as for the other 2 planes, try rotating and translating to get the ellipse where you want it to be, and then draw the circle using the ellipse() function (making sure all of this is within push/popMatrix).

---

<div class="post-metadata">

**Author:** ![thedurf18](https://avatars.discourse-cdn.com/v4/letter/t/3ab097/32.png) [@thedurf18](https://discourse.processing.org/u/thedurf18)\
**Post date:** [August 22, 2018, 9:45am UTC](https://discourse.processing.org/t/needing-help-with-a-design/2839/3 "2018-08-22T09:45:24Z")

</div>

Would it be possible to show an example in the code? I’d appreciate it.

---

<div class="post-metadata">

**Author:** ![TheWizardBear](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/thewizardbear/32/3552_2.png) [@TheWizardBear](https://discourse.processing.org/u/TheWizardBear)\
**Post date:** [August 22, 2018, 12:06pm UTC](https://discourse.processing.org/t/needing-help-with-a-design/2839/4 "2018-08-22T12:06:50Z")

</div>

I wrote some code for 2 of the ellipses, the ones on the x-y plane and on the x-z plane.  
I have left the last one to you.  
(There doesn’t seem to be a y-z plane on the left or right of the screen to draw the last ellipse on though.)

```auto
[...]
draw(){
  [...]
  fill(255); //Color of ellipses
  ellipse(width/2, height/2, 50, 50); //xy
  pushMatrix();
  translate(0, 3*height/4, 0);
  rotateX(TAU/4);
  ellipse(width/2, height/4, 50, 50); //xz
  popMatrix();
  //Code for last ellipse goes here
}

```