Transcript
Page 1: Компьютерная графика в Processing, часть 6. Взаимодействие

Компьютерная графикаВзаимодействие

Jordi Linares i PellicerEscola Politècnica Superior d’AlcoiDep. de Sistemes Informàtics i Computació[email protected]://www.dsic.upv.es/~jlinares

Page 2: Компьютерная графика в Processing, часть 6. Взаимодействие

Взаимодействие

• В processing есть два способа реализации взаимодействияс пользователем:• Использовать набор системных переменных

• Определить набор функций-обработчиков, которыевызываются как ответ на определённое событие.

• Какой метод лучше использовать — зависит от конкретнойзадачи; их можно даже комбинировать.

• Обычно смотрим системные переменные внутрифункции draw(). Хотя она постоянно запускается,обнаружение всех событий через этот механизм не гарантировано.

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

Page 3: Компьютерная графика в Processing, часть 6. Взаимодействие

mouseX, mouseY

• В них всегда хранится текущее местоположение курсора:

• mouseX => координата по x

• mouseY => координата по y

Взаимодействие

Page 4: Компьютерная графика в Processing, часть 6. Взаимодействие

// Мячик, который следует за мышьюvoid setup(){ size(500, 500); noStroke(); // Фон background(0);}

void draw(){ // След fill(0, 1); rect(0, 0, width, height); // Рисуем мячик, следующий // за местоположением мыши fill(255); ellipse(mouseX, mouseY, 50, 50);}

Взаимодействие

Page 5: Компьютерная графика в Processing, часть 6. Взаимодействие

pmouseX, pmouseY

• В них хранятся координаты мыши в предыдущем кадре:

• pmouseX => координата по x

• pmouseY => координата по y

Взаимодействие

Page 6: Компьютерная графика в Processing, часть 6. Взаимодействие

// Свободное рисованиеvoid setup(){ size(500, 500); background(0); stroke(255); strokeWeight(2); smooth(); // Использовать технологию antialiasing}

void draw(){ line(pmouseX, pmouseY, mouseX, mouseY);}

Взаимодействие

Page 7: Компьютерная графика в Processing, часть 6. Взаимодействие

mousePressed

• Будет TRUE, если любая кнопка мыши нажата, иFALSE иначе

Взаимодействие

Page 8: Компьютерная графика в Processing, часть 6. Взаимодействие

// Свободное рисованиеvoid setup(){ size(500, 500); background(0); stroke(255); strokeWeight(2); smooth(); // Использовать технологию antialiasing}

void draw(){ if (mousePressed) line(pmouseX, pmouseY, mouseX, mouseY);}

Взаимодействие

Page 9: Компьютерная графика в Processing, часть 6. Взаимодействие

mouseButton

• Принимает значения LEFT, RIGHT или CENTER в зависимости от того, какая клавиша мыши нажата

• Должна использоваться вместе с mousePressed

Взаимодействие

Page 10: Компьютерная графика в Processing, часть 6. Взаимодействие

// Свободное рисованиеvoid setup(){ size(500, 500); background(0); strokeWeight(2); smooth(); // Использовать технологию antialiasing}

void draw(){ if (mousePressed) { if (mouseButton == LEFT) { // Рисовать stroke(255); strokeWeight(2); } else { // Стирать stroke(0); strokeWeight(4); } line(mouseX, mouseY, pmouseX, pmouseY); }}

Взаимодействие

Page 11: Компьютерная графика в Processing, часть 6. Взаимодействие

keyPressed

• Будет TRUE, если нажата клавиша

key

• В ней хранится символ нажатой клавиши

• Может также иметь значения: BACKSPACE,TAB, ENTER, RETURN, ESC и DELETE.

• Если значение равно константе CODED, то из системнойпеременной keyCode ясно, какая специальная клавишанажата: UP,DOWN,LEFT,RIGHT,ALT,CONTROL,SHIFT

• Использоваться эта переменная должна совместно сKeyPressed.

Взаимодействие

Page 12: Компьютерная графика в Processing, часть 6. Взаимодействие

Определение функций-обработчиков как ответов на событие

• Добавляются новые функции (callback functions), которые вызываются, когда возникает ассоциированноес ними событие.

• У этих функций специальные имена, они не имеют параметров и возвращают void

• В их теле может быть полезным обратиться квышеописанным системные переменные.

Взаимодействие

Page 13: Компьютерная графика в Processing, часть 6. Взаимодействие

void mousePressed()

• Всегда вызывается, когда нажата кнопка мыши

• Через mouseButton можно узнать, какая именно кнопканажата.

• Определяет именно нажатие (первый клик, передтем, как отпустить)

void mouseReleased()

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

• Через mouseButton можно узнать, какая именно кнопка отпущена

Взаимодействие

Page 14: Компьютерная графика в Processing, часть 6. Взаимодействие

void mouseClicked()

• Всегда вызывается после полного клика, когдакнопка нажата и затем отпущена.

• Через mouseButton можно узнать соответствующуюкнопку

• До этого события произойдут mousePressed() иmouseReleased()

Взаимодействие

Page 15: Компьютерная графика в Processing, часть 6. Взаимодействие

void mouseMoved()

• Всегда вызывается после перемещения мыши, когда клавиши не нажаты.

• Обычно внутри обращаются к mouseX и mouseY , чтобы узнать координаты курсора

void mouseDragged()

• Вызывается после перемещения мыши, когда нажата хотьодна клавиша (из mouseButton можно узнать, какая)

• Обычно внутри обращаются к mouseX и mouseY , чтобы узнать координаты курсора

Взаимодействие

Page 16: Компьютерная графика в Processing, часть 6. Взаимодействие

void keyPressed()

• Всегда вызывается, когда нажата клавиша на клавиатуре

• Обычно используют key, чтобы узнать, какая клавишанажата (keyCode тоже можно использовать)

void keyReleased()

• Всегда вызывается, когда отпущена клавиша на клавиатуре

• Обычно используют key, чтобы узнать, какая клавишанажата (keyCode тоже можно использовать)

Взаимодействие

Page 17: Компьютерная графика в Processing, часть 6. Взаимодействие

void keyTyped()

• Всегда вызывается после того, как символ напечатан (после того, как клавиша нажата и отпущена)

• До этого события произойдут keyPressed()и keyReleased()

• Долгое удерживание кнопки будет создавать повторяющиеся события keyTyped(), что будет дальше — зависит от настроек операционной системы

• Клавиши Control, Alt и Shift игнорируются этим событием

Взаимодействие

Page 18: Компьютерная графика в Processing, часть 6. Взаимодействие

// Свободное рисованиеcolor colorStroke = color(255, 0, 0);

void setup(){ size(500, 500); background(0); strokeWeight(2); smooth(); // Использовать технологию antialiasing}

void draw(){ if (mousePressed) { if (mouseButton == LEFT) { // Рисовать stroke(colorStroke); strokeWeight(2); } else { stroke(0); // Стереть strokeWeight(4); } line(mouseX, mouseY, pmouseX, pmouseY); }}

void keyPressed(){ switch (key) { case 'r': case 'R': colorStroke = color(255,0,0); break; case 'g': case 'G': colorStroke = color(0,255,0); break; case 'b': case 'B': colorStroke = color(0,0,255); break; } }

Взаимодействие

Page 19: Компьютерная графика в Processing, часть 6. Взаимодействие

Практика 6-1

• Запрограммируйте игру ‘Посадка на Луну’

Сила притяжения (g)

Двигатель (r)

F = m· (g + r)a = r + gv(t+1) = v(t) + ae(t+1) = e(t) + v(t+1)

Page 20: Компьютерная графика в Processing, часть 6. Взаимодействие

• Корабль изначально должен находиться вверху окнав случайной по горизонтали точке

• Внизу нарисуйте лунную поверхность просто как прямоугольник, а посередине — посадочную площадку.

• На корабль влияет сила притяжения (как это было в прошлых примерах на прошлом занятии)

• Когда игрок нажимает UP, и только в этом случае, результирующая сила будет: сила притяжения и противоположная ей сила двигателя (только вкл/выкл двигателя, без промежуточных уровней)

• По нажатию LEFT и RIGHT корабль будет перемещатьсявлево или вправо (простой перенос, ничего больше ненужно)

Практика 6-1

Page 21: Компьютерная графика в Processing, часть 6. Взаимодействие

• Посадка считается удачной, если:• Корабль приземлился на посадочную полосу• Его скорость в этот момент ниже некоторого порога.

Если этот порог превышен, то считается, что корабльРазбился.

• После удачной или неудачной посадки игра будетзапущена заново, а корабль помещён в стартовую точку

• Нарисуйте корабль, как хотите (совет: используйтеоперацию переноса, чтобы поместить его на экран)

• Если двигатель включён, можно нарисовать огонь• Эффект катастрофы тоже можно нарисовать• Настройте значения силы притяжения, мощности двигателя,

и движений по горизонтали, чтобы добавить играбельности• Всё взаимодействие с игроком может быть сделано внутри

функции draw() через проверку подходящих системных переменных

Практика 6-1

Page 22: Компьютерная графика в Processing, часть 6. Взаимодействие

Практика 6-1