Eyes

example processing oop

This code uses instances of the PVector class (and the handy functions inside that class) to draw two eyes that follow the mouse. Creepy! :eyes: :ghost:

PVector leftEye;
PVector rightEye;

void setup(){
	size(200, 100);
	leftEye = new PVector(width*.25, height*.5);
	rightEye = new PVector(width*.75, height*.5);
}

void draw(){
	background(200);

	PVector mouseVector = new PVector(mouseX, mouseY);

	PVector leftPupil = leftEye.copy().add(mouseVector.copy().sub(leftEye).setMag(10));
	PVector rightPupil = rightEye.copy().add(mouseVector.copy().sub(rightEye).setMag(10));

	fill(255);
	ellipse(leftEye.x, leftEye.y, 50, 50);
	ellipse(rightEye.x, rightEye.y, 50, 50);

	fill(0);
	ellipse(leftPupil.x, leftPupil.y, 20, 20);
	ellipse(rightPupil.x, rightPupil.y, 20, 20);
}

eyes following mouse

We are doing a lot with just a couple lines of code, so let’s break that down into smaller steps. Take this line:

PVector leftPupil = leftEye.copy().add(mouseVector.copy().sub(leftEye).setMag(10));

This line can be broken up into its individual steps, that way we can better see what’s going on:

//copy the left eye so we don't change where we draw it when we call add()
PVector copyOfLeftEye = leftEye.copy();

//copy the mouseVector so we don't change it when we call sub()
PVector copyOfMouseVector = mouseVector.copy();

//subtract leftEye from copyOfMouseVector to get the direction to look
PVector difference = copyOfMouseVector.sub(leftEye);

//set the magnitude of the difference so the pupil doesn't go outside the eye
PVector scaledDifference = difference.setMag(10);

//add the scaledDifference to copyOfLeftEye so the pupil is centered around the eye
PVector leftPupil = copyOfLeftEye.add(scaledDifference);

eyes following mouse

eyes following mouse

eyes following mouse

Tweak Ideas

Go back up