4. Переменные в p5.js на примере анимации

0. Введение

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

1. Системные переменные

Зайдем издалека.

Допустим, мы нарисовали круг. и хотим, чтобы он двигался.

Здесь представлен код скетча, где нарисован статичный круг:

function setup() {
  createCanvas(600,400)
}

function draw() {
background(0,255,255)
fill (255,0,0)
ellipse(100,100,50)
}

Если вы читали предыдущие разделы, сюрпризов вы не найдете.

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

Поставим себе задачу - заставим этот круг двигаться по траектории курсора (т.е. где курсор - там и круг).

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

Но как?

Язык программирования вещь строгая, и простой разговорный язык он не понимает. То есть код:

ellipse(там, где курсор,50)

система не поймет. Надо использовать определенные команды для объяснения того, чего мы хотим.

К тому же, если мы посмотрим на пример, то увидим, что координаты у нас указаны в фиксированных числах. "Жесткое" фиксирование настроек непозволительно при программировании того, что меняется по ходу времени. А так как положение курсора меняется согласно нашему желанию, надо думать, как изменить код.

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

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

Главное удобство переменных, помимо того,  что мы можем их испольвать для обозначения изменяющихся величин, в том, что один раз обозначив переменную и записав с ней код, мы очень легко можем изменить ее значение. Удобство на первый взгляд неоднозначное, однако работая с многостраничным кодом и переменными, которые примеются в разных местах по несколько раз, вы поймете смысл предложения.

Попробуем прописать необходимые переменные. Для начала заставим круг двигаться только по горизонтали.

Для этого в коде эллипса прописан первый параметр, равный 100:

ellipse(100,100,50)

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

На самом деле, в данной задаче мы воспользуемся одной хитростью и вместо того, чтобы завидить собственные переменные, мы будем использовать внутренние (системные) переменные. Такие переменные отслеживают параметры компьютера и с ними не надо возиться. Для определения горизонтального положения курсора используется системная переменная mouseX. Вот эту переменную нам надо вписать вместо чисел, отвечающих за горизонтальное положение круга.

ellipse(mouseX,100,50)

Измените код и проверьте - теперь ваш круг будет двигаться в том же положении (по горизонтали), что и курсор.

Задание:

1. Измените код, чтобы он двигался с курсором не только по горизонтали, но и по вертикали. Догадайтесь, как будет называться переменная.
2. Допустим, я вписал переменную mouseX так:  ellipse(mouseX,mouseX, 50). Как вы думаете, что произойдет?

2. Пишем переменные сами

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

Возьмем самую простую траекторию - движение по прямой и создадим анимацию движения на нашем скетче.

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

Определение анимации удачно перекликается с конструкцией скетча, ведь у нас есть функция draw(). Частота повтора функции составляет 50 повторов в секунду, что позволяет нам отрисовывать кадры и незначительно их изменять.

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

Для этого еще раз возьмем код:

function setup() {
  createCanvas(600,400)
}

function draw() {
background(0,255,255)
fill (255,0,0)
ellipse(100,100,50)
}

Далее, обратим на нужный нам параметр - число 100. Оно фиксировано. И допустим, мы хотим его смещать вправо на один пиксель каждый раз, как будет выполнятся функция draw(). На первом круге будет 100, на втором - 101, на третьем - 102 и так далее. Но так как число фиксировано, мы не можем каждый раз писать 100,101,102 и так далее. Надо завести переменную, которая будет меняться каждый раз, как будет выполнятся функция draw().

Стерем число 100  и вместо этого введем какую нибудь переменную. Имя для переменных вы можете из латинских букв. Например, я выбрал название для переменной:

ellipse(cx,100,50)

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

var cx=100

Рассмотрим по-порядку, что это такое:

• служебное слово var обозначает, что после него идет перечисление переменных
• конструкция cx=100 означает, что:
  • во-первых, мы объявляем о новой переменной cx
  • во-вторых, мы присваиваем переменной cx значение 100

Последний пункт особенно важен, ведь там мы впервые встречаем очень частую в программировании операцию - присваивание. Присваивание в p5.js обозначается одним знаком равенства ("="). Слева пишется переменная, которой мы хотим задать новое значение, а справа это значение вычисляется.

Не забывайте объявлять и сразу же определять значения ваших переменных, иначе в работе программ вероятны сбои.

Объявив переменную и присвоив ей начальное значение, можно убедиться в работоспособности написанной программы. На первый взгляд, ничего не изменилось, круг и ныне там. Однако совершенные изменения теперь нам помогут анимировать круг, чего в старом варианте программы мы бы никак не добились.

Проведем анализ. У нас есть переменная, равная 100. При каждом выполнении функции отрисовки draw() программа рисует круг и для определения его горизонтального положения обращается к переменной cx. Получается, надо каким-то образом указать, чтобы ее значение увеличивалось на единицу в каждом повторе функции.

Для этого, после функции ellipse() напишите слудующий код:

cx=cx+1

Это всё. Именно эта строчка позволяет нам двигать круг. В данном случае мы воспользовались операцией присваивания. Сама конструкция сложна для первого знакомства, на самом деле все просто.

Дело в том, что присваивание работает справа налево. То есть:

• Сначала вычисляем часть формулы, которая находится справа от знака присваивания - cx+1
• Значение cx равно 100, поэтому cx+1 будет равно 101
• Значение 101 присваивается переменной cx

Получается, когда функция отрисовки будет вновь обращаться к переменной, она будет работать с числом 101, а не 100, как это было в первый раз. Таким образом мы добъемся увеличения значения переменной, следовательно, и движения круга.

 

Полный исходный код:

var cx=100
function setup() {
  createCanvas(600,400)
}

function draw() {
background(0,255,255)
fill (255,0,0)
ellipse(cx,100,50)
cx=cx+1
}

И видео от Дэна про круг-курсор:

И двигающийся круг: