Week 1: Self Portrait – hello kitty

Your concept

My concept was this meme/image of a crying Hello Kitty with the caption “*sniff* I’m sorry for being stupid”. I love how cute this image is and I’ve been using it in my messages to friends a lot, so I’ve been associated with it in the past few days. I thought it would be fun to make an interactive version of this for my self-portrait.

As it needed to somewhat look like me, and I don’t look like Hello Kitty, I added a pair of round sunglasses that I’ve been wearing in class because of my eye infection.

A highlight of some code that you’re particularly proud of

There isn’t anything functionality-wise that I was too proud of, but the most difficult part about this sketch was drawing Hello Kitty’s face. Using boxes/lines would lose the cuteness appeal of it, so I learned how to draw using bezier curves. It reminded me of Photoshop’s Pen tool, except with written coordinates instead of being able to smoothly adjust the control points.

I’m really proud of how clean and polished the final product looks, as bezier curves look much better over simple geometric shapes. Though it took way more time to draw each curve to my liking.

// face
fill(255)
// bezier(x1, y1, cpx1, cpy1, cpx2, cpy2, x2, y2);
beginShape()
vertex(118, 75)
bezierVertex(65, 45, 55, 55, 65, 114); // left ear
bezierVertex(13, 262, 136, 262, 200, 263); // left face
bezierVertex(264, 262, 387, 262, 335, 114); // right face
bezierVertex(345, 55, 335, 45, 282, 75); // right ear
bezierVertex(225, 63, 175, 63, 118, 75); // top head

Curves needed to draw Hello Kitty’s face

Embedded sketch

Click to make her cry! 🙁

Reflection and ideas for future work or improvements

I could’ve possibly added more animations, such as waving hands during the crying animation state, but I wrote my draw() functions in a bad way so to add animations to certain elements would take a lot of rewriting. My lesson learnt is to plan out the details of what I want to make ( final outcome ), so I don’t have to rewrite code when I later think of new features later on.