Четверг, 14.11.2019, 22:04
Главная | Регистрация | Вход Приветствую Вас Гость | RSS


Меню сайта


Статистика

Онлайн всего: 1
Гостей: 1
Пользователей: 0


Тестування онлайн
тестування онлайн 


Социальные закладк

Основы графических построений
Экран монитора (независимо от того, в каком устройстве он расположен: и обычный монитор, и ноутбук, и смартфон, и планшет имеют одинаковые принципы функционирования мониторов) состоит из сетки пикселей, которую можно представить как листок в клеточку.
Идентификация места на этой сетке происходит из-за указания координат х и у:

Обратите внимание, что:

  1. отсчет координат начинается с левого верхнего угла.
  2.  поля (сетки), с которой работает скетч задается командой size,
  3. цвет фона определяется в измерении Red / Green / Blue командой background,
  4. команда 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 радиан

 

Форма входа
Поиск
Календарь
«  Ноябрь 2019  »
ПнВтСрЧтПтСбВс
    123
45678910
11121314151617
18192021222324
252627282930
Архив записей
Друзья сайта
  • Официальный блог
  • Сообщество uCoz
  • FAQ по системе
  • Инструкции для uCoz

  • Рейтинг@Mail.ru
    Copyright MyCorp © 2019
    Конструктор сайтов - uCoz