2. Цель:Цель:
рассказать о графическомрассказать о графическом
представлении информации;представлении информации;
показать, как кодируется графическаяпоказать, как кодируется графическая
информация в компьютере;информация в компьютере;
научить вычислять объемнаучить вычислять объем
видеопамяти;видеопамяти;
научить вычислять цветностьнаучить вычислять цветность
компьютера.компьютера.
3. Почему трава зеленаяПочему трава зеленая..
Как мы видим цветные изображения.Как мы видим цветные изображения.
Цветное изображение монитораЦветное изображение монитора..
Кодирование цветаКодирование цвета..
Вычисление цветности изображенияВычисление цветности изображения..
Вычисление размера видеопамяти.Вычисление размера видеопамяти.
4. Почему трава зеленаяПочему трава зеленая
ИзвестноИзвестно,,что белый цвет представляет собой смесь цветов, Эточто белый цвет представляет собой смесь цветов, Это
легко увидеть, если пропустить луч света через стекляннуюлегко увидеть, если пропустить луч света через стеклянную
призму, Так как разные цвета имеют разные углы преломления,призму, Так как разные цвета имеют разные углы преломления,
то мы увидим все составляющие белого цвета по отдельности,то мы увидим все составляющие белого цвета по отдельности,
Условно эти цвета разбивают на семь групп(«цвета радуги»)Условно эти цвета разбивают на семь групп(«цвета радуги»)
Белый цвет
5. Белый цвет ≠ 7 цветовБелый цвет ≠ 7 цветов
В семь групп собраны все оттенкиВ семь групп собраны все оттенки
красного, оранжевого, зелёного,красного, оранжевого, зелёного,
голубого, синего и фиолетовогоголубого, синего и фиолетового
цветов.цветов.
На рисунке каждая группа условноНа рисунке каждая группа условно
изображена одним «чистым» цветом.изображена одним «чистым» цветом.
6. Трава Песок
ЖелтыйЗеленый
Глаз
Источник света Источник света
Цветные поверхности
Глаз
В солнечном свете мы видим траву зеленой, потому что онаВ солнечном свете мы видим траву зеленой, потому что она
отражает зеленый цвет и он попадает в наши глаза, а остальныеотражает зеленый цвет и он попадает в наши глаза, а остальные
цвета- поглощает. А песок выглядит желтым ,потому чтоцвета- поглощает. А песок выглядит желтым ,потому что
он отражает только желтый цвет, а остальные поглощает .он отражает только желтый цвет, а остальные поглощает .
7. Мы видим свет, когда он попадает наМы видим свет, когда он попадает на
светочувствительные клетки глазасветочувствительные клетки глаза
(сетчатку).(сетчатку).
Нервные
клетки
Колбочки Палочки
Отвечают за
черно- белое
вечернее и
ночное зрение
Отвечают
за цветное
зрение
8. Состав колбочекСостав колбочек
Красные воспринимают
только красный цвет.
Синие воспринимают
только синий цвет
Зелёные воспринимают
только зелёный цвет
Информация от колбочек поступает в зрительный нерв, где
суммируется, и человек видит цвет,
как смесь красной, зелёной и синей составляющей.
9. Какой именно оттенок мы видим, зависит от пропорций, вКакой именно оттенок мы видим, зависит от пропорций, в
которых смешиваются основные цвета. Смешивая в равныхкоторых смешиваются основные цвета. Смешивая в равных
количествах красную, зеленую и синюю краску, получаемколичествах красную, зеленую и синюю краску, получаем
белый цветбелый цвет
Белый
Красный 100%
Зеленый 100%
Синий 0%
Желтый
Состав белого и желтого цветов
Пурпурный
Состав пурпурного и голубого цветов
Голубой
Красный 0%
Зеленый 100%
Синий 100%
Красный 100%
Зеленый 100%
Синий 100%
Красный 100%
Зеленый 0%
Синий 100%
10. Цветное изображение на экране монитораЦветное изображение на экране монитора
также получается смешиванием красок.также получается смешиванием красок.
Каждый пиксель состоит из
трех крупинок люминофора-
красного, зеленого и синего
цветов.
=
Механизм цветопередачи
монитора практически повторяет
устройство человеческого глаза
11. Система кодированияСистема кодирования
цвета при помощи трехцвета при помощи трех
составляющих-составляющих- краснойкрасной,,
зелёнойзелёной ии синейсиней- носит- носит
названиеназвание RGB.RGB.
Число возможных цветов на экране
компьютера зависит как от физических
характеристик самого монитора, так и от
количества памяти, расположенной на
видеокарте. Монитор можно настроить на
разные режимы работы.
12. Пусть каждый из трех образующих цветов либо участвует вПусть каждый из трех образующих цветов либо участвует в
образовании цвета, либо нет. Тогда для кодированияобразовании цвета, либо нет. Тогда для кодирования
интенсивности красного, зеленого или синего цветовинтенсивности красного, зеленого или синего цветов
достаточно двух значений: 0- цвета нет, 1- цвет есть. Придостаточно двух значений: 0- цвета нет, 1- цвет есть. При
таком кодировании получается палитратаком кодировании получается палитра из 8 цветов.из 8 цветов.
B(синий)Цвет R(красный) G(зеленый) Код
000
001
010
011
100
101
110
111
Каждая RGB-компонента принимает два значения
13. Цветное пятно получается наложениемЦветное пятно получается наложением RGBRGB-лучей трех-лучей трех
прожекторов.прожекторов.
Пусть каждый прожектор имеет два состояния: выключенПусть каждый прожектор имеет два состояния: выключен
и включен.и включен.
Сколько цветов на экране смогут создать такиеСколько цветов на экране смогут создать такие
прожекторы?прожекторы?
Вычисление цветности монитора
14. Если прожектор один, то он создает два цвета (один из нихЕсли прожектор один, то он создает два цвета (один из них
черный).черный).
R
R выключен
R R включен
Пусть каждый прожектор имеет два состояния: выключен и включен.
Сколько цветов на экране смогут создать такие прожекторы?
15. Пусть теперь прожекторов два. В каждом состоянии первогоПусть теперь прожекторов два. В каждом состоянии первого
второй может быть выключен или включен.второй может быть выключен или включен.
Получается, что двумя прожекторами можно получить четыре
цвета: каждое из двух состояний первого прожектора
«умножается» на два состояния второго.
R выключен
R включен
R G
GR
R G
R G
16. Вычисление цветностиВычисление цветности ..
Цветность вычисляется перемножением трех
чисел, задающих количество возможных
состояний для каждого прожектора.
Пусть число вариантов интенсивности каждой RGB-
компоненты равно k.Получаем универсальную
формулу для вычисления цветности С:
C=k*k*k=k3
17. Вычисление размераВычисление размера
видеопамятивидеопамяти
Сначала определим, сколько бит потребуется для кодированияСначала определим, сколько бит потребуется для кодирования kk
состояний однойсостояний одной RGB-RGB-компоненты.компоненты.
ПустьПусть kk=2 (прожектор выключен, прожектор включен). Для=2 (прожектор выключен, прожектор включен). Для
кодирования этих состояний прожектора достаточно одного бита.кодирования этих состояний прожектора достаточно одного бита.
k=2 Состояние Двоичный код
0 0
1 1
Для 2-х состояний
достаточно одного
двоичного разряда
Два состояния прожектора
18. Три состояния прожектораТри состояния прожектора
ДляДля k=k=3 потребуется 2 бита.3 потребуется 2 бита.
k=3 Состояние Двоичный код
0 00
1 01
2 10
Для 3-х состояний
достаточно 2-х
двоичных разрядов
19. Четыре состояния прожектораЧетыре состояния прожектора
Двух битов достаточно для кодирования и четырех состояний.Двух битов достаточно для кодирования и четырех состояний.
0 00
1 01
2 10
3 11
k=4 Состояние Двоичный код
Для 4-х состояний
достаточно 2-х
двоичных разрядов
20. k=5 Состояние Двоичный код
0 000
1 001
2 010
3 011
4 100
Пять состояний прожектораПять состояний прожектора
А вот для кодирования 5 состояний двух битов уже мало.А вот для кодирования 5 состояний двух битов уже мало.
Число битов, необходимых для кодирования k состояний,
равно числу двоичных разрядов в двоичной записи числа (k-1).
21. Алгоритм вычисленияАлгоритм вычисления
размера видеопамятиразмера видеопамяти
Путь монитор работает в разрешенииПуть монитор работает в разрешении w x hw x h,, и каждаяи каждая RGBRGB--
компонента может быть в одном изкомпонента может быть в одном из kk состояний.состояний.
ОпределитьОпределить vv-размер необходимой видеопамяти.-размер необходимой видеопамяти.
1.Определим число бит для кодирования одной компоненты.1.Определим число бит для кодирования одной компоненты.
Для этого запишем числоДля этого запишем число k-1k-1 двоичным кодом идвоичным кодом и
подсчитаем число получившихся двоичных разрядовподсчитаем число получившихся двоичных разрядов b.b.
2.Определим число бит, необходимых для кодирования2.Определим число бит, необходимых для кодирования
одного пикселя:одного пикселя: p=3b(p=3b(кодирование трех компонент).кодирование трех компонент).
3.Определим размер видеопамяти:3.Определим размер видеопамяти:V=pwhV=pwh
22. Пример.
Подсчитаем необходимый размер видеопамятиПодсчитаем необходимый размер видеопамяти
для разрешения 640*480,для разрешения 640*480,
если каждаяесли каждая RGBRGB-компонента-компонента
имеет 6 градаций интенсивностиимеет 6 градаций интенсивности
ДаноДано:: k=6k=6,, w=640w=640,, h=480h=480
1.Определим число бит для кодирования1.Определим число бит для кодирования
одной компоненты. Для этого запишем числоодной компоненты. Для этого запишем число k-k-
1=51=5
двоичным кодом и подсчитаем получившеесядвоичным кодом и подсчитаем получившееся
число двоичных разрядов:число двоичных разрядов:
5=101,5=101, b=3b=3
22.Определим число бит, необходимых.Определим число бит, необходимых
для кодирования одного пикселя:для кодирования одного пикселя: p=3*3=9p=3*3=9 бит.бит.
3.Определим размер видеопамяти:3.Определим размер видеопамяти:
V=9*640*480=2 764 800V=9*640*480=2 764 800 бит =345 600 байтбит =345 600 байт
23. Режимы работы монитораРежимы работы монитора
Как правило, мониторКак правило, монитор
может работатьможет работать
в разных цветовыхв разных цветовых
режимах.режимах.
Обычный режим дляОбычный режим для
современногосовременного
компьютера- «компьютера- «TrueTrue
ColorColor (24 бита)»(24 бита)»
Английское выражение «Английское выражение «True ColorTrue Color» переводится как» переводится как
«естественные цвета».«естественные цвета».
Каждый составляющийКаждый составляющий RGBRGB-цвет кодируется в этой палитре 8-цвет кодируется в этой палитре 8
битами. Для трех цветов получается 24 бита на один пиксельбитами. Для трех цветов получается 24 бита на один пиксель
24. Восьмью битами можно кодировать числа от 0Восьмью битами можно кодировать числа от 0
до 255, то есть всего можно закодировать 256до 255, то есть всего можно закодировать 256
значений.значений.
Подсчитаем, сколько цветов вмещается в 24-Подсчитаем, сколько цветов вмещается в 24-
битную палитру и сколько видеопамятибитную палитру и сколько видеопамяти
потребуется для хранения полного экранапотребуется для хранения полного экрана
монитора с разрешением 1024 х 768.монитора с разрешением 1024 х 768.
Число цветов определяется перемножениемЧисло цветов определяется перемножением
числа вариантовчисла вариантов RGBRGB-составляющих. Получается:-составляющих. Получается:
256*256*256=16 777 216.256*256*256=16 777 216.
Объем памяти:Объем памяти:
24*1024*768=18 874 368 бит.24*1024*768=18 874 368 бит.
В килобайтах получается:В килобайтах получается:
7 372 800 /8 /1024=2304 Кб,7 372 800 /8 /1024=2304 Кб,
что составляет 2,25 Мбчто составляет 2,25 Мб
25. RGBRGB-модель, основанная на физических свойствах света, не-модель, основанная на физических свойствах света, не
слишком удобна для практического цветового конструирования.слишком удобна для практического цветового конструирования.
Поэтому все графические редакторы снабжаютсяПоэтому все графические редакторы снабжаются
перцепционной(ориентированной на восприятие) системойперцепционной(ориентированной на восприятие) системой
светового кодированиясветового кодирования HSBHSB. В этой системе в качестве. В этой системе в качестве
цветовых координат выступают:цветовых координат выступают:
Цветовой тон или оттенокЦветовой тон или оттенок ((HHue)ue)
Насыщенность или контрастностьНасыщенность или контрастность((SSaturation)aturation)
ЯркостьЯркость((BBrightness)rightness)
показано окнопоказано окно HSBHSB-конструирования цвета из редактора-конструирования цвета из редактора PaintPaint..
26. Перемещение движка цвета по горизонтали меняет оттенок(Перемещение движка цвета по горизонтали меняет оттенок(HH),),
по вертикали- контрастность(по вертикали- контрастность(S)S). Перемещение треугольного движка. Перемещение треугольного движка
(по отдельной вертикальной линейке) меняет яркость(В).(по отдельной вертикальной линейке) меняет яркость(В).
Оттенок(тон) – это цвет на радуге.Оттенок(тон) – это цвет на радуге.
Контрастность(насыщенность)-этоКонтрастность(насыщенность)-это
содержание в цвете серой примеси. Цвет максимальнойсодержание в цвете серой примеси. Цвет максимальной
насыщенностинасыщенности
не содержит серого вообще, а при нулевой насыщенности-все цветане содержит серого вообще, а при нулевой насыщенности-все цвета
серые.серые.
Яркость-это интенсивность, с которой излучается цвет.Яркость-это интенсивность, с которой излучается цвет.
При максимальной яркости все цвета превращаютсяПри максимальной яркости все цвета превращаются
в белый цвет, при нулевой - в черный.в белый цвет, при нулевой - в черный.
27. Сначала выбирается цвет на радуге(слева направо),Сначала выбирается цвет на радуге(слева направо),
потом устанавливается его контрастность(сверхупотом устанавливается его контрастность(сверху
вниз), а затем отдельным движком задаетсявниз), а затем отдельным движком задается
яркость.яркость.
1) Выбор оттенка(H)
2)Выбор контраста(S)
3)Выбор яркости(В)
Алгоритм подбора цвета показан наАлгоритм подбора цвета показан на
рисункерисунке
28. Рекомендации по работе сРекомендации по работе с
цветомцветом
Человеческий глаз устроен таким образом, что одни и те жеЧеловеческий глаз устроен таким образом, что одни и те же
цвета могут восприниматься по-разному. При уменьшениицвета могут восприниматься по-разному. При уменьшении
площади, которую занимает цвет, оттенки становятсяплощади, которую занимает цвет, оттенки становятся
малоразличимыми, и цвета визуально «теряют» насыщенность.малоразличимыми, и цвета визуально «теряют» насыщенность.
Это особенно хорошо заметно на цветных текстахЭто особенно хорошо заметно на цветных текстах
Буквы того же цвета, что и прямоугольник
Цвет
Цвет
Цвет
Цвет
Цвет
Цвет
29. Практическая рекомендация: для объектов с маленькимиПрактическая рекомендация: для объектов с маленькими
закрашенными площадями нужно выбирать яркие цветазакрашенными площадями нужно выбирать яркие цвета
(6 основных цветов на радуге плюс белый и черный цвета),а(6 основных цветов на радуге плюс белый и черный цвета),а
для сложных цветов со слабонасыщенным тоном-для сложных цветов со слабонасыщенным тоном-
использовать большие площадииспользовать большие площади
Буквы ярких цветов
Цвет
Цвет
Цвет
Цвет
Цвет
30. Черный и белый цвета являются особыми цветами.Черный и белый цвета являются особыми цветами.
Их нет в радуге, а в то же время любой цветИх нет в радуге, а в то же время любой цвет
превращается в черный при уменьшении яркости допревращается в черный при уменьшении яркости до
нуля и в белый при увеличении яркости донуля и в белый при увеличении яркости до
максимального значения. Эти цвета наиболее частомаксимального значения. Эти цвета наиболее часто
используются в дизайне, так как они хорошоиспользуются в дизайне, так как они хорошо
сочетаются с большинством других цветов.сочетаются с большинством других цветов.
Выбор яркости(В)
31. Сочетаемость цветовСочетаемость цветов
Если вы чувствуете себя не совсем уверенно в цветовомЕсли вы чувствуете себя не совсем уверенно в цветовом
пространстве- возьмите за основу черный и белый цвета,пространстве- возьмите за основу черный и белый цвета,
добавьте к ним красный-эта палитра вас не подведетдобавьте к ним красный-эта палитра вас не подведет
Черный + белый + красный = отличная сочетаемость
32. Визуальное изменение цветаВизуальное изменение цвета
Цвета расположенные рядом, выглядят несколько иначе, чемЦвета расположенные рядом, выглядят несколько иначе, чем
взятые по отдельности, кроме того, вид цвета зависит отвзятые по отдельности, кроме того, вид цвета зависит от
площади, которую он занимает. Например, маленький объектплощади, которую он занимает. Например, маленький объект
тускло-синего цвета внутри большого яркого- зеленоготускло-синего цвета внутри большого яркого- зеленого
приобретаетприобретает зеленыйзеленый оттенок.оттенок.
33. Изменение цвета на границахИзменение цвета на границах
областейобластей
На границах цвета меняют свой вид. Темный цвет рядом соНа границах цвета меняют свой вид. Темный цвет рядом со
светлым становится еще темнее, а светлый –ярче.светлым становится еще темнее, а светлый –ярче.
