Рубрики
Без рубрики

Начало работы с p5.js

Эти статьи дают вам нежное введение в P5.js, которое является общего назначения и веселья для использования графической и анимационной библиотеки.

Автор оригинала: Humayun Shabbir.

Что это?

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

Как это использовать?

Примечание: Чтобы получить максимум из этой статьи, вам нужно базовое понимание JavaScript.

Есть несколько способов начать с ним. Вы можете даже попробовать его онлайн, используя P5.js Веб-редактор Отказ

https://editor.p5js.org/

Другой вариант – это скачать p5.js Библиотека JavaScript и включите его на вашу веб-страницу. Вы можете найти ссылку для скачивания ниже.

https://p5js.org/download/

Примеры

Так что теперь мы знаем, как бежать p5.js код, давайте сосредоточимся на некоторых простых примерах, чтобы увидеть, что p5.js Должен предложить и насколько легко это сделать.

Простой пример

Вот базовый шаблон для начала начала. Нам понадобятся эти 2 функции для создания простого эскиза, и эти функции являются Настройка и рисовать Отказ Цель Настройка Запускается этот код один раз при запуске, а рисовать Функция выполняется для каждого кадра.

function setup() {
  createCanvas(760, 300);
}

function draw() {
  background(220);
}

Вот вывод для вышеуказанного кода.

P5-Simple-yump.png

Пример форм

Теперь давайте попробуем что-то более интересное. (Этот код взят из Формы демонстрации )

function setup() {
  // Create the canvas
  createCanvas(760, 300);
  background(200);

  // Set colors
  fill(204, 101, 192, 127);
  stroke(127, 63, 120);

  // A rectangle
  rect(40, 120, 120, 40);
  // An ellipse
  ellipse(240, 240, 80, 80);
  // A triangle
  triangle(300, 100, 320, 100, 310, 80);

  // A design for a simple flower
  translate(580, 200);
  noStroke();
  for (let i = 0; i < 10; i ++) {
    ellipse(0, 30, 20, 80);
    rotate(PI/5);
  }
}

Вот выход, мы видим ваш пользовательский фон и формы.

P5-Drawing.png.

Цвет пример Давайте посмотрим, как работать с цветами в этом простом примере. Я использую заполнить Функция для установки цветов заполнения форм.

function setup() {
  createCanvas(760, 300);
}

function draw() {
  background(220);
  
  fill(255, 0, 0);
  rect(10,100,50,50);
  
  fill(0, 255, 0);
  rect(70,100,50,50);
  
  fill(0, 0, 255);
  rect(130,100,50,50);
}
P5-Color-example.png

Текстовый пример Вот наш текст пример. Простой текстовый вывод, но с использованием графики.

function setup() {
  createCanvas(760, 300);
}
function draw() {
  background(220);  
  translate(width/2, height/2);
  fill(237, 34, 93);  
  textSize(48);
  textAlign(CENTER, CENTER);
  text('Hello, World!', 0, 0)
}

Вот вывод.

P5-Text.png.png.

3D пример p5.js Также поддерживает 3D-графику с помощью WebGL. Вот простая демо, чтобы увидеть, как это работает.

function setup() {
  createCanvas(760, 300, WEBGL);
}

function draw() {
  background(220);
  normalMaterial();
  rotateX(100);
  rotateY(100);
  box(100, 100, 100);
}

Выход

P5-3D.PNG.

Окончательные слова

Так что к этому вопросу вы видели, что p5.js Должен предложить и насколько легко настроить и начать. p5.js Предоставляет всем необходимым инструментам, чтобы с легкостью построить графические приложения. Как только основы будут заботиться, то пользователь должен сделать там идеи прийти к жизни.

p5.js Также есть поддержка аудио/видео, событий ввода (мышь, клавиатура, мобильные поддержанные события, такие как Touch и Tilt), и анимация. Те, кто не распространяется в этой статье, потому что моя цель состояла в том, чтобы сосредоточиться на абсолютных основаниях для легкого понимания.

Вот некоторые полезные ресурсы для дальнейшего изучения.

P5.JS Ссылка P5.JS Примеры P5.Sound Библиотека

Я надеюсь, что это было полезно. С нетерпением ждем ваших комментариев и творений. Счастливое кодирование!

Читайте ещё по теме: