last item in sequence acts differently

destrosjowl

hi all,

i has a small program through which i rotate and transate a sequence of 4 triangles so they overlap. even elements in the sequence translate in the x direction; odd translate in the y direction.

when i print the results of the conditional, it prints the correct result as to which is odd or even. however, the last element does not translate as expected:

PShape tri;

void setup() {
  size (500, 500, P2D);
  colorMode(HSB, 360, 100, 100, 100);

  tri = createShape(TRIANGLE, 0, 0, 0, width/10, width/10, width/10);
}

void draw() {
  background(0);

  translate(width/2, height/2);
  pushMatrix();
  for(int i = 0; i < 4; i ++) {
    tri.setFill(color(map(i, 1, 4, 0, 360), 100, 100, 50));
    shape(tri);
    tri.rotate(PI/2);
    if(i % 2 != 0) translate(0, width/10);
    else if(i % 2 == 0) translate(width/10, 0);
  }
  popMatrix();
}

if i increase the number of elements, how can i reset the tranlation so the next group of for overrides the previous group instead of creating a new translations for subsequent sets of triangles? if i set a counter and translate the space or the pshape back (-width/10, -width/10) before it draws the next four, it breaks.

PShape tri;

void setup() {
  size (500, 500, P2D);
  colorMode(HSB, 360, 100, 100, 100);

  tri = createShape(TRIANGLE, 0, 0, 0, width/10, width/10, width/10);
}

void draw() {
  background(0);

  translate(width/2, height/2);
  pushMatrix();
  for(int i = 0; i < 16; i ++) {
    tri.setFill(color(map(i, 1, 16, 0, 360), 100, 100, 50));
    shape(tri);
    tri.rotate(PI/2);
    if(i % 2 != 0) translate(0, width/10);
    else if(i % 2 == 0) translate(width/10, 0);
  }
  popMatrix();
}

is there something i am doing wrong? (obviously, there is, but i don't see it.)

thanks in advance.

cheers,

destro

Chrisir

I think the error is not about % 2 but about push/popMatrix

PShape tri;

void setup() {
  size (500, 500, P2D);
  colorMode(HSB, 360, 100, 100, 100);

  tri = createShape(TRIANGLE, 0, 0, 0, width/10, width/10, width/10);
}

void draw() {
  background(0);

  translate(width/2, height/2);
  pushMatrix();
  for (int i = 0; i < 4; i ++) {
    pushMatrix();
    tri.setFill(color(map(i, 1, 4, 0, 360), 100, 100, 50));
    shape(tri);
    tri.rotate(PI/2);
    if (i % 2 != 0) translate(0, width/10);
    else if (i % 2 == 0) translate(width/10, 0);
    popMatrix();
  }
  popMatrix();
}

destrosjowl

hi chrisir, but this makes a pinwheel.

Chrisir

anyway, fact is that the push/popMatrix in your code (Oringinal post) are not doing anything since draw resets the matrix anyway when it starts.

also remeber that rotate and translate have impact on the tri after it not before them. Thus you're influencing the tri in the next round of the for-loop with it.

here another example:

PShape tri;
float angle; 

void setup() {
  size (500, 500, P2D);
  colorMode(HSB, 360, 100, 100, 100);

  tri = createShape(TRIANGLE, 0, 0, 0, width/10, width/10, width/10);
}

void draw() {
  background(0);

  translate(width/2, height/2);

  for (int i = 0; i < 4; i ++) {
    pushMatrix();
    if (i % 2 != 0) 
      translate(0, width/10);
    else 
      translate(width/10, 0); // if (i % 2 == 0)
    tri.rotate(angle);
    tri.setFill(color(map(i, 1, 4, 0, 360), 100, 100, 50));
    shape(tri);
    angle+=PI/2;
    popMatrix();
  }
}

destrosjowl

hi chrisir,

i need to add this code to another program, which is why the push/popMatrix() seem erroneous that the moment.

the result of the code you recommended is a pinwheel, though. the triangles aren't rotating and overlapping. other than the fact that my code is broken, it is doing what i'd like it to do. it's just that the last triangle is off to the side. i guess a better way to put it is that i'd like the triangles to rotate in place so i end up with a square.

    translate(width/4, height/4);
    pushMatrix();
    //triSqu.rotate(PI/2);
    for(int i = 0; i < 16; i ++) {
      if(i % 2 != 0) translate(0, width/sideSqu);
      if(i % 2 == 0) translate(width/sideSqu, 0);
      triSqu.setFill(color(map(i, 1, 16, 0, 360), 100, 100, random(10, 100)));
      triSqu.rotate(PI/2);
      shape(triSqu);
    }
    popMatrix();

this sequence takes one of the tis in the first 4 and places at the end of the 16.

Chrisir

I see

Chrisir

I have no idea

destrosjowl

me either.

haha. thanks for trying. i'll keep at it.

cheers.

quark

I think the problem here is that your description of what you are trying to achieve iis as clear as mud (at least to me :) ). It might be worth posting a drawing of where you want the triangles to appear (for a sequence of 4 and 16)

Chrisir

when you place you triangle in setup() (!!!!!!!!!) differently so that the corner is not at 0,0

but its center is at 0,0

tri = createShape(TRIANGLE, -width/10/2, -width/10/2, 
  -width/10/2, width/10/2, width/10/2, width/10/2);

you can rotate around its center really, not its corner

that might do it for you...

destrosjowl

hi chrisir,

it works, however, if i don't rotate the squares, the code breaks an is just 2 squares made up of 2 half triangles instead of 4 overlapped triangles.

void setup() {
  size (500, 500, P2D);
  colorMode(HSB, 360, 100, 100, 100);

  //tri = createShape(TRIANGLE, 0, 0, 0, width/10, width/10, width/10);
  tri = createShape(TRIANGLE, -width/10/2, -width/10/2, 
  -width/10/2, width/10/2, width/10/2, width/10/2);
}

void draw() {
  background(0);

  translate(width/2, height/2);

  for (int i = 0; i < 4; i ++) {
    pushMatrix();
    if (i % 2 != 0) 
      translate(0, width/10);
    else
      translate(width/10, 0); // if (i % 2 == 0)
    tri.rotate(PI/2);
    tri.setFill(color(map(i, 1, 4, 0, 360), 100, 100, 50));
    shape(tri);
    //angle+=PI/2;
    popMatrix();
  }
}

destrosjowl

hi quark,

i was going to leave an image, but since i don't engage in social media, i have no place to link an image from and i can't upload it. i figured that the result of the code would exhibit what i'm aiming at even if it is a bit confusing.

i would like the code to:

1. place first triangle
2. roate second triangle PI/2 in place and overlap the first triangle
3. rotate third triangle PI/2 in place and overlap the first triangle
4. rotate fourth triangle PI/2 in place and overlap the first triangle

etc.

but, as you see, the last triangle is separate from the other three. you should see one square made up of four triangles.

and when i extend it to 16, the next 4 triangles translate again instead of overriding the previous 4 triangles.

hope the explaination helps.