Вторник, 17.09.2019, 19:14
Главная | Регистрация | Вход Приветствую Вас Гость | RSS


Меню сайта


Статистика

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


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


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

Двигаем объекты мышью 

источник: П. А. Орлов  ПРОГРАММИРОВАНИЕ ДЛЯ ДИЗАЙНЕРОВ
   Учебное пособие

Пример 1. Двигаем крестик по экрану мышью

 

void setup () {
size (300, 300);
smooth ();
strokeWeight (20);
background (0);
}

void draw () {
stroke (200, 20);

/* используем две системные переменные mouseX и mouseY. Значения, хранимые в этих переменных – это координаты курсора мыши*/

line(mouseX -50,mouseY -50, 50+ mouseX , 50+ mouseY);

line (50+ mouseX,mouseY -50, mouseX -50, 50+ mouseY );
}

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

 

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

println("mouseX = ",mouseX, "   mouseY =  ", mouseY);

println("");

println("mouseX-50 =  ",mouseX-50, " mouseY – 50=  ", mouseY-50, " 50+mouseX =  ", 50+mouseX, " 50+mouseY = ",mouseY+50);

println("50+mouseX =  ",50+mouseX, " mouseY – 50 = ", mouseY-50, " mouseX-50 = " , mouseX-50, " 50+mouseY = ",50+ mouseY);

 

Пример 2. Управление крестиком с динамическим цветом

Добавим художественного эффекта в наше произведение.

 В код вводим две переменные i и k между функциями  setup() и draw(). Это требуется для двух вещей:

  • Во-первых, если мы объявим переменную в какой-нибудь функции, например, в setup(), то эта переменная будет видна только внутри этой функции, так как область видимости переменной ограничивается фигурными скобками функции.
     
  • Во-вторых, если переменную объявить вне функции, вне области видимости фигурных скобок, то она будет видна функции, например, draw().

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

void setup () {
size (500, 500);
smooth ();
strokeWeight (20);
background (0);
}

int i = 0;
int k = 1;
void draw () {

stroke(i, 20);
line(mouseX -50,mouseY -50, 100+ mouseX -50, 100+ mouseY -50);
line (100+ mouseX -50,mouseY -50, mouseX -50, 100+ mouseY -50);

i = i + k; // как и в циклах выполняется увеличение  переменной  i на 1

/* C каждым вызовом функции draw() логический оператор проверяет условие в круглых скобках*/

if (i == 255)

{k=-1;}


if (i == 0)

{k=1;}

}


1. Выражение i == 255 можно понимать так:" не равно ли i 255?".

Логический  оператор возвращает или истину (true), или ложь (false).

Если мы получили истину, то отправляемся в фигурные скобки  - {k=-1;}

После этого программа следует дальше (if (i == 0)..

Если получили ложь, то в фигурные скобки не попадаем и продолжаем сразу с строки  - if (i == 0).

2. Обратите внимание на двойной знак равенства. Если бы мы поставили одиночный знак равенства, т.е. i = 255, то всегда срабатывала  бы операция присвоения и далее, логический оператор возвращал бы всегда true.

3. Так как переменная i у нас используется для указания цвета и ее значение постоянно меняется, то крестик плавно меняет свой цвет от светлого к темному и обратно.

Пример 3. Инвертирование  цвета крестика

 

void setup() {
  size(640, 360);
  noSmooth();
  fill(126);
  background(102);
}

void draw() {
  if (
mousePressed) {
    stroke(255);
  } else {
    stroke(0);
  }
  line(
mouseX-66, mouseY, mouseX+66, mouseY);
  line(
mouseX, mouseY-66, mouseX, mouseY+66); 
}

 

Пример 4. Рисование линий с вершиной в месте курсора


1. Функция  random(0,500) с двумя атрибутами при каждом вызове, возвращает случайное число. Аргументы указывают максимальное и минимальное значение этого числа.

  • В нашем случае координата X второй точки отрезка будет с каждым кадром разная:
    • от 0 до 500.
    • координата Y остается со значением 500.

 

2. Функцию keyPressed(). Эта функция работает по такой же логике, как и функции  setup() и draw():

  • От нас требуется только реализовать их, а вызываются они без нашего вмешательства в код.
  • Переменная key  -  встроенная, системная переменная Processing. В нее записывается значение –символ, который нажат на клавиатуре

3. Функция saveFrame("myProcessing.png"); запишет вашу картину в файл. И произойдет это достаточно быстро.

  • Теперь если нужно открыть папку с вашим скетчем, это можно сделать в Processing IDE в меню:

 Sketch->Show Sketch Folder. Если вы и так помните, где сохраняете свои скетчи, то, естественно, этим меню можете не пользоваться.

 

void setup () {
size (500, 500);
smooth ();
strokeWeight (1)
;// толщина линии
background (0);
}

int i = 0;
int k = 1;

void draw () {
stroke( i, 20);

/*рисуем линию,первая точка отрезка – от курсора мыши, вторая – имеет координату по оси X как результат выполнения функции random(0,500)*/

line(mouseX , mouseY , random (0 ,500), 500);

i = i + k;

if(i == 255) {k=-1;}
if( i == 0) {k=1;}
}

void keyPressed () {

if (key==’s’) {saveFrame("myProcessing.png");}
}

В Processing существует три функции, реагирующие на события клавиатуры:keyPressed(), keyReleased() и keyTyped().

  • Функция keyPressed() выполняется, когда вы нажимаете на клавишу. Она понадобится вам, когда вы захотите сделать прямое взаимодействие с компьютером. Функция keyPressed() выполняется один раз при нажатии

  • Встроенная переменная key содержит значение последней нажатой клавиши.

 

Задание 1. Измените код   так, чтобы на холсте было отрисовано изображение, как на  следующих рисунках:

Требуется, чтобы:

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

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