Графическое Графическое представленипредставление е информации.информации.Выполнила :ученица 11 класса Выполнила :ученица 11 класса

Котоян Ирина.Котоян Ирина.Руководитель: учитель Руководитель: учитель информатикиинформатики Скульбеда Н.И.Скульбеда Н.И.

МОУ «Новоархангельская СОШ»

2006 год

Цель:Цель:

рассказать о графическом рассказать о графическом представлении информации;представлении информации;

показать, как кодируется графическая показать, как кодируется графическая информация в компьютере;информация в компьютере;

научить вычислять объем научить вычислять объем видеопамяти;видеопамяти;

научить вычислять цветность научить вычислять цветность компьютера.компьютера.

Почему трава зеленаяПочему трава зеленая.. Как мы видим цветные изображения.Как мы видим цветные изображения. Цветное изображение монитораЦветное изображение монитора.. Кодирование цветаКодирование цвета.. Вычисление цветности изображенияВычисление цветности изображения.. Вычисление размера видеопамяти.Вычисление размера видеопамяти.

Почему трава Почему трава зеленаязеленая

ИзвестноИзвестно,,что белый цвет представляет собой смесь цветов, Это что белый цвет представляет собой смесь цветов, Это легко увидеть, если пропустить луч света через стеклянную легко увидеть, если пропустить луч света через стеклянную призму, Так как разные цвета имеют разные углы преломления, призму, Так как разные цвета имеют разные углы преломления, то мы увидим все составляющие белого цвета по отдельности, то мы увидим все составляющие белого цвета по отдельности, Условно эти цвета разбивают на семь групп(«цвета радуги»)Условно эти цвета разбивают на семь групп(«цвета радуги»)

Белый цвет

Белый цвет ≠ 7 цветовБелый цвет ≠ 7 цветов

В семь групп собраны все оттенки В семь групп собраны все оттенки красного, оранжевого, зелёного, красного, оранжевого, зелёного, голубого, синего и фиолетового голубого, синего и фиолетового цветов.цветов.

На рисунке каждая группа На рисунке каждая группа условно изображена одним условно изображена одним «чистым» цветом.«чистым» цветом.

Трава Песок

ЖелтыйЗеленый

Глаз

Источник света Источник света

Цветные поверхности

Глаз

В солнечном свете мы видим траву зеленой, потому что она В солнечном свете мы видим траву зеленой, потому что она

отражает зеленый цвет и он попадает в наши глаза, а отражает зеленый цвет и он попадает в наши глаза, а остальные цвета- поглощает. А песок выглядит остальные цвета- поглощает. А песок выглядит

желтым ,потому чтожелтым ,потому что

он отражает только желтый цвет, а остальные поглощает .он отражает только желтый цвет, а остальные поглощает .

Мы видим свет, когда он попадает на Мы видим свет, когда он попадает на светочувствительные клетки глаза светочувствительные клетки глаза

(сетчатку).(сетчатку).

Нервные клетки

Колбочки Палочки

Отвечают за черно- белое вечернее и

ночное зрение

Отвечают

за цветное зрение

Состав колбочекСостав колбочекКрасные воспринимаюттолько красный цвет.

Синие воспринимают только синий цвет

Зелёные воспринимают только зелёный цвет

Информация от колбочек поступает в зрительный нерв, где суммируется, и человек видит цвет,

как смесь красной, зелёной и синей составляющей.

Какой именно оттенок мы видим, зависит от пропорций, в Какой именно оттенок мы видим, зависит от пропорций, в которых смешиваются основные цвета. Смешивая в равных которых смешиваются основные цвета. Смешивая в равных

количествах красную, зеленую и синюю краску, получаем белый количествах красную, зеленую и синюю краску, получаем белый цветцвет

Белый Красный 100%Зеленый 100%Синий 0%

Желтый

Состав белого и желтого цветов

Пурпурный

Состав пурпурного и голубого цветов

ГолубойКрасный 0%Зеленый 100%Синий 100%

Красный 100%Зеленый 100%Синий 100%

Красный 100%Зеленый 0%Синий 100%

Цветное изображение на экране Цветное изображение на экране монитора также получается монитора также получается

смешиванием красок.смешиванием красок.

Каждый пиксель состоит из трех крупинок

люминофора- красного, зеленого и синего цветов.

=Механизм цветопередачи

монитора практически повторяет устройство человеческого глаза

Система кодирования Система кодирования цвета при помощи трех цвета при помощи трех составляющих- составляющих- краснойкрасной, , зелёнойзелёной и и синейсиней- носит - носит название название RGB.RGB.

Число возможных цветов на экране компьютера зависит как от

физических характеристик самого монитора, так и от количества памяти,

расположенной на видеокарте. Монитор можно настроить на разные

режимы работы.

Пусть каждый из трех образующих цветов либо Пусть каждый из трех образующих цветов либо участвует в образовании цвета, либо нет. Тогда для участвует в образовании цвета, либо нет. Тогда для кодирования интенсивности красного, зеленого или кодирования интенсивности красного, зеленого или

синего цветов достаточно двух значений: 0- цвета нет, синего цветов достаточно двух значений: 0- цвета нет, 1- цвет есть. При таком кодировании получается 1- цвет есть. При таком кодировании получается

палитрапалитра из 8 цветов.из 8 цветов.

B(синий)

Цвет R(красный)G(зеленый) Код

000001010011100101110111

Каждая RGB-компонента принимает два значения

Цветное пятно получается наложением Цветное пятно получается наложением RGBRGB-лучей -лучей трех прожекторов.трех прожекторов.

Пусть каждый прожектор имеет два состояния: Пусть каждый прожектор имеет два состояния: выключен и включен.выключен и включен.

Сколько цветов на экране смогут создать такие Сколько цветов на экране смогут создать такие прожекторы?прожекторы?

Вычисление цветности монитора

Если прожектор один, то он создает два цвета (один из них Если прожектор один, то он создает два цвета (один из них черный).черный).

RR выключен

R R включен

Пусть каждый прожектор имеет два состояния: выключен и включен.Сколько цветов на экране смогут создать такие прожекторы?

Пусть теперь прожекторов два. В каждом состоянии Пусть теперь прожекторов два. В каждом состоянии первого второй может быть выключен или включен.первого второй может быть выключен или включен.

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

прожектора «умножается» на два состояния второго.

R выключен

R включен

R G

GR

R G

R G

Вычисление цветностиВычисление цветности..

Цветность вычисляется перемножением трех чисел, задающих количество

возможных состояний для каждого прожектора.

Пусть число вариантов интенсивности каждой RGB- компоненты равно k.Получаем

универсальную формулу для вычисления цветности С:

C=k*k*k=k3

Вычисление размера Вычисление размера видеопамятивидеопамяти

Сначала определим, сколько бит потребуется для кодирования Сначала определим, сколько бит потребуется для кодирования kk состояний одной состояний одной RGB-RGB-компоненты. компоненты.

Пусть Пусть kk=2 (прожектор выключен, прожектор включен). Для =2 (прожектор выключен, прожектор включен). Для кодирования этих состояний прожектора достаточно одного бита.кодирования этих состояний прожектора достаточно одного бита.

k=2 Состояние Двоичный код

0 0

1 1

Для 2-х состоянийдостаточно одногодвоичного разряда

Два состояния прожектора

Три состояния Три состояния прожекторапрожектора

Для Для k=k=3 потребуется 2 бита.3 потребуется 2 бита.

k=3 Состояние Двоичный код 0 00

1 01

2 10

Для 3-х состояний достаточно 2-х

двоичных разрядов

Четыре состояния Четыре состояния прожекторапрожектора

Двух битов достаточно для кодирования и четырех состояний.Двух битов достаточно для кодирования и четырех состояний.

0 00

1 01

2 10

3 11

k=4 Состояние Двоичный код

Для 4-х состояний достаточно 2-х

двоичных разрядов

k=5 Состояние Двоичный код

0 000

1 001

2 010

3 011

4 100

Пять состояний Пять состояний прожекторапрожектора

А вот для кодирования 5 состояний двух битов уже мало.А вот для кодирования 5 состояний двух битов уже мало.

Число битов, необходимых для кодирования k состояний, равно числу двоичных разрядов в двоичной записи числа (k-1).

Алгоритм вычисления Алгоритм вычисления размера видеопамятиразмера видеопамяти

Путь монитор работает в разрешении Путь монитор работает в разрешении 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

Пример.Подсчитаем необходимый размер видеопамятиПодсчитаем необходимый размер видеопамяти

для разрешения 640*480, для разрешения 640*480, если каждая если каждая RGBRGB-компонента -компонента

имеет 6 градаций интенсивностиимеет 6 градаций интенсивности

ДаноДано: : k=6k=6, , w=640w=640, , h=480h=480

1.Определим число бит для кодирования1.Определим число бит для кодированияодной компоненты. Для этого запишем числоодной компоненты. Для этого запишем число

k-1=5k-1=5 двоичным кодом и подсчитаем двоичным кодом и подсчитаем

получившеесяполучившееся число двоичных разрядов:число двоичных разрядов:

5=101, 5=101, b=3b=322.Определим число бит, необходимых.Определим число бит, необходимыхдля кодирования одного пикселя: для кодирования одного пикселя: p=3*3=9 p=3*3=9 бит.бит.

3.Определим размер видеопамяти:3.Определим размер видеопамяти: V=9*640*480=2 764 800V=9*640*480=2 764 800 бит =345 600 байт бит =345 600 байт

Режимы работы Режимы работы мониторамонитора Как правило, Как правило,

монитор может монитор может работатьработать в разных цветовых в разных цветовых режимах.режимах.Обычный режим для Обычный режим для современного современного компьютера- «компьютера- «True True ColorColor (24 бита)» (24 бита)»

Английское выражение «Английское выражение «True ColorTrue Color» переводится как » переводится как «естественные цвета».«естественные цвета».Каждый составляющий Каждый составляющий RGBRGB-цвет кодируется в этой -цвет кодируется в этой палитре 8 битами. Для трех цветов получается 24 палитре 8 битами. Для трех цветов получается 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 Мб

RGBRGB-модель, основанная на физических свойствах света, не-модель, основанная на физических свойствах света, не

слишком удобна для практического цветового слишком удобна для практического цветового конструирования.конструирования.

Поэтому все графические редакторы снабжаютсяПоэтому все графические редакторы снабжаются

перцепционной(ориентированной на восприятие) системой перцепционной(ориентированной на восприятие) системой

светового кодирования светового кодирования HSBHSB. В этой системе в качестве. В этой системе в качестве

цветовых координат выступают:цветовых координат выступают: Цветовой тон или оттенок Цветовой тон или оттенок ((HHue)ue) Насыщенность или контрастностьНасыщенность или контрастность((SSaturation)aturation) ЯркостьЯркость((BBrightness)rightness)

показано окнопоказано окно HSB HSB-конструирования цвета из редактора -конструирования цвета из редактора PaintPaint. .

Перемещение движка цвета по горизонтали меняет оттенок(Перемещение движка цвета по горизонтали меняет оттенок(HH), ), по вертикали- контрастность(по вертикали- контрастность(S)S). Перемещение треугольного движка. Перемещение треугольного движка (по отдельной вертикальной линейке) меняет яркость(В).(по отдельной вертикальной линейке) меняет яркость(В). Оттенок(тон) – это цвет на радуге. Оттенок(тон) – это цвет на радуге. Контрастность(насыщенность)-этоКонтрастность(насыщенность)-это содержание в цвете серой примеси. Цвет максимальной содержание в цвете серой примеси. Цвет максимальной насыщенности насыщенности не содержит серого вообще, а при нулевой насыщенности-все цвета не содержит серого вообще, а при нулевой насыщенности-все цвета серые.серые. Яркость-это интенсивность, с которой излучается цвет. Яркость-это интенсивность, с которой излучается цвет. При максимальной яркости все цвета превращаютсяПри максимальной яркости все цвета превращаются в белый цвет, при нулевой - в черный.в белый цвет, при нулевой - в черный.

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

1) Выбор оттенка(H)

2)Выбор контраста(S)

3)Выбор яркости(В)

Алгоритм подбора цвета показан на Алгоритм подбора цвета показан на рисункерисунке

Рекомендации по Рекомендации по работе с цветомработе с цветом

Человеческий глаз устроен таким образом, что одни и те жеЧеловеческий глаз устроен таким образом, что одни и те жецвета могут восприниматься по-разному. При уменьшениицвета могут восприниматься по-разному. При уменьшенииплощади, которую занимает цвет, оттенки становятсяплощади, которую занимает цвет, оттенки становятсямалоразличимыми, и цвета визуально «теряют» насыщенность.малоразличимыми, и цвета визуально «теряют» насыщенность.Это особенно хорошо заметно на цветных текстах Это особенно хорошо заметно на цветных текстах

Буквы того же цвета, что и прямоугольник

Цвет

Цвет

Цвет

Цвет

Цвет

Цвет

Практическая рекомендация: для объектов с маленькимиПрактическая рекомендация: для объектов с маленькими

закрашенными площадями нужно выбирать яркие цветазакрашенными площадями нужно выбирать яркие цвета

(6 основных цветов на радуге плюс белый и черный (6 основных цветов на радуге плюс белый и черный цвета),ацвета),а

для сложных цветов со слабонасыщенным тоном-для сложных цветов со слабонасыщенным тоном-

использовать большие площадииспользовать большие площади

Буквы ярких цветов

Цвет Цвет

Цвет

Цвет

Цвет

Черный и белый цвета являются особыми цветами.Черный и белый цвета являются особыми цветами.

Их нет в радуге, а в то же время любой цветИх нет в радуге, а в то же время любой цвет

превращается в черный при уменьшении яркости допревращается в черный при уменьшении яркости до

нуля и в белый при увеличении яркости донуля и в белый при увеличении яркости до

максимального значения. Эти цвета наиболее частомаксимального значения. Эти цвета наиболее часто

используются в дизайне, так как они хорошоиспользуются в дизайне, так как они хорошо

сочетаются с большинством других цветов. сочетаются с большинством других цветов.

Выбор яркости(В)

Сочетаемость цветовСочетаемость цветов

Если вы чувствуете себя не совсем уверенно в цветовомЕсли вы чувствуете себя не совсем уверенно в цветовомпространстве- возьмите за основу черный и белый цвета,пространстве- возьмите за основу черный и белый цвета,добавьте к ним красный-эта палитра вас не подведетдобавьте к ним красный-эта палитра вас не подведет

Черный + белый + красный = отличная сочетаемость

Визуальное изменение Визуальное изменение цветацветаЦвета расположенные рядом, выглядят несколько иначе, чемЦвета расположенные рядом, выглядят несколько иначе, чемвзятые по отдельности, кроме того, вид цвета зависит отвзятые по отдельности, кроме того, вид цвета зависит отплощади, которую он занимает. Например, маленький объектплощади, которую он занимает. Например, маленький объекттускло-синего цвета внутри большого яркого- зеленоготускло-синего цвета внутри большого яркого- зеленогоприобретаетприобретает зеленый зеленый оттенок.оттенок.

Изменение цвета на границах Изменение цвета на границах областей областей

На границах цвета меняют свой вид. Темный цвет рядом со На границах цвета меняют свой вид. Темный цвет рядом со светлым становится еще темнее, а светлый –ярче.светлым становится еще темнее, а светлый –ярче.

Литература.Литература.

А.А.Дуванов «Основы А.А.Дуванов «Основы webweb-дизайна и -дизайна и школьного «сайтостроительства»школьного «сайтостроительства»

Газета «Информатика», 2005 г, №21Газета «Информатика», 2005 г, №21 А.Г.Гейн «Информатика» , 2001г А.Г.Гейн «Информатика» , 2001г