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


Меню сайта


Статистика

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


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


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

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

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

Система  координат. Трансформации


Для создания эффекта анимации можно применять:

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

Виды трансформацийперемещение, вращение, масштабирование

 

 

  1. По умолчанию в Processing используется двухмерная система координат с нулем в верхнем левом углу окна приложения. Ось X направлена вправо, ось Y вниз.

  2. Поля (сетки), с которой работает скетч задается командой size,

 

 

1.  Перемещение

Один из видов трансформации  - изменение  координат окна - функция translate(). Она сдвигает координаты системы влево, вправо, вверх и вниз с помощью всего двух параметров.

Например, вместо перемещения фигуры на 60 пикселей вправо вы можете сместить координату окна (0,0) вправо на 60 пикселей - визуально результат будет тем же

Обратите внимание!!! Изменения применяются к целой координатной плоскости, меняя точку начала отсчета координат.

 

size(300,300);
fill(0,0,255);
rect(0,30,20,40);
rect(60,30,20,40);//смещение фигуры вправо на 60 пикселей.

size(300,200);
fill(0,0,255);
rect(0,30,20,40);

translate(60,0);//смещение системы координат вправо на 60 пикселей

fill(0,0,255,90);
rect(0,30,20,40);

   

 

Пример 2. Смещение системы координат относительно верхнего левого угла окна

 

   size(500,400);

   translate(40,20);//смещает систему координат относительно верхнего левого угла окна по оси ОХ на 40 пк, относительно оси ОУ на 20 пк.

   fill(255,0,0);
   rect(20,20,20,40);

   translate(60,70);//смещает систему координат относительно верхнего левого угла окна по оси ОХ на 60 пк, относительно оси ОУ на 70 пк.
 

   fill(0,255,0);
   rect(20,20,20,40);

 

Пример 3.  В этом примере обратите  внимание на то, что все прямоугольники изображены относительно точки (0,0) и перемещаются по экрану под воздействием функции translate().

вариант 1

 

В среде Processing можно воспользоваться некоторыми системными переменными, в частности:

 mouseX содержит x-координату мыши
 mouseY содержит y-координату мыши


Фактически, функция translate() вместо точки (0,0) записывает координаты курсора. В следующей строчке функция rect() рисует прямоугольник относительно новой нулевой точки, которой является координата мыши.

   void setup() {
     size(400, 200);
     frameRate(2);
  }
 
void draw() {

     translate(mouseX, mouseY);// функция translate()   вместо точки (0,0)  записывает координаты курсора

     
rect(0, 0, 30, 30);
  }

 

вариант 2

 

void setup () {  
size (300, 300);
 background (100,70.150);
//
закрасит фон окна приложения 
}

void draw () {
 frameRate(2);
/
/частота смены кадров в секунду - 2 кадра

 fill(random(255),random(255),random(255));
  
translate(
mouseX, mouseY); /*
функция translate() вместо точки (0,0)   записывает координаты курсора. В следующей строчке функция rect()
  рисует прямоугольник относительно новой нулевой точки,   которой является координата мыши.*/

 
 rect(0,0,random(50),random(50));
}

 

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

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