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.
Requirements:
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
Deliverables:
Post it on the openprocessing classroom with a proper title and a thumbnail image.
Grading criteria
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
Student Samples
https://openprocessing.org/sketch/1714152
https://openprocessing.org/sketch/1714211
https://openprocessing.org/sketch/35998
https://openprocessing.org/sketch/35922
https://openprocessing.org/sketch/1103539
https://openprocessing.org/sketch/35444
Part 1: Sketching in Illustrator
Drawing with code using primitives and coordinates can be daunting so we will sketch out our face in Illustrator first.
Set up
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
View>show 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
Create a non random palette. You can use a palette creator or a palette extraction tool or search random stuff here until you find a color scheme you like.
Try this esoteric palette creator.
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 this example showing the use of symmetry, vertex and curveVertex which can be very useful for this assignment.
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
Abstraction
Primary Shapes
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.
Colors
don’t pick colors at random
watch out for overtly saturated tones
try to limit your dominant colors.
Create a new based on common patterns with Kuler
You can steal color palettes from here
You can randomize a color scheme with this app
Create one from a picture with this tool
Color ramps
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.
Function
Characters are often designed assuming a narrative function. To function as protagonist in a tv series they have to support a range of poses and expressions.
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.
On cuteness
Cute characterization seems to appeal to people across generations and cultures
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.
Inspirations
Look for inspirations outside of pop culture you are already familiar with.
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
