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

1. Компьютерная графика
3D в processing
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. 3D в processing
•
•
•
•
•
•
В processing есть 2 режима отображения 3D: P3D и OPENGL
P3D основано на программной реализации, OPENGL
выполняется через OpenGL («железо»). За несколькими
исключениями, в них одни и те же функции и примитивы
2D примитивы и функции можно использовать в 3D
(возможно, с несколькими исключениями)
Некоторые из примитивов, такие как линии (line),
точки (point), кривые и фигуры (примитив vertex), могут
задаваться через 3 координаты: x, y, z
Остальные 2D примитивы тоже можно использовать (с
z=0 по умолчанию)
Функции stroke, fill, text и image (текстуры) тоже можно
использовать в 3D

3. 3D в processing
Геометрические преобразования в 3D
Перенос
Вращение вокруг x
Вращение вокруг y
Масштаб
Вращение вокруг z

4. 3D в processing
Геометрические преобразования в 3D
Перенос
translate(tx, ty, tz)
Масштабирование
scale(sx, sy, sz)
Вращение вокруг оси
rotateX(), rotateY(), rotateZ()

5. 3D в processing
•
•
•
По умолчанию используется перспективная проекция
(0,0,0) находится в верхнем левом углу
-z уходит вдаль
-z
(0,0,0)
yx+z

6. 3D в processing
// Эллипс, вращающийся
// вокруг оси y
float ang = 0.0;
void setup()
{
size(400, 400, P3D);
stroke(255, 0, 0);
noFill();
}
void draw()
{
background(0);
// Рисование с центром в
// (0,0,0)
translate(width/2, height/2);
rotateY(ang += 0.1);
ellipse(0, 0, 300, 200);
}

7. 3D в processing
box(width, height, depth)
•
Рисует кубоид, правильную призму, с центром в (0,0,0)
с шириной (x), высотой (y) и глубиной (z) в качестве
аргументов
sphere(radius)
•
•
Рисует сферу с центром в (0,0,0) с заданным радиусом
Уровень детализации, с которой рисуется сфера, можно
настроить через функцию sphereDetail(n), где n
означает, что вершины будут порождаться через каждые
360º/n (по умолчанию, n = 30)

8. 3D в processing
// Куб, вращающийся
// вокруг трёх осей
// Версия с каркасом
void setup()
{
size(400, 400, P3D);
stroke(255, 0, 0);
noFill();
}
void draw()
{
background(0);
// Рисование с центром
// в (0,0,0)
translate(width/2, height/2);
rotateX(frameCount*PI/60.0);
rotateY(frameCount*PI/120.0);
rotateZ(frameCount*PI/180.0);
box(200, 200, 200);
}

9. 3D в processing
// Куб, вращающийся
// вокруг трёх осей
// Версия с гранями
void setup()
{
size(400, 400, P3D);
fill(255, 0, 0);
}
void draw()
{
background(0);
// Рисование с центром
// в (0,0,0)
translate(width/2, height/2);
rotateX(frameCount*PI/60.0);
rotateY(frameCount*PI/120.0);
rotateZ(frameCount*PI/180.0);
box(200, 200, 200);
}

10. 3D в processing
// Куб, вращающийся
// вокруг трёх осей
// Версия с простым освещением
void setup()
{
size(400, 400, P3D);
fill(255, 0, 0);
noStroke();
}
void draw()
{
background(0);
// Простое освещение
lights();
// Рисование с центром
// в (0,0,0)
translate(width/2, height/2);
rotateX(frameCount*PI/60.0);
rotateY(frameCount*PI/120.0);
rotateZ(frameCount*PI/180.0);
box(200, 200, 200);
}

11. 3D в processing
// Интерактивный куб
float rotX = 0.0, rotY = 0.0;
int lastX, lastY;
float distX = 0.0, distY = 0.0;
void setup(){
size(400, 400, P3D);
noStroke();
fill(255, 0, 0);
}
void draw(){
background(0);
lights();
translate(width/2, height/2);
rotateX(rotX + distY);
rotateY(rotY + distX);
box(200, 200, 200);
}
void mousePressed()
{
lastX = mouseX;
lastY = mouseY;
}
void mouseDragged()
{
distX = radians(mouseX - lastX);
distY = radians(lastY - mouseY);
}
void mouseReleased()
{
rotX += distY;
rotY += distX;
distX = distY = 0.0;
}

12. Практика 7-1
•
•
•
•
Измените предыдущую программу так, чтобы было
возможно увеличение, путём перемещения куба по оси z
Для этого необходимо добавить компонент z в операцию
переноса
Изначально эта координата будет 0 и будет изменяться от
0 до -500 по шагам в 10
Используйте клавиши UP и DOWN, чтобы поймать событие
keyPressed() и изменить увеличение

13. 3D в processing
// Теперь сделаем через OpenGL
// Этот import - обязателен
import processing.opengl.*;
float rotX = 0.0, rotY = 0.0;
int lastX, lastY;
float distX = 0.0, distY = 0.0;
// Текстура
PImage foto;
void setup(){
size(400, 400, OPENGL);
noStroke();
foto = loadImage("foto.jpg");
// Мы хотим работать с текстурой в
// координатах от (0,0) до (1,1)
textureMode(NORMALIZED);
}
void draw(){
background(0);
translate(width/2, height/2);
rotateX(rotX + distY);
rotateY(rotY + distX);
// Хотим куб 200 x 200 x 200
// Рисуем от -1 до 1
scale(100, 100, 100);
beginShape(QUADS);
texture(foto);
//
//
//
//
//
//
Мы задаём вершины каждого
лица на кубе.
Последние два значения координаты текстуры,
которая соответствует
вершине
// +Z "передняя" грань
vertex(-1, -1, 1, 0, 0);
vertex( 1, -1, 1, 1, 0);
vertex( 1, 1, 1, 1, 1);
vertex(-1, 1, 1, 0, 1);
// -Z "задняя" грань
vertex( 1, -1, -1, 0, 0);
vertex(-1, -1, -1, 1, 0);
vertex(-1, 1, -1, 1, 1);
vertex( 1, 1, -1, 0, 1);
// +Y "нижняя" грань
vertex(-1, 1, 1, 0, 0);
vertex( 1, 1, 1, 1, 0);
vertex( 1, 1, -1, 1, 1);
vertex(-1, 1, -1, 0, 1);
// -Y "верхняя" грань
vertex(-1, -1, -1, 0, 0);
vertex( 1, -1, -1, 1, 0);
vertex( 1, -1, 1, 1, 1);
vertex(-1, -1, 1, 0, 1);
// +X "правая" грань
vertex( 1, -1, 1, 0, 0);
vertex( 1, -1, -1, 1, 0);
vertex( 1, 1, -1, 1, 1);
vertex( 1, 1, 1, 0, 1);
// -X "левая" грань
vertex(-1, -1, -1, 0, 0);
vertex(-1, -1, 1, 1, 0);
vertex(-1, 1, 1, 1, 1);
vertex(-1, 1, -1, 0, 1);
endShape();
}
void mousePressed()
{
lastX = mouseX;
lastY = mouseY;
}
void mouseDragged()
{
distX = radians(mouseX - lastX);
distY = radians(lastY - mouseY);
}
void mouseReleased()
{
rotX += distY;
rotY += distX;
distX = distY = 0.0;
}

14. 3D в processing

15. 3D в processing
import processing.opengl.*;
// Рисование функции в 3D
float rotX = 0.0, rotY = 0.0;
int lastX, lastY;
float distX = 0.0, distY = 0.0;
// Шаги функции
int steps = 50;
// Масштабирование по оси z
float scaleZ = 200.0;
// Увеличение по оси z
float zoomZ = -300.0;
// Размер графика
float gX = 500.0, gY = 500.0;
void setup()
{
size(500, 500, OPENGL);
noFill();
}
float function(float x, float y)
{
return x*x*x + y*y*y;
}
void draw()
{
background(0);
// Поместим результат в центр окна
translate(gX/2, gY/2, zoomZ);
// Вращение
rotateY(rotY + distX);
rotateX(rotX + distY);
// Перенос центра в (0, 0);
translate(-gX/2, -gY/2);
// Функция покрывает
// 400 x 400 x scaleZ
scale(gX, gY, scaleZ);
// Рисование функции
stroke(255);
drawFunction();
// Рисование осей
stroke(255, 0, 0);
line(0,0,0,2000,0,0);
stroke(0,255,0);
line(0,0,0,0,2000,0);
stroke(0,0,255);
line(0,0,0,0,0,2000);
}
void drawFunction()
{
float x, y, z;
int i = 0, j = 0;
float in_steps = 1.0 / steps;
float[][] matrix = new float[steps+1][steps+1];
for (y = 0.0, j = 0; y <= 1.0; y+=in_steps, j++)
for (x = 0.0, i = 0; x <= 1.0; x+=in_steps, i++)
matrix[i][j] = function(x, y);
for (j = 0, y = 0.0; j < steps; j++, y+=in_steps) {
beginShape(QUAD_STRIP);
for (i = 0, x = 0.0; i <= steps; i++, x+=in_steps) {
vertex(x, y, matrix[i][j]);
vertex(x, y + in_steps, matrix[i][j+1]);
}
endShape();
}
}
void mousePressed()
{
lastX = mouseX;
lastY = mouseY;
}
void mouseDragged()
{
distX = radians(mouseX - lastX);
distY = radians(lastY - mouseY);
}
void mouseReleased()
{
rotX += distY;
rotY += distX;
distX = distY = 0.0;
}

16. 3D в processing

17. Практика 7-2
•
Измените предыдущую программу, чтобы нарисовать
поверхность в «твёрдом» режиме с использованием
простой модели освещения (используйте lights()
и fill())

18. Практика 7-3
•
•
Измените предыдущую программу, чтобы нарисовать
поверхность с двухцветным градиентом (например,
красный для малых значений z, а жёлтый для больших)
Для этого используйте вызов fill() перед каждым
вызовом vertex()

19. Практика 7-4
•
Снова измените предыдущую программу, чтобы вместо
рисования функции загружать изображение, и после
перевода в серую шкалу, использовать значения пикселей
как координаты по z для полосы четырёхугольников