# 2d shapes on the zx plane

**URL:** <https://discourse.processing.org/t/2d-shapes-on-the-zx-plane/17876>\
**Category:** Coding Questions\
**Created:** [February 17, 2020, 5:08am UTC](https://discourse.processing.org/t/2d-shapes-on-the-zx-plane/17876 "2020-02-17T05:08:20Z")\
**Posts on this page:** 10\
**Page:** 1

<div class="post-metadata">

**Author:** ![code\_X](https://avatars.discourse-cdn.com/v4/letter/c/47e85d/32.png) [@code\_X](https://discourse.processing.org/u/code_X)\
**Post date:** [February 17, 2020, 5:08am UTC](https://discourse.processing.org/t/2d-shapes-on-the-zx-plane/17876/1 "2020-02-17T05:08:20Z")

</div>

So the title basically explains my question, so I’m wanting to make a program that displays a circle on the x-z plane how would I do this without a rotation statement? Is it possible? I’ve done some researching and didn’t find anything that could help. Any thoughts? Kind regards, Code\_X. also I am going to ask on an instant message based forum also so yeah, will up date this post if I get an answer from there.

---

<div class="post-metadata">

**Author:** ![anon94203042](https://avatars.discourse-cdn.com/v4/letter/a/898d66/32.png) [@anon94203042](https://discourse.processing.org/u/anon94203042)\
**Post date:** [February 17, 2020, 6:01am UTC](https://discourse.processing.org/t/2d-shapes-on-the-zx-plane/17876/2 "2020-02-17T06:01:58Z")

</div>

What’s the point of the z-axis if you’re not using 3D?

---

<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:** [February 17, 2020, 8:43am UTC](https://discourse.processing.org/t/2d-shapes-on-the-zx-plane/17876/3 "2020-02-17T08:43:23Z")

</div>

It’s not negative to use rotation. Why won’t you use it?  
Just use rotateX etc.

You can look at shape3D library by quark to place a torus for example.

Of course you can calculate your own circle with a for loop and cos and sin - see tutorial trigonometry

---

<div class="post-metadata">

**Author:** ![code\_X](https://avatars.discourse-cdn.com/v4/letter/c/47e85d/32.png) [@code\_X](https://discourse.processing.org/u/code_X)\
**Post date:** [February 17, 2020, 9:55am UTC](https://discourse.processing.org/t/2d-shapes-on-the-zx-plane/17876/4 "2020-02-17T09:55:03Z")

</div>

Well, if I rotate the circle it will rotate this square I have, I promise this seems odd but I have a method to my madness. The square rotates along the y axis, this gave me the idea for the circle, it should be under the square for an affect idea I had because of the square. Sorry, I just finished your post, sorry, the trig idea isn’t bad, I love math. Thanks🙂

---

<div class="post-metadata">

**Author:** ![code\_X](https://avatars.discourse-cdn.com/v4/letter/c/47e85d/32.png) [@code\_X](https://discourse.processing.org/u/code_X)\
**Post date:** [February 17, 2020, 1:39pm UTC](https://discourse.processing.org/t/2d-shapes-on-the-zx-plane/17876/5 "2020-02-17T13:39:40Z")

</div>

Okay, now I have a circle drawing algorithm, but it only makes a point, so what’s wrong? My code is:

```auto
//rotation angle varable
float angle =0.0;
//data variables for circle
float a,xCenter,zCenter,radius,xCoord,zCoord;

void setup(){

  fullScreen(P3D);
}

void draw(){

  translate(width/2,height/2,0);

  background(0);
//creates the rotating square above the circle(also causes all other entities to rotate,working fine)
  beginShape();
  stroke(255);
  strokeWeight(2);
  noFill();

  angle +=0.03;

  rotateY(angle);
  vertex(-100,100);
  vertex(-100,-100);
  vertex(100,-100);
  vertex(100,100);
  vertex(-100,100);
  endShape();
  
  //creates the circle(not working)
  beginShape();
  for(int i=0; i < 360; i++){
    
    a = radians(i);
    xCenter = width/2;
    zCenter = 0;
  radius = 100;
  
  xCoord = xCenter + cos(a) + radius;
  zCoord = zCenter + sin(a) + radius;
  
  vertex(xCoord,zCoord);
    
  }
  endShape(CLOSE);
  
}

```

Please help. Code\_X

---

<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:** [February 17, 2020, 2:00pm UTC](https://discourse.processing.org/t/2d-shapes-on-the-zx-plane/17876/6 "2020-02-17T14:00:42Z")

</div>

Hello,

Your formula for a circle is incorrect.

See:  
[Parametric Equation of a Circle](https://www.mathopenref.com/coordparamcircle.html)

See this reference for the parameters available for beginShape() :  
[https://processing.org/reference/beginShape\_.html](https://processing.org/reference/beginShape_.html)

I often use POINTS to see just points; others (or no parameter) are for use as required for your shape.

’ 🙂 ’

---

<div class="post-metadata">

**Author:** ![quark](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/quark/32/26_2.png) [@quark](https://discourse.processing.org/u/quark)\
**Post date:** [February 17, 2020, 2:20pm UTC](https://discourse.processing.org/t/2d-shapes-on-the-zx-plane/17876/7 "2020-02-17T14:20:38Z")

</div>

Any 2D shape on the zx plane would be shown edge on the screen (xy plane). If you had a circle in the zx plane then you would see no change is you rotated about the X axis. But if rotated about the y axis then you would see a vertical ellipse with the major axis along the Y axis. It is simple enough to calculate the size of the minor axis and if using orthogonal view use the ellipse(…) statement to display it. If you wanted to include perspective then the maths is much more complicated.

---

<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:** [February 17, 2020, 7:33pm UTC](https://discourse.processing.org/t/2d-shapes-on-the-zx-plane/17876/8 "2020-02-17T19:33:55Z")

</div>

> [@code\_X](#):
>
> if I rotate the circle it will rotate this square I have, I promise this seems odd

I don’t fully understand but let me mention that you can isolate the rotations of different items against each other.

Basically you use pushMatrix then translate/ rotate for the circle then popMatrix().  
When you then display the rect you start with a clean slate (no rotation).

You probably know this.

Also, sphere and box are in 3D.

Chrisir

---

<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:** [February 17, 2020, 7:43pm UTC](https://discourse.processing.org/t/2d-shapes-on-the-zx-plane/17876/9 "2020-02-17T19:43:50Z")

</div>

> [@code\_X](#):
>
> xCoord = xCenter + cos(a) + radius;  
> zCoord = zCenter + sin(a) + radius;

I think its `* radius` not +

---

<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:** [February 18, 2020, 10:23am UTC](https://discourse.processing.org/t/2d-shapes-on-the-zx-plane/17876/10 "2020-02-18T10:23:08Z")

</div>

Here is an example of a lying red circle with pushMatrix / PopMatrix (no cos / sin trig)

```auto

ThreeD threeD = new ThreeD(); 
float angleBox; 

// ----------------------------------------------

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

void draw() {
  background(0);
  lights();

  //floor
  threeD.checkeredFloor();

  // lying red circle 
  pushMatrix(); 
  translate(width/2, height-200, 222); 
  rotateX(radians(90)); 
  noFill();
  stroke(255, 2, 2); 
  strokeWeight(15); 
  ellipse(0, 0, 100, 100);
  strokeWeight(1); 
  popMatrix();

  // blue box 
  pushMatrix(); 
  noStroke(); 
  fill(0, 0, 255);
  translate(width/2+180, height-270, 222); 
  rotateY(radians(angleBox)); 
  box(80); 
  popMatrix(); 

  angleBox+=1; 
  //
} // func 

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

class ThreeD {

  /*
   This class shows different solids to draw in 3D.
   
   This class is not about one item (Car) but more a 
   collection of different commands for the realm of 3D. 
   
   section 1: reference section "2D Primitives" now in 3D
   section 2: reference section "3D Primitives" now in enhanced version 
   section 3: Platonic solids
   section 4: other, non platonic solids 
   section 5: coordinate system and related 
   section 6: HUD funcs / Head-up-Display funcs 
   section 7: floor
   section 8: minor help functions
   
   */

  // consts

  final color RED = color (255, 0, 0);
  final color GREEN = color (0, 255, 0);
  final color BLUE = color (0, 0, 255);

  final color WHITE = color (255);
  final color BLACK = color (0);
  final color GRAY = color (111);

  final color YELLOW = color (255, 255, 0);
  final color YELLOWWARM = color (255, 245, 49); 
  final color VIOLET = color (143, 0, 255);
  final color INDIGO = color (111, 0, 255);
  final color MAGENTA = color (255, 0, 255);
  final color PINK = color (255, 192, 203); 

  // vars 

  boolean crosshair; 

  // section 7:
  // floor (later walls (but see coordinate system wall above), sky sphere...) --------------------------------

  void checkeredFloor() {

    noStroke();

    for (int i = 0; i < 40; i = i+1) {
      for (int j = 0; j < 40; j = j+1) {

        // % is modulo, meaning rest of division
        if (i%2 == 0) {
          if (j%2 == 0) {
            fill (255, 0, 0);
          } else
          {
            fill ( 103 );
          }
        } else {
          if (j%2 == 0) {
            fill ( 103 );
          } else
          {
            fill (255, 0, 0);
          }
        } // if

        pushMatrix();

        translate ( 40*i-20*20, height-150, 40*j-940 );
        box (40, 7, 40);

        popMatrix();
      } // for
    } // for
  } // method
  //
} // class ThreeD
//

```