Учимся программировать вместе с Processing  Кейси Риз и Бен Фрай

Интерактивное взаимодействие

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

Рассмотрим интерактивное взаимодействие, которое реализует Processing в своей базовой комплектации. Наиболее привычное взаимодействие – это управление приложением мышью и клавиатурой.

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

1. Чтобы это стало возможным, включите фрагмент кода, который должен повторяться непрерывно, в функцию draw().Код, записанный в блоке draw(), выполняется сверху вниз, а затем повторяется до тех пор, пока вы не выйдете из программы, нажав кнопку Stop или закрыв окно. Каждый “прогон” кода в функции draw() называется кадр (frame).
2. В дополнение к функции draw() Processing имеет функцию setup(), которая запускается однократно при запуске программы. В типичной программе код внутри функции setup() используется для задания начальных значений переменных. Первая строка - это, как правило, функция size(), далее могут быть включены функции, задающие цвета заливки и линий или функции для загрузки изображений и шрифтов. (Если вы не включите функцию size(), окно будет иметь размер 100x100 пикселей.)
3. Есть еще одна область в текстовом редакторе, куда вы можете вписывать код – это область вне функций setup() и draw(), где вы можете объявлять переменные. Переменная, объявленная в функции setup(), не может быть использована где-то еще. Переменная, объявленная вне этих функций, называется глобальной переменной, потому что она может быть использована в любом месте программы (”глобально”).

Итог:

1. Объявляются переменные вне функция setup() и draw().
2. Код внутри функции setup() запускается один раз.
3.  Код внутри функции draw() работает непрерывно.

I. Знакомство с командами позволяющие выводить координаты с мыши.

 Выведем  эти координаты на экран

 

Когда мы перемещаем курсор мыши по экрану то у него есть координаты всегда по х и координаты всегда по у.

 

Для этого воспользуемся командами mouseX и mouseY. 

 

PS !!! Переменная mouseX содержит x-координату, а переменная mouseY содержит y-координату мыши.

Заносить эти координаты мы будем в переменные х, у:

1. int  x; 
2. int  y;

 

int  x; int  y; void setup() { size(640,480); background(0,255,0); } void draw(){ x = mouseX; y = mouseY; println("mouseX=  ", mouseX,"    mouseY = ",mouseY); //вывод на консоль  }

 

Выводить на экран мы будем сами переменные – переменную х и переменную y

x  - text(x,320,240) 

и сместив вправо на 100 пикселей будем выводить у -text(y,420,240).

 Чтобы не было наложения вернем команду закраски фона в область функции  draw().

Размер вывода символов устанавливаем в 18 ед.

int  x; int  y; void setup() { size(640,480); } void draw(){ background(200,20,100); textSize(18); x = mouseX; y = mouseY; println("mouseX=  ", x,"    mouseY = ",y); text(x,320,240); text(y,420,240); }

Пример 1.   Следим за курсором

 

void setup() { size(480, 120);   fill(0, 102); smooth();    noStroke(); } void draw() { ellipse(mouseX, mouseY, 9, 9); }
В этом примере каждый раз, когда выполняется блок команд из функции draw(), в окне рисуется новый круг. Изображение выше получено перемещением мыши. Круги являются полупрозрачными, и по тому, где черный цвет наиболее интенсивен, можно понять, где курсор находился дольше и где он двигался с меньшей скоростью. Там, где расстояние между кругами больше, курсор перемещался быстрее.

 

Пример 2. Точка следует за курсором

Здесь, каждый раз, когда выполняется блок команд из функции draw(), в окне появляется новый круг. Чтобы обновлять экран перед появлением нового круга, примените функцию background() в начале функции draw(), перед рисованием фигуры:

void setup() { size(480, 120); fill(0, 102); smooth(); noStroke(); } void draw() { background(204); fill(255,0,0); ellipse(mouseX, mouseY,15, 20); }

 

Пример 3. Рисуем непрерывные линии. Переменные pmouseX и pmouseY

1. Встроенная переменная pmouseX содержит координату x мыши предыдущего кадра. Она обновляется с каждым кадром.

2. Встроенная переменная pmouseY содержит координату y мыши предыдущего кадра. Она обновляется с каждым кадром.

Соединяя текущее и предыдущее положение курсора линией, можно рисовать непрерывную линию.

 

void setup() { size(480, 120); strokeWeight(4); smooth(); } void draw() { stroke(random(255),random(255),random(255)); line(mouseX, mouseY, pmouseX, pmouseY); }

 

Пример 4.  Меняем размер линии, эллипса. Функция dist()

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

1. Функция dist позволяет определить расстояние между двумя точками.
2. Функция dist () вычисляет расстояние по теореме Пифагора.

Например, команда:
float green = dist (mouseX, mouseY, width / 2, height / 2);
записывает в переменную green действительного типа значение расстояния между положением мыши (mouseX, mouseY) и центром экрана (width / 2, height / 2).

В примере 4  скорость движения мыши устанавливает толщину проводимой линии

 

void setup() { size(550, 250); smooth(); } void draw() {  float weight = dist(mouseX, mouseY, pmouseX,                                                                            pmouseY); strokeWeight(weight); stroke(random(255),random(255),random(255)); line(mouseX, mouseY, pmouseX, pmouseY); }
void setup() { size(800,200); background(0); } void draw() {  float d = dist(mouseX, mouseY, pmouseX, pmouseY);  //fill(random(255),random(255),random(255)); варианты fill(185 + random(70), 75 + random(50), 55 + random(25)); ellipse(mouseX, mouseY, d, d); }

Пример 5 . Рисование линий

Так как функции mouseX и mouseY возвращают текущие координаты курсора мыши - при каждом движении мыши будут рисоваться новые линии. Выглядит это вот так:

void setup () { size (600, 600); background (190,60,0); } void draw () { stroke(255); line(150,25,mouseX , mouseY); }

 

II. Кроме позиции курсора Processing может отслеживать состояние кнопок мыши.

1. Переменная mousePressed принимает различные значения в зависимости от того, нажата кнопка мыши или нет.

2. В переменной mousePressed сохраняются данные типа boolean; это значит, что она принимает одно из двух значений:

• истина (true)

или

• ложь (false).

Когда нажата кнопка мыши, mousePressed принимает значение истина.

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

4. Код в блоке if запускается, когда нажата кнопка мыши. Если кнопка отжата, этот код игнорируется. Запись проверки состояния кнопки мыши может иметь 

следующую структуру:

• if (mousePressed == true) {...}
• if (mousePressed) {...}.

 

Пример 1. Кликаем мышью 

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

void setup() { size(240, 120); //width = 240, height = 120 smooth(); strokeWeight(30); } void draw() { background(204); //цвет фона stroke(102); // цвет контура линий //отрисовка линии с координатами х1=40, у1=0; х2=70 ,у2= 120 line(40, 0, 70, height); /*если кнопка мыши будет нажата - цвет отрисовки второй линии с  координатами: х1=0, у1=70; х2=240, у2=50 будет черным*/ if (mousePressed == true) { stroke(0); } line(0, 70, width, 50); }

 

Оператор if позволяет вам выбирать, запускать определенный блок кода или нет. Вы можете расширить возможности оператора if, добавив к нему else  для выбора между двумя блоками кода

Пример 2.  Определяем, нажата ли кнопка. Цвет линий белый, когда кнопка мыши не нажата и черный, когда нажата 

 

void setup() { size(240, 120); smooth(); strokeWeight(30); } void draw() { background(204); stroke(102); // первая линия, цвет обрисовки - 102 line(40, 0, 70, height); if (mousePressed) { stroke(0); } else { stroke(255); } // вторая линия, цвет обрисовки или 0 или 255 line(0, 70, width, 50); }

 

Processing имеет возможность отслеживать, какая кнопка нажата, если на вашей мыши более одной кнопки. Переменная mouseButton принимает три значения: LEFT, CENTER и RIGHT. Используйте оператор сравнения ==, чтобы определить, какая из кнопок нажата.

Пример 3.  Работаем со всеми кнопками мыши 

 

void setup() { size(120, 120); smooth(); strokeWeight(30); } void draw() { background(204); stroke(102); line(40, 0, 70, height); if (mousePressed) { if (mouseButton == LEFT) { stroke(255); } else { stroke(0); } line(0, 70, width, 50); } }