Example 1.3 not really clear

[Kasper Kamperman]

I'm checking out the book because I'd like to use it to explain Vectors to my students. However I'm pretty new to the subject, so I'm on student level as well.

I was wondering if Example 1.3. could be not more clear? You use a translate(width/2, height/2) to explain the subtraction. However that is a completely different concept (and pretty difficult as well, regarding the matrix). You need to translate, to show the subtract.

However without translate, you don't need the subtraction:

void setup() {
  size(640,360);
}

void draw() {
  background(255);
  //[full] Two PVectors, one for the mouse location and one for the center of the window
  PVector mouse  = new PVector(mouseX,mouseY);
  PVector center = new PVector(width/2,height/2);
  //[end]
  // PVector subtraction!
  //mouse.sub(center);
    // Draw a line to represent the vector.
  //translate(width/2,height/2);
  line(center.x,center.y,mouse.x,mouse.y);
}

I feel that something based on the example from the Processing reference could be more clear:

PVector v1, v2;

void setup() {
  size(200,200);
  noLoop();
  v1 = new PVector(25, 25, 0);
  v2 = new PVector(100, 100, 0); 
}

void draw() {
  ellipse(v1.x, v1.y, 12, 12);
  ellipse(v2.x, v2.y, 12, 12);
  v2.sub(v1);
  ellipse(v2.x, v2.y, 24, 24);
}

[Daniel Shiffman]

This is excellent feedback, thank you. I'm stalled on getting a 2nd edition ready, but I hope to get back to it soon and incorporate new ideas like this one!

[Daniel Shiffman]

I'm revisiting this finally. I think your point is an excellent one. However, I lean towards my examples b/c several times throughout the book I demonstrate how you get a vector pointing from one position to another using subtraction. I like that this example shows the vector pointing towards the mouse and that it animates. I've added some text for clarity, let me know what you think.

The following example demonstrates vector subtraction by taking the difference between two points—the mouse location and the center of the window. Note the use of translate to visualize the resulting vector as a line from the center (width/2, height/2) to the mouse.

Example 1.3: Vector subtraction

void setup() {
  size(640, 360);
}

void draw() {
  background(255);
  // Two PVectors, one for the mouse location and one for the center of the window
  PVector mouse  = new PVector(mouseX, mouseY);
  PVector center = new PVector(width/2, height/2);

  // PVector subtraction!
  mouse.sub(center);

  //{!2} Draw a line to represent the vector.
  translate(width/2, height/2);
  line(0, 0, mouse.x, mouse.y);
}

[Kasper Kamperman]

I understand that you want a nice interactive example.
However for me it's hard to visualise what happens, because you don't draw the vector, but do some other drawing "magic".

I did some interactive attempts. The one below I found the most clear. I've added some color, however I understand that that doesn't not fit the style of your book. At least this example makes it easier for me to see what's going on.

void setup() {
  size(640, 360);
}

void draw() {
  background(255);

  // Two PVectors, one for the mouse location and one for the center of the window
  PVector circle = new PVector(width/2, height/2); 
  PVector mouse  = new PVector(mouseX, mouseY);

  stroke(0,0,255);
  line(0, 0, circle.x,circle.y);
  ellipse(circle.x,circle.y,10,10);

  stroke(0,255,0);
  line(0, 0, mouse.x, mouse.y);
  ellipse(mouse.x,mouse.y,10,10);

  // PVector subtraction!
  mouse.sub(circle);

  stroke(255,0,0);
  line(0, 0, mouse.x, mouse.y);
  ellipse(mouse.x,mouse.y,10,10);
}

[Daniel Shiffman]

This is an excellent improvement. I realize the translate() is tricky, but I feel the book's level merits some knowledge of how it works. I've made one more pass at improving this based on your suggestion. Thank you again!

void setup() {
  size(640, 360);
}

void draw() {
  background(255);
  // Two PVectors, one for the mouse location and one for the center of the window
  PVector mouse  = new PVector(mouseX, mouseY);
  PVector center = new PVector(width/2, height/2);

  //{!3} Draw the original two vectors
  stroke(200);
  line(0, 0, mouse.x, mouse.y);
  line(0, 0, center.x, center.y);

  // PVector subtraction!
  mouse.sub(center);

  //{!3} Draw a line to represent the result of subtraction.
  // Notice how I move the origin with translate() to place the vector
  stroke(0);
  translate(width/2, height/2);
  line(0, 0, mouse.x, mouse.y);
}

[Kasper Kamperman]

You're welcome. This gives more insight in what happens.