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

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

``````// 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;

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

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!

`:)`

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

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!

``````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!

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

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…

1 Like

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