Tutorial - How to create masks

This tutorial is a part of the creative coding class for COD 208 course at Ozyegin University.

Let's start by creating variables for facial features
- Line 0-30
- Line 34: colors array for the mask
- Head background -> line 43-53
Create eyes using symmetry;
- Left eye -> line 57-63
- For the right eye we can keep the y position.
- For the symmetry of the eye, we need to make some calculation as follows;
to create the symmetric position of the right eye;
we must start from the x position of head (xh) + width of the head (headW) - distance to head side (35)
To draw the nose;
- Calculate the center point of the head -> line 72-80
- Between beginShape() - endShape() lines, we add points to draw a triangle
- Right now the nose appears on the top-left corner of the canvas.
- We can move it using translate()
We use translate() function with push() and pop() methods.
Draw mouth;
- To craw mouth we can use variety of techniques.
- Let's use beginShape() and endShape() to create the mouth
- First create the points to form the mouth
- You can use small circle in order to determine the specific curve positions via trial-error practice...
- line 94-103
- Attention to the x and y position of each points.
- I want to create a curve that looks like a wave.
- Next we will disable the lines between 98-103. Because we know the parameters to draw curve for the mouth
- Comment out the lines 98-103
- set color and disable fill -> line 105
- add beginShape() to start drawing points into custom shape -> line 106
- to draw curves with shapes, we need to use curveVertex() function. There is just a point you need to be careful about it. The first and the last points must be duplicated in order to make curcVErtex work properly. Do not ask why? Just take it as a rule. If you are curious we can discuss the issue in class time. (ref. reference | curveVertex() (p5js.org))
- Let's make the code looks cleaner
- To do that cut the line-> 46-52 into custom function. Mine is called drawHead()
- It will be outside of the draw() function
- check lines - 45
- There is function that is cited in the previous page.
- Goto line 113
- All the codes that draw the head are inside the drawHead() function now.
- Let's create custom function for each face element
Now we can work on the style and get benefit from randomness to create variations of the existing attributes.

Try to determine min-max values that can change....

Let's move the mask into the center of the canvas.
To do that we can use push, translate, and pop methods again to move all parts of the mash without editing individual x and y positions of each variable.
line 44- push()
line 45- translate to the middle of the screen
line57- pop()
- Since the pivot point is on the top left, the shape group doesn't seem to be in the middle.
- By subtracting the half of the with and height from half of the canvas width and height, we can perfectly position the mask into the middle of the screen.
Let's apply some randomness

1/12

mySketch

xxxxxxxxxx
 
// Head variables
let headW=150;
let headH=200;
let xh = 0;
let yh = 0;
​
// Eyes variables
let ye;
let xe;
let we;
let he;
​
​
// Ears variables
let xEar;
let yEar;
let wEar;
let hEar;
​
// Nose variables
let xn;
let yn;
let wn;
let hn;
​
// Mouth variables
let xm;
let ym;
let wm;
let hm;
​
​
// Array to hold colors
let colors = ["
#5AAA95", "
#087F8C", "
#095256", "
#86A873", "
#BB9F06"]
​
function setup() {
  createCanvas(600, 600);
  background(255);
  noLoop();
}
​
function draw() {
  noStroke();
  
  // Draw head
  // fill the rect with the first color by setting index 0
  fill(colors[0]);
  // With additional 4 parameters
  // 40:set roundness of the top-left corner of the rect
  // 40:set roundness of the top-right corner of the rect
  // 70:set roundness of the bottom-right corner of the rect
  // 70:set roundness of the bottom-left corner of the rect
  rect(xh, yh, headW, headH, 40, 40, 70, 70);
}
​
​