2. Первые шаги к осмысленному программированию. Функции в p5.js

0. Введение

Итак, из прошлых разделов вы должны были научиться устанавливать систему программирования и азам работы в редакторе кода. В данном уроке мы начнем изучать т.н. синтаксис языка - иначе говоря, основы и правила описания команд в языке программирования p5.js.

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

1. Минимальная программа.

Разные языки программирования имеют разное устройство команд и операторов. В некоторых можно прямо в пустой строке ввести команду, и она успешно выполнится.

Однако p5.js и его прямой предок - JavaScript - имеют несколько усложненную струкутру.

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

Тут важно сказать, что самая распрастраненная программа будет состоять из двух функций:

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

Получается, даже программа, которая ничего не будет делать, будет содержать эти две функции. Выглядит это так:

function setup() {

}

function draw() {

}

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

Функция setup() - это и есть функция инициализации. Внутри фигурных скобок пишутся все команды и настройки.

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

Начнем изучение команд рисования в p5.js.

2. Команды и функции p5.js

2.1 Функция createCanvas() 

Мы изучаем рисование, из-за этого первую функцию, которую необходимо изучить, это создание канвы.

Все объекты дли отрисовки должны размещаться в строго отведенной для этого области. Данная область называется канвой (синонимы: полотно, рабочая область). Поэтому, прежде чем рисовать, нам надо создать канву с помощью функции createCanvas() .

Для этого в функцию инициализации пропишем команду createCanvas() с некоторыми уточнениями:

function setup() {

createCanvas(400,600)

}

Все просто: внутри функции setup() мы ввели одну строку createCanvas(400,600). Данная строка "диктует" компьютеру создать прямоугольную канву. Цифры 400 и 600 будут отвечать за ширину и высоту канвы, которая измеряется в пикселях.

2.2 Первая геометрическая фигура и о системе координат в p5.js

Канва создана - пора приступать к рисованию.

Существует множество команд для отрисовки векторных графических примитовов. Всю отрисовку рекомендуется размещать внутри функции draw()

Начнем, пожалуй, с прямоугольника. Нарисуем прямоугольник. Для этого в p5.js существует функция rect():

rect(30,40,50,70)

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

• первые два числа (в моем случае, это 30 и 40) отвечают за положение в системе координат верхнего левого угла прямоугольника (x,y).
• последующие два числа определяют ширину(w) и высоту(h) прямоугольника.

В общем виде этот набор параметров записывают следующим образом:

rect(x,y,w,h)

И вот тут возникает интересный момент с системой координат. С одной стороны, все логично и числа 30 и 40 отвечают за x и y-координаты соответсвенно. С другой стороны, есть нюансы:

• во-первых, единицой измерения принято считать пиксель, т.е. число 30 - это смещение на 30 пикселей
• во-вторых, точкой отсчета в системе координат принимается правый верхний угол окна браузера. а оси идут от этой точки вправо и вниз, к чему немного придется привыкнуть.

Таким образом, если мы запишем и выполним код, и откроем браузер, мы увидим следующее:

Проанализируем и разметим получившуюся отрисовку:

Попробуйте сами разместить прямоугольник и укажите собственные параметры.

2.3 Отрисовка других геометрических фигур

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

Начнем с точки:

point(x,y)

Наборы параметров, необходимых для описания точки, минимальны - это лишь ее координаты.

Так рисуется линия:

line(x1,y2,x2,y2)

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

Отрисовка треугольника построена по этому же подходу, и треугольник представлен как набор трех точек и линий между ними:

triangle(x1,y2,x2,y2,x3,y3)

Нарисуем эллипс:

ellipse(x,y,w,[h])

Всё очень похоже на прямоугольник, но, в отличие от прямоугольника, координаты x и y служат для определения радиуса эллипса. Заметьте - параметр высоты (h) указан в квадратных скобках. Это означает, что вводить его необязательно. Иначе говоря, если не указать высоту в параметрах, компьютер приравняет высоту к ширине эллипса. Таким образом, мы получим идеальный круг.

3. Где брать справочный материал?

Естественно, что все функции мы здесь описывать не будем. Все описание, более емкое и исчерпывающее, представлено на сайте языка p5.js в разделе References:

p5js.org/reference

Также рекомендуется к просмотру ролик Дэниела Шиффмана: