Faces

In this page I will explain how to draw a simple face with p5.js (using simple geometric figures) and which interactions we will do with the face.

How to draw a face

To draw a face, first we have to know some basic things, if you don't know how to program in p5.js, you can learn at this webstie (p5.js official tutorial).

Once we know this basic things we can start drawing the face. We will draw it by using ellipses (to draw the eyes and the outline of the face), triangles(to draw the nose) and arcs (to draw the mouth).

1. First, we declare a variable d that will be the diameter of the ellipse(that will draw the outline of the face)
2. Then, we will create the canvas, createCanvas(), were we will draw the face( we will create it in the function setup())
3. Once the canvas is created, we start drawing the outline of the face, by using ellipse().
4. The next thing that we will do will be draw the eyes, by using ellipse()
5. When all this is done (both eyes and the outline of the face), we proceed to draw the nose, by using triangle().
6. To finish drawing the face, we draw the mouth, by using arc().
7. Once we have finished drawing the face, we can color the face just putting fill() just before declaring the zone that we want to color.

    var d = 100; //ball diameter
    function setup(){
      createCanvas(windowWidth, 400);
    }

    function draw(){
	    background(0,0,0,0); //transparent
      //draw face
	    fill('#FCD0B4');
	    ellipse(windowWidth/2,200,d,d);
      //draw eyes
	    fill(0,0,255);
	    ellipse(windowWidth/2-d/6,200-d/7,d/5,d/5);
	    ellipse(windowWidth/2+d/6,200-d/7,d/5,d/5);
    	fill(255,0,0,100);
    	triangle(windowWidth/2, 200-d/20, windowWidth/2+d/12, 200+d/7, windowWidth/2-d/12, 200+d/7);

      //draw mouth
	    fill(255,0,0);
	arc(windowWidth/2,200+d/4,d/2.5,d/4.5,0,PI,CHORD);
	}