# Rotating arcs based on probability are not all appearing in sketch

**URL:** <https://discourse.processing.org/t/rotating-arcs-based-on-probability-are-not-all-appearing-in-sketch/20147>\
**Category:** Coding Questions\
**Created:** [April 25, 2020, 8:05pm UTC](https://discourse.processing.org/t/rotating-arcs-based-on-probability-are-not-all-appearing-in-sketch/20147 "2020-04-25T20:05:38Z")\
**Posts on this page:** 6\
**Page:** 1

<div class="post-metadata">

**Author:** ![debxyz](https://avatars.discourse-cdn.com/v4/letter/d/58956e/32.png) [@debxyz](https://discourse.processing.org/u/debxyz)\
**Post date:** [April 25, 2020, 8:05pm UTC](https://discourse.processing.org/t/rotating-arcs-based-on-probability-are-not-all-appearing-in-sketch/20147/1 "2020-04-25T20:05:38Z")

</div>

Using probability I am trying to **rotate arc object motifs** in a 1D grid.

I feel like I’ve tried every placement possibility of push&popMatrix (in class and main program) so that each arc rotates individually according to the if-else clause in the object class…

**There should be an arc shape in each cell in the grid for a total of 16 arc shapes.** However aprox. half of the arcs are not displaying.

Am clearly overlooking something, I just don’t know what.

Any help is most appreciated!!  
🤓

```auto
// MAIN---------------------------------------------------

int gridX = 4, gridY = gridX, many = gridX*gridY;

DrawArc [] drawArc = new DrawArc[many];

//float [] r = new float [many];

void setup() {
  size (800, 800);

  int x = 0, y = x, sz = 200;

  int k = 0;

  for (int i = 0; i < gridX; i++) {
    for (int i2 = 0; i2 < gridY; i2++) {
      drawArc [k] = new DrawArc (x + i*(sz), y + i2*(sz), sz, random(1));
      k++;
    }
  }
}

void draw() {

  for (int i = 0; i < many; i++) {
    drawArc[i].display();
  }
}
// CLASS---------------------------

class DrawArc {

  color c;
  float x, y, sz;
  float r;

  float deg = radians(90);

  DrawArc (float tempX, float tempY, float tempSz, float tempR) {
    x = tempX;
    y = tempY;
    sz = tempSz;
    r = tempR;

    c = 255;
  }
  void display() {

    fill (c);

    pushMatrix();
    translate (100, 100);

    if (r < 0.40) {
      rotate (deg);
    } else if (r > 0.40 && r < 0.50) {
      rotate (deg*3);
    } else if (r > 0.50 && r < 0.65) {
      rotate (deg*2);
    } else {
      rotate (deg*4);
    }
    ellipseMode (CENTER);
    arc (x, y, sz, sz, 0, PI);
    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:** [April 26, 2020, 2:08am UTC](https://discourse.processing.org/t/rotating-arcs-based-on-probability-are-not-all-appearing-in-sketch/20147/2 "2020-04-26T02:08:05Z")

</div>

Hello,

This will correct it:

```auto
  void display() 
    {
    fill (c);
    pushMatrix();
    translate (100, 100);
    println(r);
    translate(x, y);

    if (r < 0.40) 
      rotate (deg);
    else if (r >= 0.40 && r < 0.50) 
      rotate (deg*3);
    else if (r >= 0.50 && r < 0.65) 
      rotate (deg*2);
    else 
      rotate (deg*4);
    ellipseMode (CENTER);
    arc (0, 0, sz, sz, 0, PI);
    popMatrix();
    }

```

But you have to tell me why!

`:)`

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

Try this code:

> **Example or Rotating and Translating**
>
> ```auto
> boolean togR = false;
> boolean togT = false;
> 
> void setup() 
> {
> size (800, 800);
> background(0);
> }
> 
> void draw() 
> {
> background(0);
> if (togT) translate(width/2, height/2);
> 
> strokeWeight(10);
> stroke(255, 0, 0);
> point(0, 0);
>   
> stroke(255, 255, 0);
> for (int i = 0; i < 8; i++) 
> {
> push();  
> if (togR) rotate(i*TAU/8); 
> translate(200, 200);
> if (!togR) rotate(i*TAU/8);   
> line(0, 0, 100, 0);
> pop();
> }
> }
> 
> void mousePressed()
> { 
> if (mouseButton == LEFT) togR = !togR;
> if (mouseButton == RIGHT) togT = !togT;
> }
> 
> ```

The mouse buttons will toggle the translate and rotate; you see in the code where I did this.

---

<div class="post-metadata">

**Author:** ![debxyz](https://avatars.discourse-cdn.com/v4/letter/d/58956e/32.png) [@debxyz](https://discourse.processing.org/u/debxyz)\
**Post date:** [April 26, 2020, 9:08pm UTC](https://discourse.processing.org/t/rotating-arcs-based-on-probability-are-not-all-appearing-in-sketch/20147/3 "2020-04-26T21:08:24Z")

</div>

Thank you @glv !! It seemed counterintuitive to add a second translate, but now that I see this in place, and went through commenting and uncommenting lines I see why this of course works!

I wrote comments next to the three lines of relevance – translate, translate, and arc as to what **my current understanding of why it works**. If i’m wrong please let me know! 🙂

```auto
void display(){
fill ( c );
    pushMatrix();
    translate (100, 100); // translates position of 1st object (appears top left) in the array therefore shifting the entire grid 100px to right and 100px down
    println(r);
    translate(x, y); // translates position of each object instance in the array as they are generated in setup in main program

    if (r < 0.40) 
      rotate (deg);
    else if (r >= 0.40 && r < 0.50) 
      rotate (deg*3);
    else if (r >= 0.50 && r < 0.65) 
      rotate (deg*2);
    else 
      rotate (deg*4);
    ellipseMode (CENTER);
    arc (0, 0, sz, sz, 0, PI); // arc x, y position constant always starts at 0, 0. The x, y values are then added via the 2nd translate above, which pulls from the x, y arguments in constructor in main setup. 
    popMatrix();
    }

```

To eliminate the first translate in the class code, –

`translate (100, 100);`

I could instead add +100 to the x variable in setup in the main program.

Also, I greatly appreciate seeing the addendum code you included!! It’s slightly more complex but still manageable to parse for a beginner like me!  
🤓

---

<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:** [April 26, 2020, 9:56pm UTC](https://discourse.processing.org/t/rotating-arcs-based-on-probability-are-not-all-appearing-in-sketch/20147/4 "2020-04-26T21:56:03Z")

</div>

Hello,

It takes time to understand transforms and work with them; master 2D and then work on 3D.

Go through this:  
[https://processing.org/tutorials/transform2d/](https://processing.org/tutorials/transform2d/) for starters.  
I am sure there are also tutorials on Coding Train and elsewhere; use what works for you.

I edited my example code and added a big bright red origin point.

I always work through simple examples first to understand things; they seem simple now but I remember the early days of wrapping my head around this.

The mousePressed() was a good way to toggle the visuals rather than multiple examples.

`:)`

---

<div class="post-metadata">

**Author:** ![debxyz](https://avatars.discourse-cdn.com/v4/letter/d/58956e/32.png) [@debxyz](https://discourse.processing.org/u/debxyz)\
**Post date:** [April 26, 2020, 10:42pm UTC](https://discourse.processing.org/t/rotating-arcs-based-on-probability-are-not-all-appearing-in-sketch/20147/5 "2020-04-26T22:42:31Z")

</div>

Ah. Yes. I hadn’t read the [processing.org](http://processing.org) tutorial and it is indeed quite helpful. For some reason I wasn’t thinking about what the grid was doing… Should have gotten that…  
🤨

---

<div class="post-metadata">

**Author:** ![jeremydouglass](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/jeremydouglass/32/20_2.png) [@jeremydouglass](https://discourse.processing.org/u/jeremydouglass)\
**Post date:** [April 27, 2020, 1:44am UTC](https://discourse.processing.org/t/rotating-arcs-based-on-probability-are-not-all-appearing-in-sketch/20147/6 "2020-04-27T01:44:27Z")

</div>

A classic way of understanding changing frames of reference is to focus on rotation+translation – for example, astronomy.

This helps me practice complex chains of " A in relation to B, B in relation to C" thinking, which is what the stack is. For example:

```auto
void setup() {
  size(400, 400);
  stroke(128);
}

void draw() {
  
  pushMatrix(); // SUN in the center
  translate(width/2, height/2);
  ellipse(0, 0, 50, 50);

    pushMatrix(); // around the sun -- EARTH
    rotate(frameCount*.001);
    translate(100, 0);
    ellipse(0, 0, 25, 25);

      pushMatrix(); // around earth -- THE MOON
      rotate(frameCount*.025);
      translate(30, 0);
      ellipse(0, 0, 10, 10);
  
        pushMatrix(); // around the moon -- MOONSAT
        rotate(frameCount*.04);
        translate(10, 0);
        ellipse(0, 0, 5, 5);
        popMatrix();
        
        // MOONSAT 2 here
        
      popMatrix();
      
      // Int. Space Station here
      
    popMatrix();
    
    // MARS here
    // JUPITER here
    
  popMatrix();
  
  // ANDROMEDA HERE
}

```