Week Two Documentation

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.

Screen Shot 2018-09-16 at 2.53.12 PM.png

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.

Screen Shot 2018-09-15 at 1.14.04 PM.png

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.

Screen Shot 2018-09-16 at 12.58.18 PM.png

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.

Screen Shot 2018-09-17 at 9.10.36 AM.png

Good dog.