I was inspired by some of the more complex drawings I saw last week in class, and I really hoped to be able to push myself with what I could draw in code as well as the reactivity required for the assignment. I decided that this rough sketch could be a good starting point for something interesting.
So, I took some of the ideas for the original drawing and transferred them onto a grid.
Ok, that’s still a pretty complex thing to draw in code, but let’s see if I can do it. The eyes would follow the mouse as it tracked across the screen, and they would be looking at something new every time the code was run. I started by taking some of the connected arcs that I had used in my last project and started to draw a chin.
That’s obviously not the most impressive thing in the world, but I would get back to it. I decided that I should probably figure out how the eyes would work before diving in too deep on the drawing.
So I started up a new sketch just to test out eyes. First I created a circle to serve as the socket, and a smaller circle to serve as the pupil. I created some conditional parameters so that if the mouse was directly over the eye, the pupil would follow under the mouse directly, otherwise I had the pupil follow the mouse on a scale that reflected the dimensions of the eye socket.
Well, obviously that leaves something to be desired. Pupils don’t fly out of their sockets. So this pupil shouldn’t be bound in by a rectangle, it should be bound in by a circle. Time to bust out some good old-fashioned high school trigonometry.
After much staring in confusion at the unit circle I had just drawn, the formula I came up with was -
X = cos( tan-1 (Y / X) )
Y = sin( tan-1 (Y / X) )
Which looks simple now that I’m writing it but it took me the better part of a day to figure it out. Even then, it only worked with the mouse on one half of the screen, so I had to add in a conditional statement to reverse it whenever the mouse was on the other side.
By the time I got the eyeball thing working I had realized that I wasn’t going to be able to build this functionality and create a complex drawing in time, so I made the choice to cut my losses and focus on adding new things to the sketch I made last week.
First things first, replace my old eyes with the fancy new eyes I had just written.
Obviously, there were some major kinks that needed to get worked out when transferring the new eyes to a new system. Additionally, when I first put the eyes in, her head didn’t move along with the eyes. It turns out that when a dog’s eyes follow you but her head remains completely still, the overall effect is a little unsettling. She’s not really playing with you so much as she’s creepily staring at you. So I realized that the head needed to move a little bit too as her eyes moved. And as long as we’re going down this road, I had her snout move a little more than the rest of her face to give her an illusion of three-dimensionality.
For final touches, I had her tongue drop down at the start of the program, and I made a ball follow the cursor whose hue value was randomly selected every time the program was run.