Суббота, 21.09.2019, 09:42
Главная | Регистрация | Вход Приветствую Вас Гость | RSS


Меню сайта


Статистика

Онлайн всего: 1
Гостей: 1
Пользователей: 0


Тестування онлайн
тестування онлайн 


Социальные закладк

Учимся программировать вместе с 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);
}

}

 

Форма входа
Поиск
Календарь
«  Сентябрь 2019  »
ПнВтСрЧтПтСбВс
      1
2345678
9101112131415
16171819202122
23242526272829
30
Архив записей
Друзья сайта
  • Официальный блог
  • Сообщество uCoz
  • FAQ по системе
  • Инструкции для uCoz

  • Рейтинг@Mail.ru
    Copyright MyCorp © 2019
    Конструктор сайтов - uCoz