| Движение. Упражнения
Пример 1. Создание кода прорисовки системы колец.
Вариант1.
|
void setup()
{
size (400, 400);
frameRate(1);
}
void draw()
{
background(255);
float m = 300;
stroke(5);
// цикл до тех пор, пока значение m - true
while(m > 0)
{
// Выберите случайный цвет из нашей палитры
fill(random(255),random(255),random(255));
ellipse(width/2,height/2,m,m);
m = m - 20;
}
}
|
|
|
Вариант2.
|
size (400, 400);
background(255);
float m = 300;
stroke(5);
int x=(width/2);
int y=(width/2);
// цикл до тех пор, пока значение m - true
while(m > 0)
{
// Выберите случайный цвет из нашей палитры
fill(random(255),random(255),random(255));
// ellipse(width/2,height/2,m,m);
ellipse(x,y,m,m);
m = m - 20;
println("x= ",x," y= ", y, " m= ",m);
} |
 |
Задание. Установить отличие в работе кода вариантов.
Движение
Иллюзия движения на экране создается с помощью последовательности неподвижных изображений, сменяющих друг друга. Каждое изображение имеет небольшое отличие от другого. Эффект анимации достигается из-за инерционности зрения. Наш мозг воспринимает последовательность похожих изображений как движение.
Частота кадров
Processing “прокручивает” код в блоке draw() 60 раз в секунду для создания плавного движения. Переменная frameRate контролирует скорость выполнения программы.
ПРИМЕЧАНИЕ: Processing запускает код 60 раз в секунду, но если для запуска блока draw() требуется больше времени, чем 1/60 секунды, частота кадров снизится. Функция frameRate() определяет максимальную частоту кадров, но реальная частота кадров зависит от компьютера, на котором запущена ваша программа.
Скорость и направление
Для написания примеров кода с плавным движением мы используем тип данных float. Этот тип переменной сохраняет данные с дробной частью, что обеспечивает более высокое разрешение для работы с движением.
Например, когда мы используем:
- тип int, самая маленькое расстояние, на которое может сместиться объект за один кадр, это один пиксель (1, 2, 3, 4,.),
- но с типом float вы можете передвигать объекты на любое растояние (1.01, 1.01, 1.02, 1.03,.).
Пример1. Передвигаем фигуру
В следующем примере значение переменной x возрастает и фигура перемещается слева направо:
PS! функция arc() имеет 6 параметров:
- первый и второй параметр устанавливают положение,
- третий и четвертый - определяют ширину и высоту,
- пятый параметр устанавливает угол начала дуги, (в радианах по умолчанию) по часовой стрелке
- шестой устанавливает конец дуги.
В процессинге заполнение фигур происходит по умолчанию, даже для незамкнутых фигур
|
int r = 40;// для запоминания значения ширины/высоты
float x = -r;//для хранения значения координаты
float z = 0.5;//шаг изменения значения координаты х от кадра к кадру
void setup() {
size(240, 120);
smooth();
ellipseMode(RADIUS);/* (х,у) - центр эллипса (режим по умолчанию), ширина и высота – радиусы, а не диаметры */
}
void draw() {
background(0);
x += z; // Увеличить значение х
arc(x, 60, r, r, 0.52, 5.76);//рисуем часть эллипса
} |
 |
ellipse(x,y,width,height)
ellipseMode() меняет интерпритацию параметров эллипса.
|
|
|
Когда вы запустите этот код, вы заметите, что фигура выходит за правую границу окна, когда значение переменной x превышает его ширину.
Величина x по-прежнему растет, но фигура уже не видна.
Пример 2. Разворот
Существует множество альтернативных вариантов примера 2, вы можете реализовать их в соответствии с вашими предпочтениями. Для начала мы попробуем усовершенствовать код так, чтобы фигура возвращалась к левому краю окна после ухода за правый край. Здесь окно представляется как развернутый цилиндр, вокруг которого вращается фигура:
|
int r = 40;
float x = -r;
float z = 0.5;
void setup() {
size(240, 120);
smooth();
ellipseMode(RADIUS);
}
void draw() {
background(0);
x += z; // Увеличение x
if (x > width+r) { // Если фигура вышла за край окна,
x = -r; // она возвращается к левому краю
}
arc(x, 60, r, r, 0.52, 5.76);
println("x = ", x);
}
|
 |
|
В каждом блоке draw() код сравнивает величину x с шириной экрана (плюс радиус фигуры). Если она больше, x присваивается отрицательное значение и фигура продолжает перемещаться слева направо от левой границы окна.
|
 |
 |
Пример 3. Фигура отскакивает от стенки 
В это примере, вместо возврата фигуры к левому краю, мы добавим к примеру 2 возможность изменять направление движения фигуры по достижении края окна. Для этого мы объявим переменную, в которую запишем направление движения. Фигура движется вправо при значении 1, влево - при значении -1:
|
int r = 40;
float x = 110;
float z = 0.5;
int direction = 1;
void setup() {
size(240, 120);
smooth();
ellipseMode(RADIUS);
}
void draw() {
background(0);
x += z * direction;
if ((x > width-r) || (x < r)) {
direction = - direction; // Flip direction }
if (direction == 1) {
arc(x, 60, r, r, 0.52, 5.76); // Фигура смотрит вправо
} else {
arc(x, 60, r, r, 3.67, 8.9); // Фигура смотрит влево
}
}
|
 |
Когда фигура достигает края, код изменяет знак переменной direction, изменяя направление движения. Например, если к моменту достижения границы значение переменной было положительно, код меняет его на отрицательное.
| |
