| Основы графических построений
Экран монитора (независимо от того, в каком устройстве он расположен: и обычный монитор, и ноутбук, и смартфон, и планшет имеют одинаковые принципы функционирования мониторов) состоит из сетки пикселей, которую можно представить как листок в клеточку.
Идентификация места на этой сетке происходит из-за указания координат х и у:
|
Обратите внимание, что:
- отсчет координат начинается с левого верхнего угла.
- поля (сетки), с которой работает скетч задается командой size,
- цвет фона определяется в измерении Red / Green / Blue командой background,
- команда point рисует точку в заданных координатах.
|
пример 1
Для рисования линии между двумя точками - существует команда line - line (x1, y1, x2, y2)
|
size(400,400);//устанавливает размер окна
background(255,0,0); //цвет заливки (фона) окна
strokeWeight(3); //устанавливает толщину линии
line(40,30,60,90); //рисование линии
Числа 40,30 - это координаты верхней левой точки линии, а 60,90 - координаты правой нижней точки линии.
|
Задание . Измените код , нарисовав второй отрезок,чтобы получилась картина как на рисунке
|
Окончание линии.
Установить атрибуты линий
|
Функция strokeJoin() определяет вид соединения линий (углы);
- strokeJoin(ROUND); // Скруглить углы
- strokeJoin(BEVEL); // Сделать скос на углах
Функция strokeCap() - как будут выглядеть начальная и конечная точки линий
- strokeCap(SQUARE); // Концы линий – квадратные
- strokeCap(ROUND); // Скруглить концы линий
- strokeCap(PROJECT); //линия удлиняется в зависимости от толщины кисти
|
|
size(200,150);//устанавливает размер окна
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);
|
Прямоугольники
rect(x,y,width,height) - рисует прямоугольник
rect(MODE) - меняет интерпретацию параметров прямоугольника:
- rectMode(CENTER) => первая пара аргументов отвечает за центр прямоугольника (а не за верхний левый угол
- rectMode(RADIUS) => так же как и CENTER но вторые два аргумента отвечают за половину соответственно ширины и высоты.
- rectMode(CORNER) => первая пара аргументов отвечает за верхний левый угол (вариант по умолчанию)
- rectMode(CORNERS) =>вторые два аргумента обрабатываются как координаты правого нижнего угла (а не ширина с высотой)
режим по умолчанию – CORNER (х и у – координаты левого угла )
пример 2
По этим же координатам можно нарисовать прямоугольник rect - rect (x1, y1, x2, y2)
|
size(400,400);//устанавливает размер окна
background(255,0,0); //цвет заливки (фона) окна
stroke(0,200,0); //устанавливает цвет контура прямоугольника
strokeWeight(3); //устанавливает толщину линий контура
rect(40,30,60,90); //рисование прямоугольника
Обратите внимание, что числа x1, y1- это координаты верхнего левого угла прямоугольника, а x2, y2- его размеры в ширину(60) и высоту (90) соответственно.
|
цвета
1. Цвет кодируется в системе RGB, с дополнительным параметром прозрачности (alpha).
2. Цвет линии (цвет рисования) назначается командой stroke (red, green, blue)
3. Цвет заливки (фигуры) назначается командой fill (red, green, blue)
пример 3
|
size(400,400);//устанавливает размер окна
background(255,0,0); //цвет заливки (фона) окна
stroke(0,250,0); //устанавливает цвет контура прямоугольника
fill(255,255,0); //цвет заливки (фона) прямоугольника
strokeWeight(4); //устанавливает толщину линий контура прямоугольника
rect(100,100,200,150); //рисование прямоугольника
strokeWeight(6); //устанавливает толщину линии
stroke(0,0,255); //устанавливает цвет линии
line(100,100,200,200); // рисует линию
|
пример 4
Устанавливаем прозрачность
Добавив четвертый параметр к функциям fill() и stroke(), мы сможем регулировать прозрачность.
Этот параметр, также известный как величина alpha, тоже использует диапазон от 0 до 255 для количественного выражения прозрачности:
- величина 0 задает полностью прозрачный объект (он не отобразится),
- 255 - непрозрачный,
- с помощью промежуточных значений можно смешивать цвета
Ее можно указывать отдельной командой, или добавлять четвертый параметр у команды назначения цвета, например: fill (255,255,0, 128)
Полупрозрачный желтый цвет наложился на красный и получили оранжевый:
|
size(400,400);//устанавливает размер окна
background(255,0,0); //цвет заливки (фона) окна
stroke(0,250,0); //устанавливает цвет контура прямоугольника
fill(255,255,0,70); //цвет заливки (фона) прямоугольника, значение прозрачности -70
strokeWeight(4); //устанавливает толщину линий контура прямоугольника
rect(100,100,200,150); //рисование прямоугольника
strokeWeight(6); //устанавливает толщину линии
stroke(0,0,255); //устанавливает цвет линии
line(100,100,200,200); // рисует линию
|
пример 5
|
size(400,400);//устанавливает размер окна
background(255,0,0); //цвет заливки (фона) окна
stroke(0,250,0); //устанавливает цвет контура прямоугольника
fill(255,255,0); //цвет заливки первого прямоугольника
strokeWeight(4); //устанавливает толщину линий контура прямоугольника
rect(100,100,100,100); //рисование первого прямоугольника
fill(0,255,0,128); //цвет заливки второго прямоугольника, значение прозрачности -128
rect(150,150,100,100); //рисование второго прямоугольника
|
Треугольники и четырехугольники
triangle(х1,у1,х2,у2,х3,у3) - рисует треугольник.
- три пары координат x, y для трех вершин треугольника,
- для упрощения задачи советуем записывать эти точки по часовой стрелке.
quad(x1,y1,x2,y2,x3,y3,x4,у4) - рисует четырехугольник.
- первая точка - (х1,у1),
- остальные три вершины определенны по часовой или протии часовой стрелки (любым из вариантов)
пример 6
|
size(400,400);//устанавливает размер окна
background(0); //цвет заливки окна
stroke(255,0,0);
strokeWeight(5);
fill(40,255,0);//устанавливает цвет заливки фигуры
triangle(100,25,25,175,175,100); //(100,25) - (25,175) - (175,100)
//по часовой стрелке
//(38,231) - (186,220) - (169,363) - (30,376)
quad(38,231,186,220,169,363,30,376);
|
Рисуем эллипсы и окружности
ellipse(x,y,width,height)
- рисует эллипс в точке с координатами (х,у) с указанными шириной и высотой
ellipseMode()
Меняет интерпретацию параметров эллипса:
- ellipseMode(CENTER) => (х,у) - центр эллипса (режим по умолчанию)
- ellipseMode(RADIUS) => как и в предыдущем случае, но ширина и высота – радиусы, а не диаметры
- ellipseMode(CORNER) => (х,у) - определяет левый верхний угол ограничивающего эллипс прямоугольника
- ellipseMode(CORNERS) => четыре параметра определяют координаты противоположных углов ограничивающего прямоугольника.
пример 7
|
|
size(200,200);//устанавливает размер окна
background(0,150,60); //цвет заливки окна
stroke(255,0,0);
strokeWeight(5);
fill(40,255,0);
/* рисует эллипс в точке с координатами (100,100)
с указанными шириной(100) и высотой(50) */
ellipse(100,100,100,50);
/*четыре параметра определяют координаты противоположных углов
ограничивающего прямоугольника.*/
ellipseMode(CORNER);
ellipse(0,0,50,50); // рисуем эллипс
|
пример 8
|
size(400,400);//устанавливает размер окна
background(0,26,51); //цвет заливки окна _ темно-синий цвет
noStroke(); // фигуры не будут иметь внешних границ
smooth(); // у фигур будут сглаженные края
fill(255,0,0); //цвет заливки - красный
ellipse(132,82,200,200) ; //красный круг
fill(0,255,0); //цвет заливки - зеленый
ellipse(228,-16,200,200) ; //зеленый круг
fill(0,0,255); //цвет заливки - синий
ellipse(268,118,200,200) ; //синий круг
|
Использование модели RGB может не быть интуитивно понятным, поэтому используйте цветовую палитру Tools-Color Selector:
⇒
Выберите желаемый цвет, а затем используйте параметры R, G и B для функций background(), fill() и stroke().
пример 9. Устанавливаем прозрачность
|
size(480,120);//устанавливает размер окна
background(204,226,225); //цвет заливки окна _ светло-синий цвет
noStroke(); // фигуры не будут иметь внешних границ
smooth(); // у фигур будут сглаженные края
fill(255,0,0,160); //цвет заливки - красный
ellipse(132,82,200,200) ; //красный круг
fill(0,255,0,160); //цвет заливки - зеленый
ellipse(228,-16,200,200) ; //зеленый круг
fill(0,0,255,160); //цвет заливки - синий
ellipse(268,118,200,200) ; //синий круг
|
пример 10. Рисуем четыре круга
void setup () {
size (500, 500);
smooth ();
background (255);
noLoop ();
fill (50, 80);
stroke (100);
strokeWeight (3);
}
void draw () {
ellipse (250 ,200 ,100 ,100);
ellipse (250 -50 ,250 ,100 ,100);
ellipse (250+50 ,250 ,100 ,100);
ellipse (250 ,250+50 ,100 ,100);
}
|
|
Рисуем часть эллипса
Функция arc() позволяет изобразить часть эллипса - arc(x,y,width,height,start,end).
Рисует дугу, как сектор эллипса с координатами (х,у) и с указанными шириной и высотой.
Этот фрагмент или сектор определяется углами , заданными как start и end (в радианах по умолчанию) по часовой стрелке
Имеет 6 параметров:
- Первый и второй параметр устанавливают положение,
- третий и четвертый - определяют ширину и высоту,
- пятый параметр устанавливает угол начала дуги,
- шестой устанавливает конец дуги.
- их параметры тоже интерпретируются подобно ellipseMode()
- в процессинге заполнение фигур происходит по умолчанию, даже для незамкнутых фигур. Функция noFill() должна быть вызвана явно, если заполнение нежелательно.
Значения 4 углов в радианах используются настолько часто, что в Processing им присвоены имена:
- PI - 180,
- QUARTER_PI - 45,
- НALF_PI - 90,
- TWO_PI - 360.
пример 11
|
stroke(255,0,0);
strokeWeight(5);
fill(40,255,0);//устанавливает цвет заливки фигуры
arc(100,100,100,100,0,PI/2); //нач.угол 0 градусов, кон. угол 90 градусов
noFill(); // не заполнять
arc(100,100,100,100,PI,3*PI/2); //нач.угол 90 градусов, кон.угол 270 градусов
|
пример 12
|
size(480,120);//устанавливает размер окна
background(204,226,225); //цвет заливки окна _ светло-синий цвет
arc(90,60,80,80,0,HALF_PI); //start = 0, end = 90(градусов) или 3.14 радиан
arc(190,60,80,80,0,PI+HALF_PI);//start = 0, end = 270(градусов) или 4.71 радиан
arc(290,60,80,80,PI,TWO_PI +HALF_PI);//start = 90, end = 450(градусов) или 1.57+6.29 радиан
arc(390,60,80,80,QUARTER_PI,PI +QUARTER_PI);//start = 45, end = 225(градусов) или 3.93 радиан
|
| |