Advertisement
  1. Code
  2. JavaScript

Введение в p5.js

Scroll to top
Read Time: 8 min

Russian (Pусский) translation by Andrey Rybin (you can also view the original English article)

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

В основе библиотеки лежи язык Processing, который позиционируется как "гибкий программный скетчбук". Processing был создан в 2001 году, с целью научить непрограммистов коду, но после он стал языком, к использованию которого прибегают тысячи артистов, дизайнеров и студентов.

Тем не менее, p5.js, имеет несколько иное предназначение. р5 переносит силу и простоту Processing  в интернет. В этом уроке вы узнаете как создать вашу первую работу "sketch" с помощью р5, а так же узнаете, что интересного вы можете создать с его помощью.

Начало

Поскольку р5 разработан для веб, то нам нужна веб-страница. Создайте на компьютере новую папку, а внутри нее, создайте файл index.html. В нем писать много не придется, только основные стандартные моменты.

1
<!doctype html>
2
<html>
3
    <head>
4
        <meta charset="utf-8">
5
        <title>My first p5 sketch</title>
6
    </head>
7
    <body>
8
        
9
    </body>
10
</html>

Далее, нам понадобится, собственно, сама библиотека р5, которую мы можем скачать на соответствующей странице сайта. Нам понадобится базовая библиотека, поэтому загрузите версию с одним файлом р5.

The Single Version of p5The Single Version of p5The Single Version of p5

Поместите загруженный файл в ту же дирректорию, где лежит, созданный нами HTML. Мы можем прописать ссылку на библиотеку в HTML файле, следующим образом:

1
<!doctype html>
2
<html>
3
    <head>
4
        <meta charset="utf-8">
5
        <title>My first p5 sketch</title>
6
    </head>
7
    <body>
8
        <script src="p5.js"></script>
9
    </body>
10
</html>

Нам так же нужно создать JavaScrip файл для нашего sketch. Sketch - это термин, который перешл сюда из Processing, файл для создания рисунка или анимации. Создайте еще один файл в той же дирректории, и назовите его my-first-sketch.js. Ссылку на на него, нужно дать после ссылки на р5, чтобы наш файл, уже знал о функциях, из р5, к которым мы обращемся.

1
<body>
2
    <script src="p5.js"></script>
3
    <script src="my-first-sketch.js"></script>
4
</body>

Теперь у нас все готово! Теперь мы можем создавать нашу работу.

Ключевые Концепции

р5 предоставляет на два метода, которые очень важно понимать при создании скетча: setup() и draw(). Возможно вы догадаетесь, для чего предназначен каждый из них, но они имеют важное скрытое различие. Откройте файл my-first-sketch.js и добавьте в него следующие строки кода:

1
// Setup code

2
function setup () {
3
    console.log('Hi from setup!');
4
}
5
6
// Drawing code

7
function draw () {
8
    console.log('Hi from draw!');
9
}

Теперь, хотя мы только определили эти функции и больше ничего не сделали, что необходимо для р5, он автоматически запустит их, когда мы загрузим страницу. Откройте ваш index.html в вашем любимо браузере, а в нем откройте консоль JavaScript. Вот, что мы видим:

The JavaScript Console

Как вы можете видеть, обе функции были вызваны автоматически, но функция setup(), была вызвана один раз, в то время как draw(), вызывалась снова и снова - 768 раз всего за несколько секунд. Мы поймем, почему это так важно позже.

Ок, чтобы начать, нам нужно то же, что и любому другому художнику - холст. Мы должны использовать функцию р5 - createCanvas() и задать в ней аргументы в виде ширины и высоты. Где мы должны вызывать эту функцию? Конечно в setup();

1
function setup () {
2
    // Create a canvas 200px wide and 200px tall

3
    createCanvas(200, 200);
4
}

Если вы обновите вашу страницу, вы не увидите ничего нового. Потому что по умолчанию холст - прозрачный. Давайте добавим ему немного цвета. Как на счет красного? Вставим эту строчку так же в setup().

1
background('red');

р5 вполне сможет разобраться, какое мы будем использовать  название для цвета - имя, как в HTML или шестнадцатиричный код, мы зададим background('#FF0000') .

Фигуры

Давайте начнем рисовать. В нашем распоряжении имеется несколько определенных фигур. Давайте начнем с простого прямоугольника. В нашей функции draw, мы можем написать следующее. Запомните, все координаты начинаются с (0,0), который расположен в верхнем левом углу холста.

1
function draw () {
2
    rect(0, 0, 50, 50);
3
}

Если вы обновите свою страницу, то вы увидите его: прямоугольник, который начинается с координаты (0,0), и который имеет 50 рх в ширину и 50 рх в высоту (квадрат).

Red Square

Мы можем залить его краской так же просто как наш фон. Все, что нам для этого нужно - это задать цвет заливки, перед тем, как отрисуем прямоугольник. Давайте используем шестнадцатиричный код.

1
fill('#CC00FF');
2
rect(0, 0, 50, 50);

Теперь у нас есть фиолетовый квадрат. Не произведение искусства, конечно, но уже что-то. Как на счет другой фигуры? Мне показалось, или вы сказали - круг? Без проблем.

1
// Draw an ellipse that's 25px from the top and

2
// 25px from the left of the edge of the canvas.

3
// The ellipse is 25px tall and 25px wide making

4
// it a circle.

5
ellipse(25, 25, 25, 25);

Вы заметите, что наш круг нарисован не просто поверх прямоугольника, но еще имеет туже заливку.

Отсюда следует, что порядок в котором мы вызываем эти функции очень важен. Если бы нарисовали прямоугольник, после круга, то мы бы и вовсе его не увидели, так как он был бы закрашен. Итак, что касается заливки для круга, она такая же как у квадрата, потому что, любая фигура, которая рисуется после функции fill(), рисуется с этим цветом. Чтобы изменить цвет круга, над просто вызвать функцию fill снова, с новым значением цвета.

1
fill('#66CC66');
2
ellipse(25, 25, 25, 25);

Теперь у нас будет такой вариант:

Что же, пока не слишком восхитительно. Давайте посмотрим, что мы можем тут сделать. Теперь вспомните, что большая часть нашего кода, содержится в функции draw(), и как мы видели раньше, все, что находится в этой функции, вызывается снова и снова. Так что по существу, наш квадрат и круг будут отрисовываться снова и снова, по верх квадрата и круга, которые были построены в предыдущем шаге цикла рисования.

А что, если мы будем рисовать наши фигуры каждый раз в разных местах?

В Разное Время, В Разных Местах

Чтобы нарисовать фигуру в другом месте, вы должны изменить значения для координат. Это отличный ход, и хороший способ больше контолировать процесс рисования.

Есть так же другой вариант. Мы можем задавать смещение для всего холста, то есть, мы можем менять начало координат, верхнего левого угла (0,0) на что-то другое. В результате наши фигуры будут рисоваться с этим смещением. Если бы мы написали функцию translate(10, 10); мы бы получили вот это.

Our Updated Square

Обратите внимание, что наши фигуры теперь смещены на 10 рх от левого края и на 10 рх от верха.

Однако, это не решает нашу проблему, что фигуры непрерывно отрисовываются одна над другой, но, что если мы будем изменять начало координат холста при каждом вызове функции draw()? То фигуры, каждый раз будут отрисовываться в новом положении. Но в каком? И как мы это будем делать для каждого нового вызова функции draw()? К счастью, в р5 есть функция random(), с пмощью которой легко можно генерировать случайные числа. Мы используем эту функцию, чтобы случайным образом изменять смещение для нашего холста.

1
function draw () {
2
    // Offset the canvas

3
    // random(0, width) returns a value between

4
    // 0 and the width of the canvas.

5
    // As does random(0, height) for height.

6
    translate(random(0, width), random(0, height));
7
 
8
    // Existing code here

9
}

У нас получится анимированная версия:

Animated Block

Уаа-уу! Возможно такая анимация покажется вам слишком быстрой. Это потому, что р5 рисует наши фигуры так быстро, как может, вызывая снова и снова функцию draw(). Если вы хотите замедлить этот процесс, вы можете изменить скорость смены кадров, уменьшив частоту вызова draw(). Вставьте вызов функции frameRate() в функцию setup.

1
function setup () {
2
    createCanvas(200, 200);
3
    background('red');
4
    frameRate(5);
5
}

Вот так лучше. Правда это опять немного скучноватое появление  одних квадратов и кружков над другими. Давайте повращаем наши фигуры, чтобы получилось кое-что поинтереснее. Как же нам это сделать? Упс, я думаю вы догадываетсь, у р5 для нас опять кое-что есть. Сперва, мы скажем р5, что мы хотим использовать систему единиц поворота в виде градусов, а не радианы, и, что мы хотим сделать этот поворот случайным, перед тем как будет нарисована каждая фигура.

1
angleMode(DEGREES); // uses global DEGREES constant

2
rotate(random(1, 360)); // rotate to random angle

3
fill('#CC00FF');
4
rect(0, 0, 50, 50);
5
6
rotate(random(1, 360));
7
fill('#66CC66');
8
ellipse(25, 25, 25, 25);

Теперь мы содали монстра.

A variation on a square

Я уверен, что в 1991 у меня была рубашка, с таким же рисунком....

Ой, нет, я ошибся, на ней еще были желтые треугольники. Давайте и мы добавим такие.

1
// Random positioned yellow triangle

2
rotate(random(1, 360));
3
fill('yellow');
4
5
// 3 pairs of triangle points

6
triangle(25, 0, 50, 50, 0, 50);

Симпатичненько. Футболка из 90х или из наших дней от Джексона Поллока? Решайте сами. Искусство - в глазах смотрящего, как они говорят.

Jackson Pollock-inspired

Подводим Итоги

Я надеюсь вы поняли из этого урока, как просто начать рисовать в браузере с помощью p5.js. В р5 есть много полезных, удобных методом, с помощью которых мы можем рисовать фигуры, создавать анимацию и создавать пользовательский интерфейс. Если вы хотите узнать больше, посетите страницу p5, или посмотрите мой курс Интерактивное искусство с р5.js на Envato Tuts+ .

Вот окончательный код для нашего скетча на р5:

1
function setup () {
2
    createCanvas(200, 200);
3
    background('red');
4
    frameRate(5);
5
}
6
7
function draw () {
8
    translate(random(0,width), random(0,height));
9
10
    angleMode(DEGREES);
11
    rotate(random(1, 360));
12
    fill('#CC00FF');
13
    rect(0, 0, 50, 50);
14
15
    rotate(random(1, 360));
16
    fill('#66CC66');
17
    ellipse(25, 25, 25, 25);
18
19
    rotate(random(1, 360));
20
    fill('yellow');
21
    triangle(25, 0, 50, 50, 0, 50);
22
}
Advertisement
Did you find this post useful?
Want a weekly email summary?
Subscribe below and we’ll send you a weekly email summary of all new Code tutorials. Never miss out on learning about the next big thing.
Advertisement
Looking for something to help kick start your next project?
Envato Market has a range of items for sale to help get you started.