Translate doesn't work with vertex

Fuechsl

Hey guys,

I'm completely new to processing, seems a magnificent tool!

But I have a problem which in the end comes to this prototype example:

size (600,600);
translate(width/2, height/2);
background(255);
stroke(0);
noFill();

//does work
beginShape();
vertex(0,0);
vertex(20,0);
vertex(20,20);
vertex(0,20);
vertex(0,0);
endShape();

//doesn't work, no square drawn
beginShape();
vertex(0,0);
translate(50,0);
vertex(0,0);
translate(0,50);
vertex(0,0);
translate(-50,0);
vertex(0,0);
translate(0,-50);
vertex(0,0);
endShape();

It would be nice for my further application if the second square would be drawn correctly as well (I know, this example is stupid, but it's the easiest way to explain my problem I think).

Does translate not work together with vertex or beginshape/endshape?

Thanks a lot for your help!

Martin

jeremydouglass

@Feuchsl -- from the beginShape() reference:

Transformations such as translate(), rotate(), and scale() do not work within beginShape().

So this approach isn't going to work.

There might be an alternate approach -- e.g. using PGraphics and translating / rotating before drawing a unit line -- that would work.

Can you say something more about why you have these requirements? What is the use case or the goal?

Fuechsl

Thanks for the extremly quick reply!

I wanted to do some turtle graphics bypassing a turtle library. It seemed me a good idea to instead of rotating the turtle just rotate the whole universe around the drawing... :)

I switched now to the "Turtle"-library I found somewhere on github, here's the code if you're interested in what I did:

import Turtle.*;

size(600,600);
translate(width/2, height/2);
background(255);
stroke(0);
noFill();

Turtle t = new Turtle(this);

float phi=57.5;
float d=20;
int count=45;
t.right(90);

for (int i=0;i<count;i++) {
  t.forward(d);
  t.right(180-phi);
  d=2*d*cos(radians(phi));
}
t.forward(d/sq(2*cos(radians(phi))));

A nice little triangular spiral as a inspiration for my students.

Here the result as a picture:

Regards, Martin

jeremydouglass

This makes sense. Depending on your teaching goals, you might also want to check out the Python turtle graphics implementation.

As I mentioned, PGraphics supports .translate() and .rotate(), but I think that a straight implementation of relative drawing by rotation will encounter significant accumulating floating point errors.

Here is an example:

/**
 * Relative square with errors
 * 2016-10-14 Processing 3.2.1
 * https:// forum.processing.org/two/discussion/18545/translate-doesn-t-work-with-vertex
 **/

PGraphics relSquare;

void setup() {
  size (300, 300);
  stroke(0);
  noFill();
  noLoop();
  relSquare = relativeSquare(100.0);
}
void draw() {
  background(255);
  image(relSquare, width/2.0, height/2.0);
}

PGraphics relativeSquare(float size){
  PGraphics pg = createGraphics(int(size+2),int(size+2));
  pg.beginDraw();
    pg.translate(1,1);
    pg.stroke(255,0,0);
    for(int i=0; i<4; i++){
      pg.line(0, 0, size, 0);
      pg.translate(size,0);
      pg.rotate(HALF_PI);
    }
  pg.endDraw();
  return pg;
}

Notice that long lines will be slightly anti-aliased as they are off-true, and squares will not return to the exact original vertex after rotating four times.