Рисование смайлика с помощью p5.js

В этой статье мы рассмотрим, как использовать библиотеку p5.js для создания простого, но очаровательного рисунка: улыбающегося лица. p5.js — это библиотека JavaScript, которая позволяет легко создавать интерактивную графику и анимацию. Он идеально подходит для художников, дизайнеров и разработчиков, которые хотят создавать визуальные проекты на основе кода.

Что такое p5.js?

p5.js — это библиотека, призванная сделать мир визуального программирования доступным. Он предлагает набор функций, которые позволяют рисовать фигуры, создавать анимацию и простым способом взаимодействовать с пользователем. Хотя он написан на JavaScript, пользователям не обязательно быть экспертами в этом языке, чтобы начать создавать привлекательные визуальные эффекты.

Базовая структура эскиза в p5.js

Эскиз в p5.js имеет две основные функции:

1. setup(): выполняется один раз в начале. Здесь мы инициализируем холст, устанавливаем цвета и подготавливаем все необходимые элементы.
2. draw(): выполняется в цикле, кадр за кадром. Здесь мы размещаем инструкции, которые хотим повторять непрерывно (например, анимацию). В нашем случае анимация не требуется, поэтому оставим ее пустой.

Проект: улыбающееся лицо

Цель — нарисовать улыбающееся лицо, используя простые формы: большой круг для лица, два круга поменьше для глаз и дугу для рта.

Шаг 1: Создайте холст

Первое, что мы делаем, это определяем размер холста. В данном случае мы будем использовать размер 400x400 пикселей и установим черный фон.

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

Шаг 2: Нарисуйте лицо

Лицо представляет собой просто большой круг. Чтобы нарисовать круг в p5.js, мы используем функцию ellipse(), которой требуются координаты его центра, а также ширина и высота. В нашем случае мы нарисуем круг в центре холста диаметром 200 пикселей.

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

Шаг 3: Нарисуйте глаза

Глаза — два маленьких белых кружочка. Мы можем использовать ту же функцию ellipse(), но на этот раз мы задаем им белую заливку и размещаем немного вверх и по бокам от центра лица.

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

Шаг 4: Нарисуйте улыбку

Наконец, для улыбки мы используем функцию arc(). Эта функция позволяет нарисовать эллиптическую дугу, которая в данном случае выглядит как улыбка. Настраиваем координаты так, чтобы кривая располагалась по центру и выглядела как рот.

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

Полный код:

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
}

Заключение

Этот простой пример показывает, как с помощью нескольких строк кода мы можем создать привлекательную графику с помощью p5.js. Хотя этот проект является базовым, используемые здесь принципы можно масштабировать для создания гораздо более сложных и детальных визуальных эффектов. Если вы хотите больше поэкспериментировать, вы можете попробовать изменить размер элементов, добавить цвет или даже создать анимацию в draw().

Создайте свою собственную версию этого смайлика и изучите возможности p5.js!