Reducing the size of a vector

CharlesDesign

Hi there,

I've created a grid of eyes and I'm trying to get each pupil to follow the mouse without it coming out of the ellipse. As I understand multiplying the vector by a factor of 0.5 would half the size of my line, unfortunately this is not the case.

Could anyone help me out?!

Thanks :)

Ps: Of course, if there's is a more efficient way of doing this please feel free to point it out.

int nEyes = 20;
PVector[] eyes = new PVector[nEyes*5];
PVector[] mouse = new PVector[nEyes*5];

void setup() {
  size(600, 400);
  noFill();
  smooth();

  // Creating an array of points
  int i = 0;
  for (int x = 1; x < nEyes; x++) {
    for (int y = 1; y < nEyes; y++) {
      eyes[i] = new PVector((width/nEyes) * x, (height/nEyes) * y);
      y ++;
      i ++;
    }
    x ++;
  }
}

void draw() {

  background(255);

  for (int i = 0; i < eyes.length; i++) {
    noFill();
    ellipse(eyes[i].x, eyes[i].y, 50, 25); // This is the eye

    mouse[i] = new PVector(mouseX, mouseY);

    //mouse[i].sub(eyes[i]); // These won't work
    //mouse[i].mult(0.1);
    //mouse[i].limit(20);


    fill(0);
    ellipse(mouse[i].x, mouse[i].y, 10, 10); // This is the pupil
    line(eyes[i].x, eyes[i].y, mouse[i].x, mouse[i].y);
  }
}

benja

Hi, you could try somehting like this:

    mouse[i] = new PVector(mouseX, mouseY);
    mouse[i].sub(eyes[i]);
    mouse[i].limit(10);
    mouse[i].add(eyes[i]); // These won't work

Or make it like this:

    float x = eyes[i].x+(mouseX-eyes[i].x)*0.04;
    float y = eyes[i].y+(mouseY-eyes[i].y)*0.02;
    mouse[i] = new PVector(x, y);

KevinWorkman

You need to do a couple things.

First, you need your PVector to contain information about the direction of the pupil. You do this by simply subtracting the eye position from the mouse position.

Then, you need to limit your PVector to not let the pupil go outside the radius of the eye. You can do this using the limit() function.

Here's an example that does that for one eye:

void setup() {
  size(500, 500);
  ellipseMode(RADIUS);
}

void draw() {

  background(0);

  //calculate the eye position and radius
  float eyeX = width/2;
  float eyeY = height/2;
  float eyeR = 100;

  //draw the eye
  fill(255);
  ellipse(eyeX, eyeY, eyeR, eyeR);

  //pupil vector looks in the direction of the mouse from the eye position
  PVector pupil = new PVector(mouseX-eyeX, mouseY-eyeY);
  //don't let the pupil go outside the radius of the eye
  pupil.limit(eyeR);

  //draw the pupil
  fill(0);
  ellipse(eyeX + pupil.x, eyeY+pupil.y, 10, 10);
}

Also notice that you're making your life harder by using oval eyes instead of circles.

CharlesDesign

Thanks you very much for the quick answers, it now works as it should.

May I also ask how should I go about including a maximum speed threshold to limit the movement of my pupils?

KevinWorkman

Well, what have you tried?

Just store the position of the pupil(s) and update accordingly, obeying whatever speed limits you want. I recommend just trying something and posting an MCVE (notice that I just posted the code for one eye, since you don't really need the other eyes to talk about the technique) if you get stuck.