Перевод практикума по компьютерной графике с использованием Processing.

1. Компьютерная графика
Анимация
Jordi Linares i Pellicer
Escola Politècnica Superior d’Alcoi
Dep. de Sistemes Informàtics i Computació
jlinares@dsic.upv.es
http://www.dsic.upv.es/~jlinares

2. Анимация
•
•
•
•
•
В processing очень легко делать анимацию через функцию
draw()
Если мы определим в приложении функцию draw(),
она будет постоянно запускаться в бесконечном цикле
(в отдельном потоке))
Изначально для draw() частота повторения равняется
60 раз в секунду
Это поведение можно изменить функцией frameRate()
frameRate() лишь задаёт цель, но будет ли она
достигнута, зависит от возможностей компьютера —
сможет ли он вызывать draw() с указанной частотой.

3. Анимация
//
//
//
//
Классический пример:
прыгающий мячик
Если хотим работать с анимацией, мы
должны определить функции setup() и draw()
// Местоположение
int px, py;
// Скорость
int vx, vy;
// Диаметр мяча
int diametre = 20;
void setup()
{
size(600, 300);
fill(255);
noStroke();
// Изначальное
// местоположение мяча
px = width/4;
py = height/2;
// Начальная скорость
vx = vy = 1;
}
// Рисование
void draw()
{
background(0);
// Обнаружение столкновений
// и прыгание
if (px + diametre/2 > width - 1 ||
px - diametre/2 < 0)
vx *= -1;
if (py + diametre/2 > height - 1 ||
py - diametre/2 < 0)
vy *= -1;
// Обновление местоположений
px += vx;
py += vy;
// Рисование мяча
ellipse(px, py, diametre, diametre);
}

4. Анимация
// Эффект следа...
// Заменяем background(0)
// на следующее:
...
void draw()
{
// заполняем всё окно
// цветом RGB (0, 0, 0) и
// прозрачностью 20
fill(0, 20);
rect(0, 0, width, height);
// Заполняем 255, чтобы нарисовать
// мяч
fill(255);
...

5. Практика 5-1
•
•
•
Измените предыдущую программу так, чтобы рисовать
n прыгающих мячей. Используйте массивы, чтобы
изменять скорость и местоположение каждого мяча
Изначальные местоположения должны быть случайны,
с учётом диаметра мячей и размера окна
Скорости тоже должны быть случайны, со значениями
от -4 до 4 (не включая нуля)

6. Анимация
•
Учёт силы притяжения:
Интегрирование по Эйлеру:
F = m· g
Сила
притяжения (g)
a=g
v(t+1) = v(t) + a
e(t+1) = e(t) + v(t+1)

7. Анимация
// Изучаем эффект
// Местоположение
float px, py;
// Скорость
float vx, vy;
// Диаметр мяча
int diametre = 20;
// Сила притяжения
float gravity = 0.5;
void setup()
{
size(600, 300);
fill(255);
noStroke();
// Изначальное притяжение мяча
px = width/4;
py = diametre/2;
// Изначальная скорость
vx = vy = 1.0;
// Изначальный фон
background(0);
}
void draw()
{
fill(0, 20);
rect(0, 0, width, height);
fill(255);
// Обнаружение столкновений
// и прыгание
if (px + diametre/2 > width - 1)
{
vx *= -1;
px = width - 1 - diametre/2;
}
if (px - diametre/2 < 0)
{
vx *= -1;
px = diametre/2;
}
if (py + diametre/2 > height - 1)
{
vy *= -1;
py = height - 1 - diametre/2;
}
if (py - diametre/2 < 0)
{
vy *= -1;
py = diametre/2;
}
// Обновление местоположений
vy += gravity;
px += vx;
py += vy;
// Рисование
ellipse(px, py, diametre, diametre);
}

8. Анимация

9. Анимация
•
•
Чтобы поведение было более реалистичным, нужно
учитывать торможение, связанное с проходом мяча
через жидкость (атмосферу)
Этого эффекта можно достигнуть простым уменьшением
скорости, как в этом примере:
// Обновляем местоположение
vy += gravity;
vy *= 0.98; // Это - новое !
px += vx;
py += vy;

10. Анимация
// Постоянно вращающийся эллипс
float angle = 0.0;
void setup()
{
size(400, 400);
}
// Внимание!
// draw() сбрасывает матрицу
// моделирования до единичной
void draw()
{
fill(0, 20);
noStroke();
rect(0, 0, width, height);
noFill();
stroke(255);
// Вращаем вокруг центра окна,
// так что нужно
// сделать там центр (0,0).
// Мы должны учитывать
// порядок операций
// (снизу вверх)
translate(width/2, height/2);
rotate(angle+=0.1);
translate(-width/2, -height/2);
ellipse(width/2, height/2, 100, 300);
}

11. Анимация
Солнечная Система:

12. Анимация
// Планетарная система в 2D
// Солнце, 3 планеты и две луны
float angPlanet1 = 0.0,
angPlanet2 = PI/3.0,
angPlanet3 = 2.0*PI/3.0,
angMoon1 = 0.0,
angMoon2 = PI;
// Планета 2
popMatrix();
pushMatrix();
rotate(angPlanet2 += 0.05);
translate(width/2/4*2, 0);
fill(#0BA00A);
ellipse(0, 0, 15, 15);
void setup()
{
size(400, 400);
stroke(255);
frameRate(30);
}
// Луна 1
pushMatrix();
rotate(angMoon1 += 0.1);
translate(width/2/4/3, 0);
fill(#08E4FF);
ellipse(0, 0, 6, 6);
void draw()
{
background(0);
// Луна 2
popMatrix();
rotate(angMoon2 += 0.05);
translate(width/2/4/3*2, 0);
fill(#118998);
ellipse(0, 0, 6, 6);
//
//
//
//
Будем рисовать всё из центра
в (0,0) и вычислим их
окончательное местоположение
при помощи преобразований на плоскости
// Солнце будет центром
// нашей вселенной
translate(width/2, height/2);
// Солнце
fill(#F1FA03); // Цвет задан как шестнадцатеричное
//число при помощи «color selector»
ellipse(0, 0, 20, 20);
pushMatrix();
// Планета 1
rotate(angPlanet1 += 0.1);
translate(width/2/4, 0);
fill(#05FA03);
ellipse(0, 0, 15, 15);
// Планета 3
popMatrix();
rotate(angPlanet3 += 0.025);
translate(width/2/4*3, 0);
fill(#075806);
ellipse(0, 0, 15, 15);
}

13. Практика 5-2
•
Измените код планетарной системы так, чтобы рисовать
орбиты планет и лун

14. Практика 5-3
•
Измените предыдущую программу так, чтобы солнце
тоже вращалось по орбите: