Rotating arcs based on probability are not all appearing in sketch

Processing Coding Questions
1

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!!
:nerd_face:

// 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();
  }
}
1 Like
2

Hello,

This will correct it:

  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
image802×827 41.4 KB

Try this code:

Example or Rotating and Translating 
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.

2 Likes
3

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! :slightly_smiling_face:

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!
:nerd_face:

4

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/ 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.

:)

2 Likes
5

Ah. Yes. I hadn’t read the 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…
:face_with_raised_eyebrow:

1 Like
6

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:

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
}
2 Likes