Desenhando uma carinha sorridente com p5.js

Neste artigo, exploraremos como usar a biblioteca p5.js para criar um desenho simples, mas charmoso: um rosto sorridente. p5.js é uma biblioteca JavaScript que facilita a criação de gráficos e animações interativos. É ideal para artistas, designers e desenvolvedores que desejam criar projetos visuais baseados em código.

O que é p5.js?

p5.js é uma biblioteca que visa tornar acessível o mundo da programação visual. Oferece um conjunto de funções que permitem desenhar formas, criar animações e interagir com o usuário de forma simples. Embora seja escrito em JavaScript, os usuários não precisam ser especialistas nessa linguagem para começar a criar recursos visuais atraentes.

Estrutura básica de um esboço em p5.js

Um esboço em p5.js tem duas funções principais:

1. setup(): Executado uma vez no início. É aqui que inicializamos a tela, definimos as cores e preparamos todos os elementos necessários.
2. draw(): É executado em loop, quadro a quadro. Aqui colocamos as instruções que queremos repetir continuamente (como uma animação). No nosso caso, não precisamos de animação, então deixaremos em branco.

O projeto: um rosto sorridente

O objetivo é desenhar um rosto sorridente usando formas simples: um círculo grande para o rosto, dois círculos menores para os olhos e um arco para a boca.

Etapa 1: crie a tela

A primeira coisa que fazemos é definir o tamanho da tela. Neste caso, usaremos um tamanho de 400x400 pixels e definiremos um fundo preto.

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

Etapa 2: desenhe o rosto

O rosto é simplesmente um grande círculo. Para desenhar um círculo em p5.js, usamos a função ellipse(), que requer as coordenadas de seu centro, largura e altura. No nosso caso, desenharemos o círculo no centro da tela, com diâmetro de 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

Etapa 3: desenhe os olhos

Os olhos são dois pequenos círculos brancos. Podemos usar a mesma função ellipse(), mas desta vez damos a eles um preenchimento branco e os posicionamos levemente para cima e para os lados do centro do rosto.

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

Etapa 4: desenhe o sorriso

Finalmente, para o sorriso usamos a função arc(). Esta função permite desenhar um arco elíptico que, neste caso, parece um sorriso. Ajustamos as coordenadas para que a curva fique centralizada e pareça uma boca.

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

O código completo:

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
}

Conclusão

Este exemplo simples mostra como, com algumas linhas de código, podemos criar gráficos atraentes usando p5.js. Embora este projeto seja básico, os princípios usados ​​aqui podem ser dimensionados para criar visuais muito mais complexos e detalhados. Se quiser experimentar mais, você pode tentar redimensionar elementos, adicionar cor ou até mesmo fazer uma animação em draw().

Vá em frente e crie sua própria versão deste rosto sorridente e explore o que p5.js tem a oferecer!