Компьютерная графика в Processing, часть 2. Основные...

Компьютерная графикаОсновные 2D-примитивы

Jordi Linares i PellicerEscola Politècnica Superior d’AlcoiDep. de Sistemes Informàtics i Computació[email protected]://www.dsic.upv.es/~jlinares

Режимы визуализации

• В processing есть несколько режимов визуализации: JAVA2D, P2D, P3D и OPENGL

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

• Режим визуализации определяется третьим аргументомфункции size() . Режим по умолчанию, если ничего неуказано, JAVA2D.

• Режимы JAVA2D и P2D поддерживают двухмерноепредставление. P2D более производителен (аппаратное ускорение), но в нём пока ещё не реализованы всефункции из JAVA2D.

• Мы будем использовать режим по умолчанию, JAVA2D, так как в нём есть все 2D-функции

Система координат в 2D

• Размер окна определяется в функцииsize(), обычно это одно из первыхдействий, происходящих вфункции setup()

• Точка (0,0)лежит слева вверху,положительное направление осиx — слева направо, оси y — сверху вниз

Основные 2D-примитивы в

processing

• Точки

• Линии

• Эллипсы / Окружности / Дуги

• Прямоугольники

• Треугольники

• Четырёхугольники

• Кривые (Безье и Кэтмул-Рома)

• Объекты (свободные формы)

Цвет и настройки

В processing многие функции вызывают изменение состояния =>они устанавливают параметры, которые будут оставаться активными, пока мы их не поменяем. Пример: =>stroke()меняет цвет кисти до тех пор, пока новый цвет не будет задан

• Цвет кисти можно менять функцией stroke()

• stroke(255) => RGB(255, 255, 255), один цвет означает параметр внутри 256-значной серой шкалы (grayscale)

• stroke(128, 0, 128) => Любой цвет в RGB

• Толщина кисти указывается функцией strokeWeight()

• strokeWeight(5) => Толщина в 5 пикселей

• Цвет заполнения 2D-фигуры указывается функцией fill()

• fill(128) => RGB(128, 128, 128)

• fill(200, 120, 90) => RGB(200, 120, 90)

background()

• Стирает окно и заполняет указанным цветом

• Примеры: background(0) background(128, 100, 128)

noFill()

• 2D-фигуры не будут заполнены

noStroke()

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

Цвет и настройки

Точки

point(x, y)

• Рисует точку в координатах (x, y)

• Цвет задаётся stroke(), а толщина (размер) - функциейstrokeWeight()

set(x, y, color)

• Рисует точку в координатах (x, y) с определённым цветом

• Не учитывает stroke() или strokeWeight()

• Пример:• set(50, 50, color(128, 120, 255))

Другие применения set (в следующих уроках будет подробнее)

• Функция set может переместить изображение в (x, y)

• set может быть применена к изображению

Линии

line(x1, y1, x2, y2)

• Рисует линию между точками (x1, y1) и (x2, y2)

• С помощью функции stroke мы можем определить их свойства

• Пример:

size(100, 100);background(0);stroke(255);strokeWeight(5);line(0, 0, 99, 99);

size(200, 200);background(0);for (int i=0; i<100; i++) {

stroke(random(255), random(255), random(255));strokeWeight(random(10));line(0, 0, random(200), random(200));

}

• Окончание линии

• ROUND (скруглённое), PROJECT (линия удлиняется в зависимости от толщины кисти), SQUARE (квадратное)

• Пример:

size(100, 100);background(0);stroke(255);strokeWeight(10);

strokeCap(ROUND);line(50,50,150,50);

strokeCap(PROJECT);line(50,75,150,75);

strokeCap(SQUARE);line(50,100,150,100);

Линии

Эллипсы и окружности

ellipse(x, y, width, height)

• Рисует эллипс в точке с координатами (x, y) с указанными шириной и высотой

ellipseMode()

• Меняет интерпретацию параметров эллипса

• ellipseMode(CENTER) => (x, y) - центр эллипса (режимпо умолчанию).

• ellipseMode(RADIUS) => как в предыдущем случае, ноширина и высота — радиусы, а не диаметры

• ellipseMode(CORNER) => (x, y) определяет верхний левый угол ограничивающего эллипс прямоугольника (bounding box).

• ellipseMode(CORNERS) => четыре параметра определяюткоординаты противоположных углов ограничивающего прямоугольника

• Пример:

size(200, 200);background(0);

stroke(255, 0, 0);strokeWeight(5);fill(0, 255, 0);

// (x, y) и диаметрыellipse(100, 100, 100, 50);

// 2 противоположных углаellipseMode(CORNERS);ellipse(0, 0, 50, 50);

Эллипсы и окружности

Дуги

arc(x, y, width, height, start, end)

• Рисует дугу как сектор эллипса с координатами (x, y) и суказанными шириной и высотой. Этот фрагмент или сектор определяется углами, заданными как start и end (в радианах по умолчанию) по часовой стрелке

• Их параметры тоже интерпретируются подобно ellipseMode()

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

• Пример:



// (x, y) и диаметрыarc(100, 100, 100, 100, 0, PI / 2.0);

// Не заполнятьnoFill();arc(100, 100, 100, 100, PI, 3 * PI / 2.0);

Прямоугольники

rect(x, y, width, height)

• Рисует прямоугольник

rectMode()

• Меняет интерпретацию параметров прямоугольника

• Параметры те же, что и у эллипса: CENTER , RADIUS, CORNER и CORNERS

• Режим по умолчанию - CORNER (x и y — координаты левого угла)

Треугольники и четырёхугольники

triangle(x1, y1, x2, y2, x3, y3)

• Рисует треугольник по трём вершинам

quad(x1, y1, x2, y2, x3, y3, x4, y4)

• Рисует четырёхугольник. Первая точка - (x1, y1), остальные 3 вершины определены по часовой или против часовой стрелки(любым из вариантов)



// (100,25) - (25,175) - (175,175)triangle(100,25,25,175,175,175);

// По часовой// (38,231) - (186,220) - (169,363) - (30,376)quad(38, 231, 186, 220, 169, 363, 30, 376);

Практика 2-1

Представление тригонометрических функций• Нарисуйте функции синуса и косинуса, значения от 0 до 2*pi радиан• (0,0) в декартовых координатах находится в x=0 и y=height/2 в

координатах окна (слева с краю, с середины)• Путь от 0 до 2*pi должен занять большую часть окна• Запрограммируйте функцию, которая рисует синус, другую для

косинуса.Входные параметры — цвет, толщина кисти и ширина и высота окна

• На заднем плане нарисуйте координатную декартову ось.

Кривые Безьеbezier(x1, y1, cx1, cy2, cx2, cy2, x2, y2)

• Кубические кривые (имеют точку перегиба)• Называются в честь инженера и математика Пьера Безье• Определяются через 4 точки:

• Первая и последняя — начальная и конечнаяточка кривой

• Центральные точки — контрольные точки, и они«притягивают» кривую, изменяя её, но не заставляя проходить через них

void setup(){ size(400, 400); background(0); // Рисуем две кривые Безье drawBezier(100,140,50,40,350,40,300,140); drawBezier(50,290,150,190,200,390,350,290); }

void drawBezier(int x1, int y1, int cx1, int cy1, int cx2, int cy2, int x2, int y2){ noFill(); stroke(255); // Сама кривая Безье bezier(x1, y1, // Начальная точка cx1, cy1, // Контрольная точка 1 cx2, cy2, // Контрольная точка 2 x2, y2); // Конечная точка // Нарисуем контрольные точки, чтобы // лучше понять их влияние strokeWeight(3); stroke(255,0,0);

point(x1, y1); point(x2, y2); point(cx1, cy1); point(cx2, cy2); strokeWeight(1); line(x1, y1, cx1, cy1); line(x2, y2, cx2, cy2);}

Кривые Безье

Кривые Кэтмулл-Рома

curve(cx1, cy1, x1, y1, x2, y2, cx2, cx2)

• Их ввели Эдвин Катмулл и Рафи Ром• Полезно, чтобы сделать кривую, интерполируемую

множеством точек и очень полезно для компьютерной графики - например, для анимации с ключевыми кадрами(keyframe animation)

• curve рисует кривую от (x1, y1) до (x2, y2). Перваяконтрольная точка определяет кривизну в (x1, y1).Последняя контрольная точка определяет кривизну в (x2, y2).

• Особенно интересны внутри «фигур» - свободных форм, где могут быть определены коллекции вершин.

Кривые Кэтмулл-Рома

size(175, 125);

background(0);noFill();stroke(255);

curve(25, 25, // Контрольная точка 1 125, 25, // (x1, y1) 125, 75, // (x2, y1) 25, 75); // Контрольная точка 2 // Нарисуем все точки, чтобы лучше понять, как// это всё работает.strokeWeight(3);stroke(255, 0, 0);point(125, 25); point(125, 75);point(25, 25); point(25, 75);

strokeWeight(1);line(25, 25, 125, 25);line(125, 75, 25, 75);

Фигуры

• В processing можно рисовать свободные и сложныеформы простым перечислением их вершин

• Основной примитив - vertex(x, y) , который определяет одну из вершин фигуры

• Чтобы начать фигуру, нужно вызвать beginShape().Потом через определяются вершины.vertex()Фигуру можно завершить вызовом endShape().

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

• Однако, не любая функция может быть использована beginShape() и endShape() . Это касается

rotate(), scale() и translate(), об этом будет дальше отдельно.

между

• Когдаопределять полилинии.

beginShape() вызывается без аргументов, она позволяет

• Если параметр CLOSE определён внутри endShape() , полилинияавтоматически замкнётся: последняя вершина соединится с первой

• Пример:


// Фигуры также могут быть охарактеризованы// с помощью функций fill и stroke.// По умолчанию фигуры заполнены, и,// чтобы это отключить, используется noFill().noFill();stroke(255);

// ПолилинияbeginShape();

// Теперь мы можем определить вершины ...vertex(25, 25);vertex(175, 25);vertex(175, 175);vertex(25, 175);

// Конец фигурыendShape();

Фигуры

• С параметром CLOSE фигура будет замкнута:


// Теперь мы можем задать вершины ...vertex(25, 25);vertex(175, 25);vertex(175, 175);vertex(25, 175);

// Конец фигурыendShape(CLOSE);

Фигуры

• Можно передать аргумент в функцию beginShape() и задать другую интерпретацию вершин:

• POINTS. Вершины рисуются как множество точек

• LINES. Вершины, по парам, задают линии

• TRIANGLES. Вершины, группами по 3, задаюттреугольники.

• TRIANGLE_STRIP. Лента треугольников.

• TRIANGLE_FAN. Веер треугольников.

• QUADS. Вершины, группами по четыре, задают четырёхугольники.

• QUAD_STRIP. Лента четырёхугольников.

Фигуры

// ТочкиbeginShape(POINTS);

// Теперь мы определяем вершины ...vertex(25, 25);vertex(175, 25);vertex(175, 175);vertex(25, 175);


// ЛинииbeginShape(LINES);



Фигуры

// ТреугольникиbeginShape(TRIANGLES);

// Теперь мы определяем вершины ...vertex(25, 25);vertex(50, 175);vertex(125, 40);

vertex(125, 150);vertex(120, 60);vertex(180, 190);


// ЧетырёхугольникиbeginShape(QUADS);


vertex(130, 60);vertex(190, 70);vertex(195, 150);vertex(140, 190);


Фигуры

TRIANGLE_STRIP QUAD_STRIP

TRIANGLE_FAN(Последняя точка должна повторяться)

Фигуры

• Кроме определения вершин с помощью vertex()в processing есть функции curveVertex()иbezierVertex(), рисующие кривые вместо прямыхлиний

• Эти функции работают только с непараметрической версией beginShape()

• С этими функциями можно создать цепочку кубических кривых Безье или Кэтмулл-Рома: bezierVertex() или curveVertex()

• Их можно комбинировать с функцией vertex() и последовательно создавать сложные функции

Фигуры

curveVertex(x, y)

• Функция curveVertex() задаёт кривую Кэтмул-Рома,которая может интерполировать любое множество точек

• Первая и последняя точки, заданные ,curveVertex()расцениваются как контрольные, и определяют начальнуюи конечную кривизну цепочки кривых.

• Внутренние точки будут входить в интерполяцию множеством кубических кривых

• Должны быть заданы как минимум 4 вершины через функцию , внутри и curveVertex() beginShape()

endShape()

Фигуры

size(400, 400);background(0);noFill();stroke(255);


// Теперь мы определяем вершины ...curveVertex(0, 0);

for (int i = 0; i < 20; i++){ int x = (int)random(400), y = (int)random(400);

curveVertex(x, y); // Точка кривой rect(x-2, y-2, 4, 4); // Мы рисуем их, чтобы было проще воспринимать}

curveVertex(width-1, height-1);


Фигуры

bezierVertex(cx1, cy1, cx2, cy2, x, y)

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

• Каждый вызов bezierVertex() после первой вершиныопределит две новые контрольные точки и опорную точку

• Опорная точка будет начальной точкой в случае новых вызовов bezierVertex()

• Последняя точка кривой Безье будет первой точкой уследующей. Чтобы обеспечить гладкость (непрерывность)в месте соединения, эти точки должны лежать на одной: последняя контрольная точка первой кривой, первая контрольная точка второй кривой и конечнаяи начальная точки кривых (на самом деле — одна и та же)

Фигуры

size(300, 200);background(0);noFill();stroke(255);


vertex(10,100); // Первая точка кривойbezierVertex(70, 140, 160, 140, 150, 100);bezierVertex(140, 60, 210, 60, 290, 100);

// // Конец фигурыendShape();

// Рисуем точки, чтобы результат// был лучше виденstrokeWeight(5);

// Точки кривойstroke(255);point(10, 100); point(150, 100); point(290, 100);

// Контрольные точкиstroke(255, 0, 0);point(70, 140); point(160, 140);point(140, 60); point(210, 60);

// Контрольные точки по линии...strokeWeight(1);line(160, 140, 140, 60);

Фигуры

// Создание сложных фигур// путём комбинирования линейных и// кривых функций.size(400, 300);background(0);stroke(255);noFill();


vertex(10, 10);vertex(150, 10);

bezierVertex(175, 200, 225, 200, 250, 10);

vertex(390, 10);vertex(390, 290);vertex(10, 290);vertex(10, 10);

endShape();

Фигуры


• Перепишите код Практики 1-1 с использованием фигур, чтобы нарисовать n-сторонний многоугольник


• В целях статистики необходимо строить круговую диаграммузначений в процентах

• Элементы лежат в массиве, и их сумма равна 100%

• Пример:float[] values = {25.0, 45.0, 5.0, 15.0, 10.0};

• Напишите функцию, получающую этот массив на входе и отображающую эту информацию в виде круговой диаграммы

• Функция на входе также получает центр и радиус диаграммы

• Функция может узнать число элементовмассива из атрибута length

• Выберите случайный цвет для каждого сектора


• Напишите функцию, аналогичную функции из Практики 2-3,но теперь рисующую двухмерную столбчатую диаграмму.

• Возьмите максимально большой размер экрана и нарисуйтекоординатные оси

• Ширина столбца будет функцией от общего числа величин и ширины окна; высота столбца — функцией значения соответствующей ему величины имаксимального значения среди всех величин, учитывая, что высота столбца с максимальной величиной должна быть равна высоте окна.

Компьютерная графика в Processing, часть 2. Основные...

Education

Transcript of Компьютерная графика в Processing, часть 2. Основные...