Let's make a mini me! Using P5.JS to create a self portrait
This workshop is designed for youth to be introduced to coding fun visuals. This is the first of a series of workshops. People of all ages/knowledge levels are welcome to participate.
What will we be doing??
We are going to learn how to code some simple shapes to make a portrait. We will explain:
What is coding ??
What is P5.JS ??
What is “syntax” ??
Drawing a Circle !!
Drawing a Face!!
Having Fun!!!!!!
What is Coding?
Big question...
When we code, we create a set of instructions for the computer to follow. We can tell the computer to do things and to not do other things.
We can start by doing some "human" coding. Follow these instructions:
Put your left hand on your head
Slowly raise your right arm up and down
If your right hand is higher than your shoulder smile real big!
Nice job!!
What is P5.JS?
P5.JS is what we will be coding with today. It is part of the coding language JavaScript. It's really handy for making visuals and is super fun to use!!
Coding with p5.JS is pretty simple. The computer reads one line of code after another.
What is Syntax?
You might have heard that programming is like learning a language. And it is! JavaScript is a programming language.
Something that is the same between languages and coding is syntax. or grammar. Just like spoken languages, every programming language has its own syntax. The order and punctuation of a line matters. If the order is different, it might mean something else.
Don't worry! It sounds complicated but P5.JS syntax is simple and you won't have to remember anything.
Drawing a Circle!
We are going to start coding! We are going to draw a circle.
Let's look at the syntax for drawing a circle.
We need to write an x and y position for the circle. But how does that work?
How does placement work?
Your canvas is a grid of pixels. The upper left corner is 0 and x
increases the more right you go, and y
increases the more down.
width/2
for the x parameter and height/2
for our y parameter. width/2
is the total width of the canvas divided by two. height/2
is the total height of the canvas divided by two.Let's start by looking at the code template.
Find
function draw()
in the code template above.Within the curly brackets
{}
write circleThen a
(
write a number, maybe 170
Then a
,
write another number, maybe 150
Then a
,
write another number, maybe 60
Then a
)
Click "rerun" button at the bottom right
Drawing a Face!
We are going to draw our faces! This is called a self-portrait. If you don't want to draw yourself that is ok! You can draw a family members, friends, someone you think is cool or a made-up person's face.
You might be thinking " But I only know how to code a circle! How will I draw a face? " We are going to be using a template that you can customise. Keep in mind we aren't making anything super realistic, it will be more like a cartoon style.
Step One
Click this link. Make an account with the P5.JS editor so you can save your work!!
Step Two
Copy and paste the code block below.
var faceW
var faceL
function setup() {
createCanvas(400, 400);
rectMode(CENTER)
faceW = 270
faceL = 300
noStroke()
}
function draw() {
background('#607D8B');
//shirt
fill('#FFEB3B')
ellipse(width/2, height, 400, 150)
//neck
fill('#2196F3')
ellipse(width/2, height - 100, 100, 200)
//face
fill('#03A9F4')
ellipse(width/2, height/2, faceW, faceL)
//ear#03A9F4
ellipse(faceW/2 +width/2, height/2, 50)
ellipse((width/2) - faceW/2, height/2, 50)
//eyes
fill(255)
ellipse(120, height/2, 50)
ellipse(270, height/2, 50)
fill(0)
ellipse(110, height/2, 30)
ellipse(260, height/2, 30)
//nose
stroke('#FFEB3B')
strokeWeight(10)
line(width/2,height/2 + 30, width/2 + 15, height/2 + 30 )
noStroke()
//mouth
fill(0)
rect(width/2,height/2 + 100,70, 3)
}
function keyTyped() {
if (key === 's' || key === 'S') {
saveCanvas('myCanvas', 'jpg');
print("saving image");
}
return false;
}
Step Three
Customise!!! Let's change and add to the code to make your special drawing!
Here are some things we can do:
Eyebrows
We can add some eyebrows. This can really add some expression to your face.
Copy and paste this code
// eyebrows
fill(0)
ellipse(120, height/2 - 50, 50, 10)
ellipse(270, height/2 - 50, 50, 10)
You can try changing the length and width of the eyebrows by changing the last two numbers of the ellipse.
Eyes
We can change the style of the eyes. Here are two different ways to draw the eyes. Swap out each code block for the eye code block.
Style One:
fill(0)
ellipse(110, height/2, 20, 40)
ellipse(260, height/2, 20, 40)
Style Two:
//eyes
fill(255)
ellipse(120, height/2, 60, 40)
ellipse(270, height/2, 60, 40)
fill(0)
ellipse(110, height/2, 30)
ellipse(260, height/2, 30)
You can change the parameters around to make your eyes bigger or small, looking left or right.
Nose
The template nose is a little simple. This style has a bit more detail.
ellipse(width/2,height/2 +30, 30, 60)
ellipse(width/2 - 15, height/2 + 45, 20)
ellipse(width/2 + 15, height/2 + 45, 20)
Or try a triangle nose....
triangle(width/2 - 10, height/2 +40, width/2+ 10, height/2 - 40, width/2+ 20, height/2 + 40 )
Hair and Head Coverings
Short Hair:
Try copy and paste this code block.
var faceW
var faceL
function setup() {
createCanvas(400, 400);
rectMode(CENTER)
faceW = 270
faceL = 300
noStroke()
}
function draw() {
background('#607D8B');
//hair
fill(0)
circle(width/2, 150, 300)
//shirt
fill('#FFEB3B')
ellipse(width/2, height, 400, 150)
//neck
fill('#6C2DAD')
ellipse(width/2, height - 100, 100, 200)
//face
fill('#6C2DAD')
ellipse(width/2, height/2, faceW, faceL)
//hair again
fill(0)
ellipse(width/2, 100, 300, 100)
//ear#03A9F4
fill('#6C2DAD')
ellipse(faceW/2 +width/2, height/2, 50)
ellipse((width/2) - faceW/2, height/2, 50)
//eyes
fill(255)
ellipse(120, height/2, 60, 40)
ellipse(270, height/2, 60, 40)
fill(0)
ellipse(110, height/2, 30)
ellipse(260, height/2, 30)
//nose
stroke('#FFEB3B')
strokeWeight(10)
line(width/2,height/2 + 30, width/2 + 15, height/2 + 30 )
noStroke()
//mouth
fill(0)
rect(width/2,height/2 + 100,70, 3)
}
function keyTyped() {
if (key === 's' || key === 'S') {
saveCanvas('myCanvas', 'jpg');
print("saving image");
}
return false;
}
Hijab:
var faceW
var faceL
function setup() {
createCanvas(400, 400);
rectMode(CENTER)
faceW = 270
faceL = 300
noStroke()
}
function draw() {
background('#607D8B');
//hair
circle(width/2,250,300)
//hair
fill(0)
circle(width/2, 150, 300)
//shirt
fill(0)
ellipse(width/2, height, 400, 150)
//face
fill('#FDE5CA')
ellipse(width/2, height/2, faceW, faceL)
//cover
fill(0)
ellipse(width/2, 90, 260, 80)
rect(90, 100, 40)
rect(300, 100, 40)
fill('#FDE5CA')
ellipse(width/2,120,228,20)
//eyes
fill(255)
ellipse(120, height/2, 50)
ellipse(270, height/2, 50)
fill(0)
ellipse(110, height/2, 30)
ellipse(260, height/2, 30)
//nose
stroke('#F1D6BC')
strokeWeight(10)
line(width/2,height/2 + 30, width/2 + 15, height/2 + 30 )
noStroke()
//mouth
fill(0)
arc(width/2, height/2 + 90 , 40, 40, 0, PI + QUARTER_PI, CHORD);
// eyebrows
fill(0)
ellipse(120, height/2 - 50, 50, 10)
ellipse(270, height/2 - 50, 50, 10)
}