Drawing a Smiley Face with p5.js

In this article, we will explore how to use the p5.js library to create a simple but charming drawing: a smiling face. p5.js is a JavaScript library that makes it easy to create interactive graphics and animations. It is ideal for artists, designers and developers who want to create code-based visual projects.

What is p5.js?

p5.js is a library aimed at making the world of visual programming accessible. It offers a set of functions that allow you to draw shapes, create animations, and interact with the user in a simple way. Although it is written in JavaScript, users do not need to be experts in this language to start creating eye-catching visuals.

Basic structure of a sketch in p5.js

A sketch in p5.js has two main functions:

1. setup(): Executed once at the beginning. This is where we initialize the canvas, set colors, and prepare any necessary elements.
2. draw(): Runs in a loop, frame by frame. Here we place the instructions that we want to repeat continuously (like an animation). In our case, we don't require an animation, so we'll leave it empty.

The project: a smiling face

The goal is to draw a smiling face using simple shapes: a large circle for the face, two smaller circles for the eyes, and an arc for the mouth.

Step 1: Create the canvas

The first thing we do is define the size of the canvas. In this case, we will use a size of 400x400 pixels and set a black background.

function setup() {
  createCanvas(400, 400);
  background(0); // Fondo negro
}

Step 2: Draw the face

The face is simply a big circle. To draw a circle in p5.js, we use the ellipse() function, which requires the coordinates of its center, and its width and height. In our case, we will draw the circle in the center of the canvas, with a diameter of 200 pixels.

stroke(255); // Color de línea blanco
strokeWeight(5); // Grosor de la línea
noFill(); // Sin relleno para el círculo
ellipse(200, 200, 200, 200); // Dibuja la cara

Step 3: Draw the eyes

The eyes are two small white circles. We can use the same ellipse() function, but this time we give them a white fill and place them slightly up and to the sides of the center of the face.

fill(255); // Relleno blanco para los ojos
noStroke(); // Sin borde para los ojos
ellipse(160, 170, 20, 20); // Ojo izquierdo
ellipse(240, 170, 20, 20); // Ojo derecho

Step 4: Draw the smile

Finally, for the smile we use the arc() function. This function allows you to draw an elliptical arc that, in this case, looks like a smile. We adjust the coordinates so that the curve is centered and looks like a mouth.

noFill(); // Sin relleno para la boca
stroke(255); // Líneas blancas de nuevo
arc(200, 220, 100, 80, 0, PI); // Dibuja la sonrisa

The complete code:

function setup() {
  createCanvas(400, 400);
  background(0); // Fondo negro

  stroke(255); // Color de línea blanco
  strokeWeight(5); // Grosor de la línea
  noFill(); // Sin relleno para el círculo

  // Dibuja la cara (un círculo grande)
  ellipse(200, 200, 200, 200);

  // Ojos (dos círculos pequeños)
  fill(255); // Relleno blanco para los ojos
  noStroke(); // Sin borde para los ojos
  ellipse(160, 170, 20, 20);
  ellipse(240, 170, 20, 20);

  // Boca sonriente
  noFill(); // Sin relleno para la boca
  stroke(255); // Líneas blancas de nuevo
  arc(200, 220, 100, 80, 0, PI); // Dibuja la sonrisa
}

function draw() {
  // No se requiere animación, por lo que dejamos el draw vacío
}

Conclusion

This simple example shows how, with a few lines of code, we can create attractive graphics using p5.js. Although this project is basic, the principles used here can be scaled to create much more complex and detailed visuals. If you want to experiment more, you can try resizing elements, adding color, or even making an animation in draw().

Go ahead and create your own version of this smiley face and explore what p5.js has to offer!