Поиск
 
 

Результаты :
 


Rechercher Расширенный поиск

Кто сейчас на форуме
Сейчас посетителей на форуме: 1, из них зарегистрированных: 0, скрытых: 0 и гостей: 1

Нет

[ Посмотреть весь список ]


Больше всего посетителей (9) здесь было Вс Фев 11, 2018 12:54 pm
Самые активные пользователи за неделю
Ярослав
 


ЛАБОРАТОРНАЯ №1 — работа с графикой и цветом

Перейти вниз

ЛАБОРАТОРНАЯ №1 — работа с графикой и цветом

Сообщение автор Ярослав в Ср Мар 08, 2017 4:52 pm

В субботней группе лаба была задана 11 марта, 11 апреля прошёл крайний срок по ней.
В воскресной группе я задам эту лабу 23 апреля со сроком месяц — до 23 мая.

Скачайте проект VS2015 по ссылке (ссылка активна, если вы зайдёте на форум):

СКАЧАТЬ ПРОЕКТ

Скомпилируйте и запустите. У вас должно появиться окно с переливом:



Ваша задача — изменить код программы так, чтобы она рисовала другое изображение, в зависимости от вашего варианта. (Как это сделать — объясняю ниже).

Варианты:

Варианты (субботняя группа):
Ильдар Азизбаев — диагональная вафельная сетка

Повторяющийся узор на жёлтом фоне красными линиями. Линии диагональные с одинаковым периодом.

Константин Горя — шахматная доска

Повторяющийся узор из чередующихся голубых и жёлтых квадратов. Размер квадрата — 32 пикселя.

Кирилл Донской — горизонтальный градиент

Перелив, меняющийся от красного слева к синему справа.

Вадим Дроздов — флаг России

Разделить пространство на три равных горизонтальных полосы: белую, синюю, красную.

Руслан Иванин — сетка из точек

На белом фоне повторяющиеся синие точки, расставленные сеткой. Периодичность каждые 8 пикселей по горизонтали или вертикали.

Энрике Илиев — вертикальные полосы

Чередующиеся зелёные и чёрные вертикальные полосы. Ширина полосы 20 пикселей.

Евгений Лойко — круговой градиент

На красном фоне круг, постепенно меняющий цвет от красного снаружи к зелёному внутри. Круг должен располагаться по центру окна и быть максимального возможного размера.

Данил Монин — полупрозрачные прямоугольники

На белом фоне случайные прямоугольники случайных ярких цветов с использованием 50% полупрозрачности.
(Полезно завести функцию рисования полупрозрачного прямоугольника.)

Дмитрий Новиков — диагональный градиент

Плавный перелив. В верхнем левом углу красный, в нижнем правом белый.

Алина Преснова — кольцо

Две концентрические окружности ограничивают кольцо. Во внутренней области один цвет; в самом колце другой; снаружи третий.

Григорий Семёнов — прямоугольники

На белом фоне рисуются случайные прямоугольники случайных ярких цветов. Они могут перекрывать друг друга.
(Полезно завести функцию закрашивания прямоугольника.)

Григорий Соколов — квадратная сетка

На зелёном фоне синяя квадратная сетка. Размер квадрата 32 пикселя.

Павел Янов, Максим Назаренко — «глаза»

На жёлтом фоне нарисовать два глаза: белок, радужка, зрачок.
(Полезно завести функцию закрашивания круга.)

Варианты (воскресная группа):

Андрей Киселёв — «глаза»

На жёлтом фоне нарисовать два глаза: белок, радужка, зрачок. (Рисуются по слоям)

Леонид Крылов — постепенная прозрачность

На синем фоне располагается красный прямоугольник. Его прозрачность меняется градиентом: левый край абсолютно прозрачный, правый абсолютно непрозрачный.

Валерий Мусатов — полупрозрачные прямоугольники

При запуске программы генерируются случайные прямоугольники случайных ярких цветов.
Они рисуются на белом фоне с 50% прозрачностью. Допускается перекрытие прямоугольников.

Павел Нежинский — шахматная доска

Повторяющийся узор из чередующихся голубых и жёлтых квадратов. Размер квадрата — 32 пикселя.

Леонид Ненькин — круговой градиент

На красном фоне круг, постепенно меняющий цвет от красного снаружи к зелёному внутри. Круг должен располагаться по центру окна и быть максимального возможного размера.

Алина Преснова — кольцо

Две концентрические окружности ограничивают кольцо. Во внутренней области один цвет; в самом колце другой; снаружи третий.
Кольцо должно адаптироваться к размеру окна.

Алексей Пряников — трёхцветный горизонтальный градиент

Левый край окна красный; посередине жёлтый; правый край зелёный. Сделать плавный перелив между цветами.

Евгений Рябышев — диагональный градиент

Плавный перелив. В верхнем левом углу красный, в нижнем правом белый.

Спартак Сиденко — вертикальные полосы

Чередующиеся зелёные и чёрные вертикальные полосы. Ширина полосы 20 пикселей.

Константин Ситкин — горизонтальные полосы

Чередующиеся жёлтые и чёрные горизонтальные полосы. Высота полосы 20 пикселей.

Пётр Сорокин — четырёхцветный узор

Блок из 4 квадратов разных цветов повторяется по горизонтали и вертикали.

Антон Травкин — полупрозрачные круги

На белом фоне рисуются 3 перекрывающихся полупрозрачных круга: голубой, жёлтый, розовый.
Размеры и позиция кругов должны адаптироваться к размеру окна.

Далер Хасанов — эллипс

На голубом фоне изображён тёмно-зелёный эллипс. Он должен быть вписан в прямоугольник окна и подстраиваться при изменении.

Дмитрий Чащин — случайные прямоугольники

При запуске программы определяются случайные позиции и цвета прямоугольников.
Они рисуются на белом фоне. Допускается перекрытие. (Можно рисовать по слоям).


Последний раз редактировалось: Ярослав (Сб Ноя 11, 2017 11:53 am), всего редактировалось 6 раз(а)
avatar
Ярослав
Admin

Posts : 641
Join date : 2016-12-21
Location : Москва

Посмотреть профиль http://itstep.forum2x2.ru

Вернуться к началу Перейти вниз

Re: ЛАБОРАТОРНАЯ №1 — работа с графикой и цветом

Сообщение автор Ярослав в Ср Мар 08, 2017 5:01 pm

Проект состоит из множества файлов. Большая часть программы уже написана за вас; вам нужно редактировать только один файл, а именно, Draw.cpp.

Draw.cpp содержит прототипы нескольких уже написанных функций: init, drawPixel и getPixel.

Код:
void init()
Функция init() вызывается один раз при запуске программы. Здесь мы можете разместить код, который нужно выполнить 1 раз в начале программы, например, если требуется подготовить какие-то данные.

Код:
void drawPixel (int x, int y, int red, int green, int blue)
Функция drawPixel() закрашивает одну точку (пиксель) в нашем окне. Вы указываете координаты точки и желаемый цвет. Для простого рисования этой функции достаточно.

Код:
void getPixel (int x, int y, int rgb[3])
Функция getPixel позволяет узнать текущий цвет точки (пикселя) внутри нашего окна. Эта функция необходима для работы с полупрозрачностью.

Вам нужно изменить функцию drawPicture, чтобы она рисовала картинку согласно вашему заданию. Изначально drawPicture содержит пример кода, создающего многоцветный перелив:
Код:
void drawPicture (int width, int height) {
   // TODO: запрограммировать ваш вариант

   // Например:
   for (int y = 0; y < height; y++)
      for (int x = 0; x < width; x++) {
         float rx = float (x) / width;
         float ry = float (y) / height;
         float red = 1 - (1 - rx) * (1 - ry); // 0.0 .. 1.0
         float green = 1 - rx; // 0.0 .. 1.0
         float blue = 1 - ry; // 0.0 .. 1.0
         drawPixel (x, y, red * 255, green * 255, blue * 255);
      }
}

Вы можете смело убирать написанный код и писать свой. Мой пример перебирает все точки окна (двойным циклом for) и вычисляет цвет для каждой точки.

В функцию drawPicture() передаются два параметра — ширина и высота области для рисования. Внимание! Они могут изменяться от вызова к вызову. Хорошо написанная программа должна адаптироваться к изменяющимся размерам окна.


Последний раз редактировалось: Ярослав (Сб Апр 22, 2017 3:40 pm), всего редактировалось 3 раз(а)
avatar
Ярослав
Admin

Posts : 641
Join date : 2016-12-21
Location : Москва

Посмотреть профиль http://itstep.forum2x2.ru

Вернуться к началу Перейти вниз

Re: ЛАБОРАТОРНАЯ №1 — работа с графикой и цветом

Сообщение автор Ярослав в Ср Мар 08, 2017 5:04 pm

Координаты

В программировании Windows принята такая система координат:
• Ось X указывает вправо
• Ось Y указывает вниз
• Началом координат, то есть точкой (0; 0), является верхний левый угол нашего окна.

Функция drawPicture получает в качестве аргументов размеры области для рисования: width (ширина) и height (высота). Размеры области рисования могут меняться, например, если пользователь изменяет размер окна. Каждый раз, когда окну нужно перерисоваться, система будет вызывать вашу функцию drawPicture и перерисовывать содержимое окна. Постарайтесь написать её адаптированной для любого размера окна; и не слишком тормозящей.

При ширине width допустимые значения x будут в диапазоне:
0, 1, 2, ... width - 1.
При высоте height допустимые значения y будут в диапазоне:
0, 1, 2, ... height - 1.


Последний раз редактировалось: Ярослав (Ср Мар 08, 2017 5:17 pm), всего редактировалось 2 раз(а)
avatar
Ярослав
Admin

Posts : 641
Join date : 2016-12-21
Location : Москва

Посмотреть профиль http://itstep.forum2x2.ru

Вернуться к началу Перейти вниз

Re: ЛАБОРАТОРНАЯ №1 — работа с графикой и цветом

Сообщение автор Ярослав в Ср Мар 08, 2017 5:13 pm

Цвета

В компьютерной графике принят стандарт RGB: red, green, blue. Каждый цвет представляется как сумма красной, зелёной и синей компоненты. Каждая компонента может изменяться в диапазоне от 0 до 255.

Например:
R = 0, G = 0, B = 0 => Чёрный
R = 255, G = 0, B = 0 => Красный
R = 0, G = 255, B = 0 => Ярко-зелёный
R = 0, G = 0, B = 255 => Синий
R = 255, G = 255, B = 0 => Жёлтый
R = 255, G = 0, B = 255 => Пурпурный
R = 0, G = 255, B = 255 => Голубой
R = 255, G = 255, B = 255 => Белый

Чтобы найти любой нужный цвет или поэкспериментировать с цветами и RGB, зайдите во встроенный в Windows редактор Paint и нажмите Edit Colors (справа на панели инструментов);



Функция setPixel требует 5 параметров:
x, y — координаты точки (как описано выше)
r, g, b — задаёт желаемый цвет точки

Она рисует один пиксель. Чтобы закрасить большую площадь вам понадобится использовать циклы. Так, пример перебирает все координаты x и все координаты y области рисования. Определение правильного цвета для каждого пикселя может быть как вычислением по формуле, так и ветвлением if / else if / else.
avatar
Ярослав
Admin

Posts : 641
Join date : 2016-12-21
Location : Москва

Посмотреть профиль http://itstep.forum2x2.ru

Вернуться к началу Перейти вниз

Re: ЛАБОРАТОРНАЯ №1 — работа с графикой и цветом

Сообщение автор Ярослав в Сб Апр 22, 2017 3:50 pm

Вы можете писать вспомогательные функции, такие как «нарисовать прямоугольник» / «нарисовать круг», если это упрощает вашу задачу.

Работа с градиентами
Градиентами в компьютерной графике называется постепенный перелив цветов. Как показывает мой исходный пример, градиент написать не сложно: нужно знать начальный и конечный цвет и расчитать плавный переход между ними. Это задача сводится к решению пропорции.

Работа с полупрозрачностью
Чтобы создать иллюзию полупрозрачности, надо смешать два цвета: тот, который сейчас на картинке, и тот, которым вы рисуете. Если вы их смешаете в равной пропорции, получится 50% прозрачность. Это делается с помощью среднего арифметического по каждой компоненте цвета:
Код:
красный_итоговый = (красный_фоновой + красный_рисования) / 2;
зелёный_итоговый = (зелёный_фоновой + зелёный_рисования) / 2;
синий_итоговый = (синий_фоновой + синий_рисования) / 2;

Более тонкая настройка прозрачности
Цвета можно смешивать в пропорции не обязательно 1 : 1. Допустим, у нас есть цвет1 и цвета2, и мы хотим их смешать в пропорции 1 : 9. Следующая формула смешивает их с этим весом:
Код:
цвет_результирующий = (1 * цвет1 + 9 * цвет2) / (1 + 9);

Повторить для каждой компоненты цвета: красной, зелёной, синей.

Используя эту схему, можно создать прозрачность, отличную от 50%.
avatar
Ярослав
Admin

Posts : 641
Join date : 2016-12-21
Location : Москва

Посмотреть профиль http://itstep.forum2x2.ru

Вернуться к началу Перейти вниз

Re: ЛАБОРАТОРНАЯ №1 — работа с графикой и цветом

Сообщение автор Спонсируемый контент


Спонсируемый контент


Вернуться к началу Перейти вниз

Вернуться к началу


 
Права доступа к этому форуму:
Вы не можете отвечать на сообщения