Draw a stylized “monster” face with code. It has to be a “portrait” of your teammate, aiming to capture an aspect of their personality, interests, or biography. Don’t try to be literal, you only have simple shapes!
Discuss the approach with your teammate. Consider them the commissioner of the portrait.
Use at least 20 primitives.
Use a canvas of 800 x 800 pixels.
Use 5 colors or less.
Make it front view and centered, not profile, like the examples above. This will matter later when we animate it.
Post the Illustrator image first.
It must be an original character, not an Intellectual Property
Post it on the openprocessing classroom with a proper title and a thumbnail image.
It runs without errors
It is not a variation of the basic example
You understand what’s going on, you can explain the code
It has an intentional aesthetic: color, characterization, and composition are not random
It’s an original character
The character has a personality and expressiveness
Sketching in Illustrator
Drawing with primitives and coordinates can be daunting so we will sketch out our face in Illustrator first.
Create a document of 800×800 pixels
Edit > Preferences > guides and grids. I recommend a gridline every 100 points with 10 subdivisions..
View>snap to grid
Window>info dock the panel somewhere so you can see your coordinates
Try to draw the oval and the main shapes using ellipses, and rectangles with rounded corners without stroke.
Without outlines you can create complex shapes by layering simple ones of the same color.
Do not rotate shapes because rotating in p5 is annoying.
Conversely, you can use lines, arcs and curves to create details like mouths, eyebrows, etc
Remember that thick lines can be used as shapes. You can change the caps with strokeCaps
You can try Illustrator’s “curvature tool”, which is similar to p5 curveVertex, see the examples below
Live symmetry is weirdly hard to set up in Illustrator but you can do it by following this tutorial
Check out faces-in-things pictures for inspiration beyond pop culture.
You can try to make it express one of the following emotions: anger, disgust, fear, happiness, sadness, surprise.
(Anger, disgust, fear, happiness, sadness and surprise are the basic emotions identified by Paul Ekman. You can read about this model’s issues and its problematic relationship with Silicon Valley in this review of Inside Out and in this article here).
You can arrange elements to the front and to the back using
⌘ Control + [
⌘ Control + ]
When you are done sketching you can start translating it to p5
Advanced-ish: Complex Shapes, rotation, and symmetry
Check out this example that shows how to draw objects on two sides of a symmetry axis and how to rotate one or more shapes.
Notes on character design
Cute and stylized designs are not a modern phenomenon
Iconic characters can be reduced to very simple shapes.
Posture and shape can do a lot to convey the character personality.
In creating cartoon characters you’ll have to deal with cliches and stereotypes.
The exaggeration of features risks reinscribing traditional notions of gender but there is plenty of room to play and subvert expectations.
Exaggeration and stylization
The famous case of sexual dimorphism in Disney characters. Can you make a fun cartoon caricature without hypemasculizing or hyperfeminizing the bodies? A thread with interesting images here.
What are the features that make your character instantly recognizable?
In action videogames silhouette recognizability is important to reduce the cognitive load of the player, but even outside of games try to see if your characters “read” as silhouette.
Mostly used in pixel art but can it be applied in illustration and anywhere. Mind that there is no fixed system to create ramps and palettes, but it’s a good idea to familiarize with the practice of hue shifting:
You can generate a color ramp one from a picture with this tool
There are plenty of tutorials and debates on the internet on how to properly create color ramps but it’s a common practice to make sure the ramps are interlocking, so you can have more harmonious edges or tinted outlines that work with different colors.
However not all characters need that kind of flexibility:
Gudetama, the Sanrio character embodying laziness and burnout, become unexpectedly relatable to millenials.
One note character appropriate for toys and gadgets, not so much for long form narrative.
*Anger, disgust, fear, happiness, sadness and surprise are the basic emotions identified by Paul Ekman. You can read about this model’s issues and its problematic relationship with Silicon Valley in this review of Inside Out and in this article here.
Yet body, movements, and a few elements like eyebrows can be enough to convey an emotional state:
Infantile features trigger nurturing response in humans (evolutionary thing to make us care for our offspring) which spills over other species and representations.
Cuteness is not the end goal nor the default, see it as a tool, don’t limit your range.
Look for inspirations outside of pop culture you are already familiar with.
Exercise: Face from a thing.
What would this character say/want/sing/complain about/advocate for? What’s their Myers-Briggs type (cw pseudoscience)?
Lots of things-with-faces social media accounts
Pictoplasma – the main character design conference has a great showcase
Picasso-inspired design in Wendell and Wild (Picasso borrowing from African art)
Rupaul and candies as unlikely inspirations for monument valley levels