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!!

🖐

Try coming up with your own "human" coding instructions. You can try with a friend to do your instructions and then swap and try their instructions.

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.

💡

TIP! A trick to make our circle be in the centre is to write 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.

✍

Let's code our circle!!

Find function draw() in the code template above.
Within the curly brackets {} write circle
Then 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)


}

Let's make a mini me! Using P5.JS to create a self portrait