paperjs mouse following within the bounds of another object - mouseevent

Question

I have an eye in paperjs, I would like the pupil to follow the mouse but I do not want it to leave the boundary of the outer eye. I have seen this done using Jquery(JQuery follow mouse curser within in a div centered on page), but don't understand how to implement this using paperjs. I have been using the paperjs example sited on their examples page;
http://paperjs.org/reference/tool/#onmousemove
Any idea how I can implement this in paperjs? anything helps :)!!

Answer 1

If your eye is a circle and your pupil too, a simple way to do that would be to contrain the pupil position by calculating its distance from the eye center.
That distance must be shorter than eye radius minus pupil radius.
Here is a sketch demonstrating this idea.
// user defined constants
var EYE_RADIUS = 50;
var PUPIL_RADIUS = 10;
// calculate max vector length
var MAX_VECTOR_LENGTH = EYE_RADIUS - PUPIL_RADIUS;
// draw a circle for the eye
var eye = new Path.Circle({
center: view.center,
radius: EYE_RADIUS,
strokeColor: 'black'
});
// draw a circle for the pupil
var pupil = new Path.Circle({
center: view.center,
radius: PUPIL_RADIUS,
fillColor: 'black'
});
// on mouse move
function onMouseMove(event) {
// calculate vector from eye to pointer
var vector = event.point - eye.position;
// constrain it to stay inside the eye
if (vector.length > MAX_VECTOR_LENGTH) {
vector = vector.normalize(MAX_VECTOR_LENGTH);
}
// update pupil position
pupil.position = eye.position + vector;
}