[icm wk 1] Screen drawing, how computation applies to me

For the screen drawing assignment, I have this incredible urge to draw the Cookie Monster from Sesame Street. With decent knowledge of 2D primitive shapes, I want to create an opportunity to learn to make organic and fluid outlines.

reference vs. bad sketch on a post-it note

I used photoshop to coordinate colors. It’s also a good way to find their RGB values.

One thing I now regret is not mapping out the entire picture in advance in Photoshop, which created a lot of difficulties for creating custom shapes with curve, when I just guessed each point’s positions. I was excited to start and jumped right into p5 editor to tackle head and eyes using ellipses.

The mouth was broken down into the upper lip (curve) and the… mouth hole (arc with black fill).  The arc was conveniently a half circle filled in with black color, but with the curve I used a method showed in the p5 reference page  to connect 5 points into a smiling shape by pre-defining the points.

In order to create an organic shape for the body, I looked up a Coding Train video on custom shapes, and learned about the curveVertex function. Similar question was raised during ICM help session and Yuguang was very kind to walk us through it as well.

After figuring out the mouth and body shapes, making the cookie (big ellipse + multiple small ellipses) and the hand (big curve + medium curve + small curve) gets less daunting to tackle. 

Further experimentation with outlines made me realize that “noStroke();” only need to be applied once for the following shapes to be fill only. I couldn’t get the body outline to look like what I wish to see, as they were made up of five shapes (head, body, arm, thumb, hand). I wonder if there’s a function to not outline the overlaid parts? 

In this modification, I also made his eyes responsive to mouse movements, with two eyes rolling opposite directions.

Almost done! Cookie monster is fluffy, so I want to at least try and put a bit of fur on his upper lip. I decided to use curveVertex again, filled in the blue color and overlaid on top of the mouth arc.

This time I used photoshop to find out starting and ending points for each piece of “fur”, and writing the curves in p5 became immensely easier.

After slight modification, it’s done!

View the final drawing here 

How Computation Applies to my Interest

I have found myself to be a structure-drive person. Coming from a liberal arts academic background, I often have an urge to define concepts, categorize schools of thoughts, philosophize ideas and self-diagnose my feelings. As a growing jazz dancer, however, the idea of improvisation, to dance around constraints, and to have a tune, a structure to break away from, is an exciting yet uncomfortable exploration from my natural instinct to “build” instead of “tear apart”. 

Though haven’t much experience in computation works, I’ve always been intrigued by generative art, algorithm art, and other digital methodologies for their exact intricate relationships between structural beauty and arbitrary surprises. 

Leave a Reply

Your email address will not be published. Required fields are marked *