Zoog Translate

Translation

Examining #interactive_zoog more closely, you might notice that all shapes are drawn relative to the point (zoogX,zoogX). Zoog's body is drawn directly at (zoogX,zoogY), Zoog's head is draw a bit higher up at (zoogX,zoogY-30), and the eyes a little bit to the right and left of Zoog's center. If zoogX and zoogY were equal to zero, where would Zoog appear? The top left of the window! You can see an example of this by removing zoogX and zoogY from the sketch and draw Zoog relative to (0,0). (Color functions like stroke() and fill() have been removed for simplicity.)

Zoog's center is at (0,0).

// Draw Zoog's body
rect(0, 0, 20, 100);Each line of code sets coordinates relative to 0,0 and no longer includes zoogX and zoogY.

// Draw Zoog's head
ellipse(0, -30, 60, 60);

// Draw Zoog's eyes
ellipse(-19, -30, 16, 32);
ellipse( 19, -30, 16, 32);

// Draw Zoog's legs
stroke(0);
line(-10, 50, -20, 60);
line( 10, 50,  20, 60);

If you run the above code you'd see a partial Zoog in the top left as depicted in #fig_03_10_zoog_zero_zero. Another technique for moving Zoog (instead of adding zoogX and zoogY to each drawing function) is to use the Processing function translate(). translate() specifies a horizontal and vertical offset for shapes in the display window. In cases such as this, it can be more convenient to set an offset via translate() rather implement the math in each subsequent line of code. Here is an example implementation that moves Zoog relative to mouseX and mouseY.

Translated Zoog

void setup() {
  size(200, 200);
}

void draw() {
  background(255);
  rectMode(CENTER);
  ellipseMode(CENTER);
  
  translate(mouseX, mouseY);All shapes drawn after translate() will be set relative to mouseX and mouseY.
  
  // Draw Zoog's body
  stroke(0);
  fill(175);
  rect(0, 0, 20, 100);

  // Draw Zoog's head
  stroke(0);
  fill(255);
  ellipse(0, -30, 60, 60);
  // Draw Zoog's eyes
  stroke(0);
  fill(0);
  ellipse(-19, -30, 16, 32);
  ellipse( 19, -30, 16, 32);

  // Draw Zoog's legs
  stroke(0);
  line(-10, 50, -20, 60);
  line( 10, 50, 20, 60);
}

There is a lot more to translation than what I've very briefly shown you here. So much so that an entire chapter later in this book is dedicated to translate() and other related functions #translation_and_rotation_left_parenthesi known as transformations. Translation, for example, is required to rotate shapes in Processing as well as a key to unlocking how to draw in virtual three-dimensional space. However, I'm going to stop here since the first half of this book's focus is the fundamentals of programming. I'll leave more advanced topics in computer graphics for later. However, if you feel that exploring transformations now might add to your own work, it would not be so unreasonable to briefly skip to #translation_and_rotation_left_parenthesi and read up until #rotating_many_things_using_objects before returning to read #conditionals. There the discussion starts to include topics I have not yet covered up until now.