Reducing the size of a vector

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);
  }
}
Tagged:

Answers

  • 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);
    
  • 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.

  • edited October 2015

    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?

  • 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.

Sign In or Register to comment.