| Источники: П. А. Орлов ПРОГРАММИРОВАНИЕ ДЛЯ ДИЗАЙНЕРОВ
Учимся программировать вместе с Processing Кейси Риз и Бен Фрай
Система координат. Трансформации
Для создания эффекта анимации можно применять:
- прорисовки отдельных кадров, вытирания нарисованного (заливка цветом фона), и прорисовки следующего кадра,
- можно также применять трансформацию - операцию изменения размещения всего полотна (или специальным образом обозначенной части).
Виды трансформаций: перемещение, вращение, масштабирование
 |
-
По умолчанию в Processing используется двухмерная система координат с нулем в верхнем левом углу окна приложения. Ось X направлена вправо, ось Y вниз.
-
Поля (сетки), с которой работает скетч задается командой 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));
}
|
 |
| |
