МосковскийГуманитарный Университет
Реферат натему:
Цвет играфика на ЭВМ
Выполнили студенты
Группы СКС101_133:
Власенко А.В.
Москва 2010
Содержание
Понятие цвета с точки зрения ЭВМ ицели его применения в ИС
Основные принципы хранения в памятиЭВМ графической информации
Цвет аддитивный и субтрактивный
Индексированный цвет, работа спалитрой
Таблица «безопасных» цветов
Модели цвета на ЭВМ
RGB-модель
Цветовая модель CMYK
Особые взаимоотношения двух цветовыхмоделей
Цветовая модель HSB
Цветовая модель HSV
Цветовая модель HLS
Цветовые модели Y**
Цветовые модели YUV, YPbPr и YCbCr
Цветовая модель YIQ
Цветовые модели CIE L*u*v* и CIEL*a*b*
Точность воспроизведения цвета
Виды графики на ЭВМ и особенности еёприменения в ИС
Основные понятия. Представление цветав машинной графике. Растровая и векторная графика. Понятие растра
Масштабируемаявекторная графика (Scalable Vector Graphics)
Сравнение растровой и векторнойграфики
Классификация изображений ипреобразования
Ввод изображения
Преобразования изображений
Основные области применениякомпьютерной графики
Научная графика
Деловая графика
Конструкторская графика
Художественная и рекламная графика
Компьютерная анимация
Мультимедиа
Особенности применения графики вИнтернет
Создание графики
Форматы графических файлов
Создание фона HTML-документа
Прозрачность для GIF иPNG-изображений
Кодирование звуковой информации
Понятие цвета с точкизрения ЭВМ и цели его применения в ИС
Основные принципыхранения в памяти ЭВМ графической информации
Минимальной единицейизображения является символ, при отображении графики картинка строится изотдельных элементов — ПИКСЕЛОВ (от английских слов PICture ELement, означающих«элемент картинки»). Очень часто пиксель совпадает с точкой дисплея,но это совсем необязательно: например, в некоторых видеорежимах 1 пиксель можетсостоять из 2 или 4 точек экрана.
Каждый пиксель характеризуетсяцветом. Как и вся остальная информация в ЭВМ, цвет кодируется числом. Взависимости от количества допустимых цветов, число двоичных разрядов на один пиксельбудет различным. Так, для черно-белой картинки закодировать цвет точки можноодним битом: 0 — черный, 1 — белый. Такое изображение называют монохромным(monochrome).
Для случая 16 цветовтребуется уже по 4 разряда на каждую точку, а для 256 цветов — 8, т.е. 1 байт.
Если для кодировкиотвести четыре бита, то можно закодировать 24=16 различных цветов, отвечающихкомбинациям бит от 0000 до 1111. Если отвести 8 бит — то такой рисунок можетсодержать 28=256 различных цветов (от 00000000 до 11111111), 16 бит — 216=65536 различных цветов (так называемый High Color). И, наконец, если отвести 24бита, то потенциально рисунок может содержать 224=16 777 216 различных цветов иоттенков — вполне достаточно даже для самого взыскательного художника! Впоследнем случае кодировка называется 24-bit True Color. Следует обратитьвнимание на слово «потенциально»: даже если в файле и отводится 24бита на каждый пиксел, это еще не означает, что вы действительно сможетенасладиться такой богатой палитрой — ведь технические возможности мониторовограничены.
Для того, чтобы нагляднопредставить себе, как хранится в памяти ЭВМ простейшее изображение, рассмотримдля примера белый квадратик на черном фоне размером 4х4. В черно-белом режимеэто будет выглядеть наиболее компактно (сначала для наглядности приведендвоичный, а затем шестнадцатеричный вид):
1111 F
1001 9
1001 9
1111 F
В режиме 16-цветнойграфики это же самое изображение потребует памяти в 4 раза больше:
1111 1111 11111111 F F F F
1111 0000 00001111 F 0 0 F
1111 0000 00001111 F 0 0 F
1111 1111 11111111 F F F F
Наконец, при 256 цветахна каждую точку требуется уже по байту и наш квадратик разрастется еще вдвое:
1111111111111111 11111111 11111111 FF FF FF FF
1111111100000000 00000000 11111111 FF 00 00 FF
1111111100000000 00000000 11111111 FF 00 00 FF
1111111111111111 11111111 11111111 FF FF FF FF
Обратите внимание на то,что белый цвет, как самый яркий, обычно имеет максимально возможный номер.Поэтому для черно-белого режима он равен 1, для 16-цветного — 15, а для 256цветов — 255.
Осталось обсудить вопрос,как кодируются промежуточные цвета. Например, вполне естественно со сторонычитателя спросить: какой номер имеет, например, красный цвет? К сожалению,методы кодирования цвета даже для одной и той же ЭВМ могут довольно существенноразличаться. Причем не только в зависимости от конструкции дисплея, но даже отграфического режима, в котором тот в данный момент работает! Более того,соответствие между номерами цветов и их представлением на экране можнопереопределять по усмотрению пользователя (это называется изменением палитры).Поэтому давайте ограничимся в качестве примера стандартным 16-цветным наборомдля наиболее распространенного компьютера IBM PC:
0 — черный 8 — темно-серый
1 — синий 9 — ярко-синий
2 — зеленый A — ярко-зеленый
3 — голубой B — ярко-голубой
4 — красный C — ярко-красный
5 — розовый D — ярко-розовый
6 — коричневый E — ярко-желтый
7 — серый F — ярко-белый
Таким образом,графическая информация, также как числовая и текстовая, в конечном счетезаносится в память в виде двоичных чисел.
Цвет аддитивный исубтрактивный
Аддитивный цветполучается при соединении света разных цветов. В этой схеме отсутствие всехцветов представляет собой чёрный цвет, а присутствие всех цветов — белый. Схемааддитивных цветов работает с излучаемым светом, например, монитор компьютера. Всхеме субтрактивных цветов происходит обратный процесс. Здесь получаетсякакой-либо цвет при вычитании других цветов из общего луча света. В этой схемебелый цвет появляется в результате отсутствия всех цветов, тогда как ихприсутствие даёт чёрный цвет. Схема субтрактивных цветов работает с отражённымсветом.
Индексированный цвет,работа с палитрой
Индексированные палитрыцветов — это наборы цветов, из которых можно выбрать необходимый цвет.Преимуществом ограниченных палитр является то, они что занимают гораздо меньшепамяти, чем полные системы RGB и CMYK. Компьютер создаёт палитру цветов иприсваивает каждому цвету номер от 1 до 256. Затем при сохранении цветаотдельного пикселя или объекта компьютер просто запоминает номер, который имелэтот цвет в палитре. Для запоминания числа от 1 до 256 компьютеру необходимовсего 8 бит. Для сравнения полный цвет в системе RGB занимает 24 бита, а всистеме CMYK — 32.
Таблица «безопасных»цветов 255.255.204 255.255.153 255.255.102 255.255.51 255.255.0 204.204.0 FFFFCC FFFF99 FFFF66 FFFF33 FFFF00 CCCC00 255.204.102 255.204.0 255.204.51 204.153.0 204.153.51 153.102.0 FFCC66 FFCC00 FFCC33 CC9900 CC9933 996600 255.153.0 255.153.51 204.153.102 204.102.0 153.102.51 102.51.0 FF9900 FF9933 CC9966 CC6600 996633 663300 255.204.153 255.153.102 255.102.0 204.102.51 153.51.0 102.0.0 FFCC99 FF9966 FF6600 CC6633 993300 660000 255.102.51 204.51.0 255.51.0 255.0.0 204.0.0 153.0.0 FF6633 CC3300 FF3300 FF0000 CC0000 990000 255.204.204 255.153.153 255.102.102 255.51.51 255.0.51 204.0.51 FFCCCC FF9999 FF6666 FF3333 FF0033 CC0033 204.153.153 204.102.102 204.51.51 153.51.51 153.0.51 51.0.0 CC9999 CC6666 CC3333 993333 990033 330000 255.102.153 255.51.102 255.0.102 204.51.102 153.102.102 102.51.51 FF6699 FF3366 FF0066 CC3366 996666 663333 255.153.204 255.51.153 255.0.153 204.0.102 153.51.102 102.0.51 FF99CC FF3399 FF0099 CC0066 993366 660033 255.102.204 255.0.204 255.51.204 204.102.153 204.0.153 153.0.102 FF66CC FF00CC FF33CC CC6699 CC0099 990066 255.204.255 255.153.255 255.102.255 255.51.255 255.0.255 204.51.153 FFCCFF FF99FF FF66FF FF33FF FF00FF CC3399 204.153.204 204.102.204 204.0.204 204.51.204 153.0.153 153.51.153 CC99CC CC66CC CC00CC CC33CC 990099 993399 204.102.255 204.51.255 204.0.255 153.0.204 153.102.153 102.0.102 CC66FF CC33FF CC00FF 9900CC 996699 660066 204.153.255 153.51.204 153.51.255 153.0.255 102.0.153 102.51.102 CC99FF 9933CC 9933FF 9900FF 660099 663366 153.102.204 153.102.255 102.0.204 102.51.204 102.51.153 51.0.51 9966CC 9966FF 6600CC 6633CC 663399 330033 204.204.255 153.153.255 102.51.255 102.0.255 51.0.153 51.0.102 CCCCFF 9999FF 6633FF 6600FF 330099 330066 153.153.204 102.102.255 102.102.204 102.102.153 51.51.153 51.51.102 9999CC 6666FF 6666CC 666699 333399 333366 51.51.255 51.0.255 51.0.204 51.51.204 0.0.153 0.0.102 3333FF 3300FF 3300CC 3333CC 000099 000066 102.153.255 51.102.255 0.0.255 0.0.204 0.51.204 0.0.51 6699FF 3366FF 0000FF 0000CC 0033CC 000033 0.102.255 0.102.204 51.102.204 0.51.255 0.51.153 0.51.102 0066FF 0066CC 3366CC 0033FF 003399 003366 153.204.255 51.153.255 0.153.255 102.153.204 51.102.153 0.102.153 99CCFF 3399FF 0099FF 6699CC 336699 006699 102.204.255 51.204.255 0.204.255 51.153.204 0.153.204 0.51.51 66CCFF 33CCFF 00CCFF 3399CC 0099CC 003333 153.204.204 102.204.204 51.153.153 102.153.153 0.102.102 51.102.102 99CCCC 66CCCC 339999 669999 006666 336666 204.255.255 153.255.255 102.255.255 51.255.255 0.255.255 0.204.204 CCFFFF 99FFFF 66FFFF 33FFFF 00FFFF 00CCCC 153.255.204 102.255.204 51.255.204 0.255.204 51.204.204 0.153.153 99FFCC 66FFCC 33FFCC 00FFCC 33CCCC 009999 102.204.153 51.204.153 0.204.153 51.153.102 0.153.102 0.102.51 66CC99 33CC99 00CC99 339966 009966 006633 102.255.153 51.255.153 0.255.153 51.204.102 0.204.102 0.153.51 66FF99 33FF99 00FF99 33CC66 00CC66 009933 153.255.153 102.255.102 51.255.102 0.255.102 51.153.51 0.102.0 99FF99 66FF66 33FF66 00FF66 339933 006600 204.255.204 153.204.153 102.204.102 102.153.102 51.102.51 0.51.0 CCFFCC 99CC99 66CC66 669966 336633 003300 51.255.51 0.255.51 0.255.0 0.204.0 51.204.51 0.204.51 33FF33 00FF33 00FF00 00CC00 33CC33 00CC33 102.255.0 102.255.51 51.255.0 51.204.0 51.153.0 0.153.0 66FF00 66FF33 33FF00 33CC00 339900 009900 204.255.153 153.255.102 102.204.0 102.204.51 102.153.51 51.102.0 CCFF99 99FF66 66CC00 66CC33 669933 336600 153.255.0 153.255.51 153.204.102 153.204.0 153.204.51 102.153.0 99FF00 99FF33 99CC66 99CC00 99CC33 669900 204.255.102 204.255.0 204.255.51 204.204.153 102.102.51 51.51.0 CCFF66 CCFF00 CCFF33 CCCC99 666633 333300 204.204.102 204.204.51 153.153.51 153.153.102 153.153.0 102.102.0 CCCC66 CCCC33 999966 999933 999900 666600 255.255.255 204.204.204 153.153.153 102.102.102 51.51.51 0.0.0 FFFFFF CCCCCC 999999 666666 333333 000000
Источники
1. dvoika.net/education/Book1/contents.html
2. Из книги: Еремин Е.А. Как работает современныйкомпьютер. — Пермь: изд-во ПРИПИТ
3. www.256.ru/lecture/lect-kgg0301.php
(Тема 3. Система цветов.)
Модели цвета на ЭВМ
Как порой сложно описатьцвет того неба, которое мы видим: у кого-то оно сине-голубое, у кого-то голубоес бирюзовым отливом, у кого-то серебристо-голубое и т.д. И было бы невозможнобез способа точного описания цвета в стандартизированных цифровых выражениях.
Цветовые пространства,или цветовые модели являются средствами количественного описания цвета иразличия между оттенками цвета.
/>
Существуетмного цветовых моделей, но все они принадлежат к одному из трех типов:
— психологические (по восприятию);
— аддитивные(основанные на сложении);
— субтрактивные (основанные на вычитании).
При обработке изображенийпри подготовке к печати имеют дело с тремя цветовыми моделями: CIE Lab — психологическое цветовое пространство, RGB — аддитивное цветовое пространство иCMYK — субтрактивное цветовое пространство. А в компьютерной графикеприменяются три цветовые модели: RGB, CMYK и HSB.
Любое преобразованиецвета из одного пространства в другое влечет за собой потерю данных о цвете визображении.
RGB-модель
Данная модель является«естественным языком» цвета для электронных устройств вводаизображения (мониторы, сканеры, цифровые камеры), в которых воспроизведениецвета основано на излучении или пропускании света, а не на его отражении отподложки при создании изображения.
Аддитивной она называетсяпотому, что цвета в ней генерируются суммированием световых потоков. Суммакрасного, зеленого и синего цветов максимальной одинаковой интенсивности даетбелый цвет.
R — red (красный), G — green (зеленый), B — blue (голубой).
/>
Наиболее распространеннымспособом кодирования цвета является модель RGB. При этом способе кодированиялюбой цвет представляется в виде комбинации трех цветов: красного (Red), зеленого(Green) и синего (Blue), взятых с разной интенсивностью. Интенсивность каждогоиз трех цветов — это один байт (т. е. число в диапазоне от 0 до 255), которыйхорошо представляется двумя 16-ричными цифрами (числом от 00 до FF). Такимобразом, цвет удобно записывать тремя парами 16-ричных цифр, как это принято,например, в HTML-документах.
Пример.
В языке гипертекстовойразметки документов HTML цвета можно задавать так: черный — 000000, белый — FFFFFF, желтый — FFFF00 и т. д.; чтобы получить более темный желтый цвет, надоодинаково уменьшить интенсивности красного и зеленого — A7A700.
Чем больше значение байтацветовой составляющей, тем ярче этот цвет. При наложении одной составляющей надругую яркость суммарного цвета также увеличивается.
Цветовая модель CMYK
Цветовая модель CMYKсоответствует рисованию красками на бумажном листе и используется при работе сотраженным цветом, т. е. для подготовки печатных документов.
В данной модели цвета присмешивании двух или более основных красок дополнительные цвета получаютсяпосредством поглощения одних световых волн спектра белого цвета и отражениядругих. Так, голубая краска поглощает красный цвет и отражает зеленый и синий,а желтая поглощает синий цвет и отражает красный и зеленый.
В аддитивной модели RGBсветовые потоки суммируются, производя более яркие цвета, а в субтрактивноймодели CMYK световые потоки вычитаются, генерируя более темные цвета. Еслиучесть светонепроницаемость бумаги, которая скорее отражает свет, чемпропускает его, то становится понятно, почему такие яркие цвета в изображениина мониторе становятся темными и унылыми в отпечатанном виде.
CMYK — cyan (голубой),magenta (пурпур), yellow (желтый), black (черный).
/>
Цветовыми составляющимиэтой модели являются цвета: голубой (Cyan), лиловый (Magenta), желтый (Yellow)и черный (Black). Эти цвета получаются в результате вычитания основных цветовмодели RGB из белого цвета. Черный цвет задается отдельно. Увеличениеколичества краски приводит к уменьшению яркости цвета.
Особые взаимоотношениядвух цветовых моделей
Цветовые модели RGB иCMYK являются дополнительнительными друг к другу, по крайней мере, в первомприближении. Теоритечески так сказать. Но простого одноозначного соответствиямежду этими цветовыми простанствами не существует. А иначе бы зачем их надо былоразделять на две модели?
Многие приятные для глазацвета, которые видны на мониторе, не могут быть воспроизведены красками наоттиске.
Следует отметить, что припреобразовании цифрового изображения из модели RGB в CMYK отмечается сдвигцвета к голубому. Точное значение сдвига зависит от используемых при печатаниитриад красок и типа бумаги, а также от технологии печати (листовая, рулонная,по сухому или по сырому, если речь идет об офсетной печати).
Таким образом, несмотряна то, что модели RGB и CMYK связаны друг с другом, однако их взаимные переходы(конвертирование) не происходят без потерь, так как цветовой охват у них разный.Снижение этих потерь требует выполнения сложных калибровок всех аппаратныхсредств и самих изображений.
/>
Цветовая модель HSB
Системы цветов RGB и CMYKсвязаны с ограничениями, накладываемыми аппаратным обеспечением (мониторкомпьютера в случае RGB и типографские краски в случае CMYK).
Цветовая модель HSBнаиболее удобна для человека, т. к. она хорошо согласуется с моделью восприятияцвета человеком. Компонентами модели HSB являются:
тон (Hue);
насыщенность(Saturation);
яркость цвета(Brightness).
Тон — это конкретныйоттенок цвета. Насыщенность характеризует его интенсивность или чистоту.Яркость же зависит от примеси черной краски, добавленной к данному цвету.
Значение цвета выбираетсякак вектор, выходящий из центра окружности. Точка в центре соответствует беломуцвету, а точки по границе окружности — чистым цветам. Направление вектора определяетцветовой оттенок и задается в угловых градусах. Длина вектора определяетнасыщенность цвета. Яркость цвета задают на отдельной оси.
Цветовая модель HSV
Цветоваямодель HSV (от англ. Нue, Saturation, Value — тон, насыщенность, величина)является, в отличие от рассмотренных выше моделей, ориентированной на человекаи его интуитивные представления о выборе цвета.
Рассмотримцилиндрические координаты в трехмерном евклидовом пространстве, H — угол в горизонтальной плоскости от оси Ox, S — радиус в горизонтальнойплоскости (расстояние до оси Oz), V — высота (по оси Oz). Всецветовое пространство представляет из себя перевернутую шестигранную пирамиду.
/>/>
Концептуально,можно представить художника, который смешивает цвета. Вершины основанияпирамиды соответствуют чистым основным цветам (красному, желтому, зеленому,цвету морской волны, синему и фиолетовому). При их смешивании друг с другом вразных пропорциях (в пространстве это будут линейные комбинации соответствующихвекторов) точка, соответствующая цвету, перемещается по основанию пирамиды. Смешиваяпротивоположные цвета (например, желтый и синий), можно получить белый.Добавляя к какому-либо чистому цвету черный, мы будем спускаться по пирамиде,получая различные оттенки, при этом диапазон Sбудет уменьшаться вплоть до нуля. На оси S = 0(оттенки серого) значение H не определено.Цветовая модель HLS
Цветоваямодель HLS (от англ. Нue, Lightness, Saturation — тон, светлота, насыщенность)схожа с моделью HSV. Снова рассмотрим цилиндрические координаты в трехмерномевклидовом пространстве, H — угол в горизонтальнойплоскость от оси Ox, S- радиус в горизонтальной плоскости (расстояние до оси Oz),L — высота (по оси Oz).Все цветовое пространство представляет из себя две соединенные основаниямишестигранные пирамиды.
/>/>
Как видно этамодель получена из HSV вытягиванием вдоль вертикальной оси. Понятия H и S остались теми же,только по вертикальной оси теперь L вместо V. Концептуальное различие состоит в том, что в этоймодели считается, что движение от чистых цветов (у которых L = 0,5, S = 1) как внаправлении белого, так и черного (а не только черного, как в HSV) одинаковоприводит к уменьшению информации в H (вплоть дотого, что в вершинах H не определено (как впрочем,и на всей вертикальной оси S = 0)) и сужениюдиапазона S.Цветовые модели Y**
Существуетнесколько тесно связанных цветовых моделей, которые объединяет то, что в нихиспользуется явное разделение информации о яркости и цвете. Компонента Y соответствует одноименной компоненте в модели CIE XYZ иотвечает за яркость. Такие модели находят широкое применение в телевизионныхстандартах, так как исторически необходима была совместимость с черно-белымителевизорами, которые принимали только сигнал, соответствующий Y. Также они применяются в некоторых алгоритмах обработкии сжатия изображений и видео.Цветовые модели YUV,YPbPr и YCbCr
Расcмотримцветовую модель YUV. U и Vотвечают за цветовую информацию и определяются через преобразование из RGB:
/>
Y = 0,299R + 0,587G + 0,114B;
U = 0,492(B — Y)
= -0,147R — 0,289G + 0,436B;
V = 0,877(R — Y)
= 0,615R — 0,515G + 0,100B;
Модель YUVприменяется в телевизионной системе PAL.
/>/>
Цветовые модели YCbCr иYPbPr являются вариациями YUV с другими весами для Uи V (им соответствуют Cb/Pbи Cr/Pr). YPbPr применяется для описания аналоговыхсигналов (преимущественно в телевидении), а YCbCr — для цифровых. Для ихопределения используются два коэффициента: Kb и Kr. Тогда преобразование из RGB в YPbPr описывается так:
Переход отRGB к YPbPr
/>
/>
/>
Выбор Kb и Kr зависит от того,какая RGB-модель используется (это в свою очередь зависит от воспроизводящегооборудования). Обычно берется, как и выше, Kb = 0, 114;Kr = 0, 299. В последнее время также используют Kb = 0, 0722; Kr = 0, 2126,что лучше отражает характеристики современных устройств отображения.
Изприведенных выше формул следует что при />имеемследующие диапазоны />; />. Для цифрового представления эти формулывидоизменяют для получения только положительных дискретных коэффициентов вдиапазонах
/>
Переход отRGB к YCbCr
/>
/>
/>
/>
В телевиденииобычно берут minY = 16, maxY =235, minC = 16, maxC =240. В стандарте сжатия изображений JPEG используется полный 8-битный диапазон: minY = 0, maxY = 255, minC = 0, maxC = 255.Цветовая модель YIQ
Цветоваямодель YIQ применялась в телевизионной системе NTSC (I — от англ. in-phase, Q — от англ. quadrature; происходят от особенностей систем декодирования). Онатесно связана с моделью YUV, так как переход от YUV к YIQ является поворотом вплоскости UV = IQ на />.
/>Y = 0,299R + 0,587G + 0,114B
I = 0,735(R — Y) — 0,268(B — Y) = 0,596R — 0,274G + 0,321BQ = 0,478(R — Y) + 0,413(B — Y) = 0,211R — 0, 523G + 0,311B
Обратныепреобразования для всех моделей получаются в результате применения обратнойматрицы преобразования.Цветовые модели CIEL*u*v* и CIE L*a*b*
У модели CIEXYZ все же есть существенный недостаток — неоднородность восприятия измененияцвета относительно расстояния на диаграмме цветности. В идеале хотелось бы,чтобы одинаковые расстояния между точками, соответствующими цветам на диаграммецветности, соответствовали приблизительно одинаковому восприятию человекомотличий между этими парами цветов. Именно для этих целей CIE в 1976 годупредложила модель L*u*v*. L* (от англ. Lightness) в этой модели соответствуетяркости, скорректированной с учетом особенностей человеческого восприятия.Получающаяся диаграмма цветности представлена на рисунке. Эта модельрекомендуется для представления света от источников.
Также CIE в1976 году с той же целью предложила и другую похожую модель L*a*b*, котораяполучила несколько более широкое распространение. Эта модель рекомендуется дляпредставления отраженного света.
/>/>
Точность воспроизведенияцвета
Цель полиграфическогорепродуцирования состоит в наиболее точном воспроизведении изображенияоригинала на оттиске. К сожалению, необходимо отметить, что идентичноевоспроизведение полутоновых, в особенности цветных, изображений практическинедостижимо. Ниже приведены одни из главных причин этого:
— оттиск изготавливаетсяна иной подложке, нежели оригинал (когда появляются различия в белизне, глянце,гладкости поверхности подложки между оригиналом и оттиском);
— оттиск изготавливаетсяс использованием различных видов печатных красок, которые определяются испособом печати;
— оттиск полутоновогоизображения всегда имеет растровую структуру, в то время как оригинал можетиметь непрерывную структуру полутона и контура.
Таким образом, если у васв руках есть что-то, что вы хотите сделать точь-в-точь, то первоначально надоопределить то, на каком материале оно сделано, каким способом (это минимум, чтонадо знать). Если вы затрудняетесь ответить на эти вопросы, обращайтесь кпрофессионалам-полиграфистам, иначе не избежать досадных ошибок, перепечаток ит.д.
Источники
1. www.intuit.ru/department/graphics/rastrgraph/1/
(Алгоритмические основы растровой графики информация [+] Авторы: Д.В. Иванов,А.А. Хропов, Е.П. Кузьмин, А.С. Карпов, В.С. Лемпицкий. 1. Лекция: Основныепонятия. Представление цвета в машинной графике).
2. www.bestreferat.ru/referat-74412.html
(Реферат: Цвет, цветовые модели, цветовые пространства).
3. dvoika.net/education/Book1/contents.html
Виды графики на ЭВМ иособенности её применения в ИС
Основные понятия.Представление цвета в машинной графике. Растровая и векторная графика. Понятиерастра
Для представленияграфической информации на двумерной плоскости (например, экране монитора,странице книги и т.п.) в вычислительной технике применяются два основныхподхода: растровый и векторный.
При векторном подходеграфическая информация описывается как совокупность неких абстрактныхгеометрических объектов, таких как прямые, отрезки, кривые, прямоугольники и т.п.
Растровая графика жеоперирует изображениями в виде растров. Неформально можно сказать, что растр — это описание изображения на плоскости путем разбиения всей плоскости или еечасти на одинаковые квадраты и присвоение каждому квадрату своего цветового (илииного, например, прозрачности, для последующего наложения изображений друг надруга) атрибута. Если таких квадратов имеется конечное число, то получается,что непрерывная цветовая функция изображения приближенно представлена конечнойсовокупностью значений атрибутов. Иногда понятие растра определяют болеешироко: как разбиение плоскости (или ее участка) на равные элементы(т.е.«замощение»), например шестиугольниками (гексагональный растр).Далее в этой книге расширенное толкование использоваться не будет.
С другой стороны, растрможно рассматривать как кусочно-постоянную аппроксимацию изображения, заданногокак цветовая функция на плоскости. Такая точка зрения позволяет применятьматематический аппарат теории аппроксимации для работы с растровыми изображениями,о чем подробнее будет рассказано далее.
Формально, введемследующие определения:
Растр (англ. raster) — отображение вида
/>
где />, />,
/>обозначаетмножество всех подмножеств />,
C — множество значений атрибутов (какправило, цвет).
f(i,j) — элементрастра, называемый пикселем (англ. pixel (от picture element)), в русскоязычнойлитературе иногда также переводится как пиксел);
f(i, j) = (A(i, j),C(i, j)),
где
/>-область пикселя,
/> — атрибутпикселя (как правило, цвет).
Чаще всего мы будемпользоваться следующими двумя видами атрибутов:
C(i,j) = I(i, j) — интенсивность (или яркость) пикселя;
C(i,j) = {R(i, j),G(i, j),B(i, j)} — цветовые атрибуты в цветовой модели RGB (см. раздел 1.2).
Также иногда будутупотребляться матричные обозначения:
Mij = (Aij ,Cij)
Aij может определяться двояко, взависимости от того, с какой моделью мы хотим работать:
Aij:= (i, j) — однаточка.
/> — квадрат.
Пример
На реальных графическихустройствах физически пиксели могут быть прямоугольниками, что иногда порождаетдополнительные трудности.
В реальности, какправило, X и Y — ограниченные наборы неотрицательных целых чисел; такой растр называется прямоугольным.Для него применимо понятие Аспектовое отношение (англ. aspect ratio) — отношение ширины к высоте растра (|X|/|Y|). Чащевсего такое понятие употребляется в связи с физическими растрами (дисплеями,ПЗС-матрицами фотоаппаратов и т.д.) и записывается в виде простой дроби с ":", например «4:3».
/>/>
Модель растра первоготипа.
/>/>
Модель растра второготипа.
Бесконечные растры (когда Xи Y неограниченны) бывают удобны для описанияалгоритмов, позволяя избежать особых ситуаций. Впрочем, самой сутью некоторыхалгоритмов является как раз работа с граничными случаями.
Растровое представлениеявляется естественным в тех случаях, когда нам не известна дополнительнаяинформация об изображаемых объектах (например, цифровым фотоаппаратом можноснимать изображения произвольного содержания). В случае же векторного описанияпримитивами являются более сложные объекты (линии и области, ограниченныелиниями), что предполагает априорные знания о структуре изображения. Впоследнее время проявляется ярко выраженная тенденция к преобладанию устройствввода-вывода двумерной графической информации, основанных на растровом принципекак более универсальном. Возникающая при выводе задача отображениягеометрических объектов, заданных их математическим описанием (например,координатами концевых точек и цветом для отрезка), на растре, называемая растеризацией,рассмотрена в последующих разделах.
При построенииалгоритмов, работающих с изображениями, можно также пользоваться информациейкак непосредственно атрибутов пикселей, так и работать с примитивами болеевысокого порядка. В данной книге в основном рассматриваются алгоритмы первоготипа, про которые говорят, что они работают в пространстве изображения (англ.image space), тогда как вторые работают в объектном пространстве (англ. objectspace) (эти термины чаще употребляются в трехмерной графике).
Устройства отображениярастровой графики рассматриваются в следующей лекции.
Масштабируемаявекторная графика (Scalable Vector Graphics)
SVG (Scalable VectorGraphics, в переводе масштабируемая векторная графика) — это язык для описаниядвухмерной графики в формате XML. Можно сказать, что SVG – это HTML дляграфики. Он включает в себя несколько типов различных объектов:
· векторную графику(линии, окружности, кривые)
· текст (сформатированием, заданием стилей и эффектов)
· растровыеизображения (внедряемые в SVG–документ).
Графические возможностиязыка чрезвычайно велики и сравнимы с возможностями пакетов Corel Draw и AdobeIllustrator:
· произвольныезаливки, штриховки, градиенты, заливки заданным растром, а также произвольнымфрагментом векторного изображения,
· разнообразныестили линий — линии произвольной толщины, штриховые, с различными стилямиугловых и конечных точек,
· возможностьиспользование кривых Безье (кубических и квадратичных),
· поддержкапрозрачности всего изображения или его части, с заданной степенью,
· возможностьприменения фильтров, типичных для растровой графики – размытие, попиксельноесмешивание, наложение,
· поддержка Unicode– возможность отображения в одном SVG документе текстов на различных языках иразличными шрифтами,
· расположениетекстовых строк вдоль произвольных кривых,
· встроенныеразвитые средства анимации, позволяющие без программирования в режиме реальноговремени менять практически все атрибуты изображения или его фрагмента,
· встроенныесредства для создания интерактивности, а также поддержка JavaScript и DOM,
· поддержкакаскадных таблиц стилей (CSS),
· поддержкаантиалиасинга.
Название «масштабируемаявекторная графика» отражает следующие превосходства языка:
· SVG–документымогут быть отображены на самых различных устройствах – от экранов мобильныхтелефонов и карманных компьютеров до мониторов PC и ноутбуков.
· SVG–документыпредставляются в векторном формате, следовательно, их можно масштабировать безпотери качества по сравнению с растровыми изображениями
· SVG–графика можетбыть создана «на лету» при помощи любого языка программирования(Javascript, Java или C#) и возможно управление видом этой графики в режимеработы приложения.
/>
Рис. Увеличенный фрагмент растрового (А)и векторного SVG (Б) изображений.
У растрового изображениязаметна «зазубренная» структура.
Объектная модель SVGдокумента основана на принятом консорциумом W3C в 2000 году стандарте DOM(Document Object Model) Level-2. Это дает возможность использования стандартныхязыков для начального построения и произвольного манипулирования любымиэлементами изображения. Составной частью стандарта SVG является модель событий,позволяющая привязать произвольный сценарий к любому фрагменту SVG документа идостаточно легко реализовывать интерактивные графические изображения.
SVG разрабатываетсяконсорциумом W3C при поддержке таких крупных компаний, как Microsoft, Adobe,Corel, IBM, Hewlett-Packard, Sun Microsystems, Canon, Kodak и многих других(всего более двадцати). От их совместных усилий зависят стандартизация многихдеталей языка, а также скорость его создания.
Стандарт SVG 1.0 былпринят в качестве спецификации консорциумом в сентябре 2001 г. Стандарт SVG 1.1 и его версии SVG mobile profiles (SVG Basic and SVG Tiny) были принятыконсорциумом в качестве рекомендации в январе 2003 г. Ведутся работы по созданию стандарта SVG 1., который сейчас имеет статус черновика. Этаверсия языка будет содержать ряд новых свойств: встроенные атрибуты фигурногоформатирования текста, поддержка аудио и видео, а также более полная поддержкаDOM.
На момент написания этогокурса рабочей версией является SVG 1.1. Поэтому именно его мы и будемрассматривать.Сравнение растровой и векторной графики Критерий сравнения Растровая графика Векторная графика Способ представления изображения Растровое изображение строится из множества пикселей. Векторное изображение описывается в виде последовательности команд. Представление объектов реального мира Растровые рисунки эффективно используются для представления реальных образов. Векторная графика не позволяет получать изображения фотографического качества. Качество редактирования изображения При масштабировании и вращении растровых картинок возникают искажения. Векторные изображения могут быть легко преобразованы без потери качества. Особенности печати изображения Растровые рисунки могут быть легко напечатаны на принтерах. Векторные рисунки иногда не печатаются или выглядят на бумаге не так, как хотелось бы.
Классификация изображенийи преобразования
Классификация
Говоря об обработкеизображений с помощью ЭВМ целесообразно выделить 4 класса изображений. Этаклассификация связана не столько с природой зрительного восприятия изображений,сколько с подходом к их представлению и обработке.
Класс 1 — тоновые ицветные изображения. В этот класс входят изображения, имеющие вид обычныхтелевизионных изображений. Они обеспечивают довольно точное воспроизведениереальности и представляются матрицами с целочисленными элементами. Дляобозначения этих элементов используют термины «элементы изображения»,«пиксел», «пэл». В большинстве прикладных задач эти матрицыимеют очень большие размеры объектов — 512х512 элементов, являющиеся наиболееобщепринятыми. В связи с этим представление изображений не всегда хранятся впамяти в виде обычных матриц и часто используются более изощренныеразновидности структур данных. Цветные изображения могут представляется либопри помощи 3-х матриц (для красного, синего и зеленого цветов в отдельности),либо с помощью другой матрицы таким образом, что отдельные биты любого элементапредставляют различные цвета, так как человеческий глаз порой не в состоянииразличать уровни освещенности, различающиеся друг от друга менее чем на 1%, тодля представления цветного изображения достаточно затрачивать по 1-му байту нацвет одного пикселя. Приемлемых результатов удается добиться, используя по трибита для передачи любого из двух цветов и два бита для передачи третьего.
Класс 2 — 2-х уровневыеили представляемые в нескольких цветах изображения. Изображение книжнойстраницы — это типичный пример 2-го класса, т.е. чёрно-белое изображение.Подобное изображение можно представлять матрицами, затрачивая по 1 биту наэлемент, а также в виде «карт», так как на этих изображениях имеютсяхорошо различимые области одного цвета. Поэтому такие изображения объединены водин класс. Одна из проблем, возникающих в связи с использованием 1-го бита дляпредставления любого пиксела, заключается в отсутствие стандартного дляразличных типов ЭВМ и устройств визуального отображения способов объединениябитов в байт, и байт в слово. То есть, крайний слева пиксел можетпредставляться, как наименее, так и наиболее значимыми битами байта. Поэтомупользователь должен думать о выборе наиболее подходящего способа представленияв применяемом им устройстве.
Класс 3 — непрерывныекривые и линии. Примеры изображений 3-го класса — это контуры областей,сигналы, диаграммы и графики. Соответствующие данные являютсяпоследовательностями точек, допускающих представление через их координаты х иу. Но такой метод представления довольно неэффективен. При чем то же самоеотносится и к представлению, основанному на использовании разности значенийкоординат Dх и Dу у соседних точек. Более эффективным является представление спомощью цепных кодов, при использовании которых вектору, соединяющему 2соседние точки ставится в соответствие один символ принадлежащий некоторомуконечному множеству.
На рисунке показанобычный цепной код, использующий 8 направлений.
/>
Задание стандартногоцепного кода
Если точки расположеныдостаточно близко друг к другу, то ошибка вносимая квантованием может оказатьсяприемлемой. Более эффективный способ представления заключается в применениидифференциального цепного кода, предусматривающего кодирование каждой точкиразностью 2-х последовательных кодов. В этом случае значения будут0,+/-1,+/-2,+/-3 и 4. Вероятности их появления неодинаковы. При кодировкегладких кривых значение 0 и +/-1 будет появляться чаще, чем все остальные, а 4- крайне редко. Поэтому для представления различных направлений можновоспользоваться каким-либо из кодов с переменной длинной.
При таком способекодирования обычно затраты в среднем не превышают 2-х бит на точку.
Класс 4 — точки илимногоугольники. Изображения класса 4 состоят из множеств отдельных точек,отстоящих друг от друга так далеко, что для их представления цепным кодомпользоваться нельзя. Вместо него следует использовать матрицу, содержащую ихкоординаты х и у. Соответствующая аппаратура отображения позволяет соединитьточки прямыми или простыми кривыми. В прикладных задачах машинной графики чащевсего используют изображения именно этого типа. Несмотря на то, что визуальноеотображение может относится к классу 2 или к классу 1, его внутреннееизображение принадлежит классу 4. Во многих прикладных задачах используетсяодна из следующих форм представления:
1) Аппроксимацияповерхностей многогранниками. В этом случае грани обычно треугольные. Послепроектирования изображение состоит из многоугольников.
2) Криволинейная аппроксимацияповерхностей. На поверхности вычерчивается ряд кривых, описание которых потомиспользуется для получения проекций, воспроизводимых в виде изображений 3класса.
3) Аппроксимацияучастками поверхности высшего порядка. Этот способ аналогичен первому способу,за исключением того, что в качестве элементов, образующих поверхность объектаиспользуется не плоские многоугольники, а участки поверхности высшего порядка.
Во всех случаях положениеобъекта определяется некоторым небольшим числом точек и поэтому изображениекласса 4 предоставляют наибольший интерес для машинной графики.
Ввод изображения
Изображение,представленное в аналоговой форме, необходимо преобразовать в некоторуючисловую матрицу, а затем можно приступать к его обработке на ЭВМ. Процесс такогопреобразования называется дискретизацией и состоит из 2-х процессов: выборки иквантования. Первый процесс заключается в выборе на поле наблюдения начальногомножества точек, в любой выбранной точке измеряются характеристики изображения,которые потом используются на всех последующих этапах обработки изображения.Так как ЭВМ располагает ограниченной памятью, то результаты полученныхизмерений описывается конечным числом символов. Такая процедура называетсяпроцессом квантования. Характеризуя плотность размещения выборочных точек,часто говорят о пространственном разрешении, а, характеризуя точностьпредставления результатов указанных измерений, говорят о тоновом или цветовомразрешении.
Во многих устройствахдискретизации изображений используется телевизионные камеры, так как ониобеспечивают преобразование светового сигнала в электрический. К электрическомусигналу можно уже применять процессы выборки и квантования, используя для этогоаналого-цифровой преобразователь (АЦП). Но возникает проблема — это оченьбольшая скорость воспроизведения данных на выходе стандартных телевизионныхкамер. Системы телевизионного вещания передают 30 кадров в секунду и любой кадрсодержит около 500 строк растра. Если вести обработку в реальном масштабевремени необязательно, то можно перестроить телекамеру так, чтобы она работалас меньшей скоростью или воспользоваться каким-либо устройством, осуществляющемсжатие полосы частот. В специализированных устройствах дискретизацииизображений, просмотр изображения в соответствующем порядке осуществляется припомощи особой технологии управления световыми пучками. В барабанных сканирующихустройствах изображение закрепляется на вращающемся барабане, а световой пучокперемещается параллельно оси барабана. Устройства дискретизации этого типаобычно работают медленнее по сравнению с телевизионными камерами, но результатыполучаются лучше.
Преобразованияизображений
Преобразованиеизображения класса 1 в изображение класса 2 — это процесс сегментации,обеспечивает выделение областей приблизительно одинакового цвета и (или)яркости. Часто термин «сегментация» используется для обозначенияпроцесса поиска однородностей в смысле некоторого более сложного свойства (типатекстур).
Преобразованиеизображений класса 2 в класс 3 заключается в построении или отслеживанииконтура. Это преобразование обеспечивает отображение заданной области внекоторую замкнутую кривую. Второе допустимое преобразование — прореживание,заключается в отображении области в некоторый граф, называемый остовом области.
Преобразование из класса3 в класс 4, называемое сегментацией кривых, предназначено для отысканиякритических точек конура. Если это многоугольники, то такими точками являютсяуглы. Применяется при распознавании образов, для их реализации может потребоватьсяприменение сложных математических методов.
Преобразование из класса4 в класс 3 включает процессы интерполирования, обеспечивающего проведениегладкой кривой через некоторое множество точек и аппроксимация, обеспечивающаяпроведение гладкой кривой рядом с некоторым множеством точек.
Преобразование из класса3 в класс 2. Если в качестве входного изображения задается контур, то частовозникает задача заполнения контура (задача штриховки). Причем еслирассматривать штриховку, то яркость или цвет некоторой области не остаютсяодинаковыми, а изменяется в соответствии с определенными правилами. Есливходным изображением служит остов, то для восстановления области необходимоиспользовать процедуру расширения.
Преобразование из класса2 в класс 1. Если изображение, воспроизводимое на экране в нескольких цветах,то оно часто оказывается ущербным в эстетическом отношении, т.к. легкообнаруживаются контуры (границы) между объектами. Некоторого сглаживанияизображения можно добиться с помощью фильтра нижних частот или подмешиваниемнизкочастотного шума.
Преобразования из классовс меньшим номером в класс с большим номером относится к сфере интересовраспознавания образов. Обратные преобразования — это сфера интересов машиннойграфики. При обработке изображений используются и те и другие преобразования, атакже преобразования, не выводящие изображения за пределы соответствующегокласса. Таким образом, улучшение качества изображения является внутриклассовымизображением, а сжатие изображения часто оказывается преобразованием,переводящим его из класса 1 в класс 2.
Еще один важный классзадач — это преобразования, связывающие двухмерное изображение и трехмерныеобъекты. Термин «проектирование» используется для обозначенияопераций, при помощи которых трехмерный объект преобразовывается в двухмерноеизображение. Часто двухмерное изображение преобразуется в одномерный массив.Для операции восстановления трехмерного объекта по его изображению,используется термин «обратное проектирование». Эти задачииспользуются в 2-х прикладных областях, например, в аксиальной поперечнойтомографии, или когда поперечное сечение трехмерного объекта восстанавливаетсяпо набору рентгеновских проекций. Для обозначения процедур, обеспечивающихрешение этой задачи используется термин «алгоритмы воспроизведения».В машинной графике часто требуется воспроизвести некоторую проекцию трехмерногопредставления пространственного объекта.
Основные областиприменения компьютерной графики
Научная графика
Первые компьютерыиспользовались лишь для решения научных и производственных задач. Чтобы лучшепонять полученные результаты, производили их графическую обработку, строилиграфики, диаграммы, чертежи рассчитанных конструкций. Первые графики на машинеполучали в режиме символьной печати. Затем появились специальные устройства — графопостроители (плоттеры) для вычерчивания чертежей и графиков чернильнымпером на бумаге. Современная научная компьютерная графика дает возможностьпроводить вычислительные эксперименты с наглядным представлением ихрезультатов.
Деловая графика
Область компьютернойграфики, предназначенная для наглядного представления различных показателейработы учреждений. Плановые показатели, отчетная документация, статистическиесводки — вот объекты, для которых с помощью деловой графики создаютсяиллюстративные материалы. Программные средства деловой графики включаются всостав электронных таблиц.
Конструкторская графика
Используется в работеинженеров-конструкторов, архитекторов, изобретателей новой техники. Этот видкомпьютерной графики является обязательным элементом САПР (систем автоматизациипроектирования). Средствами конструкторской графики можно получать как плоскиеизображения (проекции, сечения), так и пространственные трехмерные изображения.
Художественная ирекламная графика
Стала популярной вомногом благодаря телевидению. С помощью компьютера создаются рекламные ролики,мультфильмы, компьютерные игры, видеоуроки, видеопрезентации. Графическиепакеты для этих целей требуют больших ресурсов компьютера по быстродействию ипамяти. Отличительной особенностью этих графических пакетов являетсявозможность создания реалистических изображений и «движущихсякартинок». Получение рисунков трехмерных объектов, их повороты,приближения, удаления, деформации связано с большим объемом вычислений.Передача освещенности объекта в зависимости от положения источника света, отрасположения теней, от фактуры поверхности, требует расчетов, учитывающихзаконы оптики.
Компьютерная анимация
Получение движущихсяизображений на экране дисплее. Художник создает на экране рисунке начального иконечного положения движущихся объектов, все промежуточные состояниярассчитывает и изображает компьютер, выполняя расчеты, опирающиеся наматематическое описание данного вида движения. Полученные рисунки, выводимые последовательнона экран с определенной частотой, создают иллюзию движения.
Мультимедиа
Объединениевысококачественного изображения на экране компьютера со звуковымсопровождением. Наибольшее распространение системы мультимедиа получили вобласти обучения, рекламы, развлечений.
Источники
1. www.256.ru/lecture/lect-kgg0301.php
(Тема 3. Система цветов.)
2. www.intuit.ru/department/graphics/rastrgraph/
(Алгоритмические основы растровой графики Авторы: Д.В. Иванов, А.А. Хропов,Е.П. Кузьмин, А.С. Карпов, В.С. Лемпицкий)
3. www.intuit.ru/department/graphics/svg/
(Алгоритмические основы растровой графики Авторы: Д.В. Иванов, А.А. Хропов,Е.П. Кузьмин, А.С. Карпов, В.С. Лемпицкий)
Особенности примененияграфики в Интернет
Созданиеграфики
Рисункистали неотъемлемой частью HTML-документов, поэтому просто невозможно нерассмотреть вопросы применения графики в гипертексте. Тема, с точки зрениядизайна, поистине необъятная, но, к счастью, с практической стороны делообстоит намного проще. Так же, как и в случае с гипертекстовыми редакторами, вэтой области мы сталкиваемся с большим количеством программных средств,призванных облегчить жизнь (а точнее процесс рисования) авторам Web-страниц.Графика для Интернета несколько отличается от обычной, и эти отличия будутрассмотрены в данной главе.
Форматыграфических файлов
Создаватьрисунки можно самыми разными способами, используя любые (общепринятые иэкзотические) графические пакеты и форматы файлов. Но в конечном итогепотребуется преобразовать результаты своей работы в один из стандартных дляИнтернета форматов. Сделать это очень легко: надо открыть ваш рисунок вграфическом редакторе и выполнить команду. Сохранить как (Save As), выбрав длянового файла формат GIF, JPG или PNG. Из числа наиболее популярных программ дляобработки графики хотелось бы упомянуть PhotoShop 5.x фирмы Adobe или MicrosoftPhoto Editor. Кроме того, для иллюстрации практической работы я выбралинтересный, на мой взгляд, пакет Gif Construction Set for Windows 95, созданныйфирмой Alchemy Mindworks. Наверное, не у каждого читателя этой книги будетвозможность установить на своем компьютере мощный пакет для рисования ианимации, а также потратить время на его изучение, поэтому в приведенныхпримерах я старался использовать простые графические редакторы, например, MSPaint.
Самымраспространенным форматом графических файлов для HTML-документов является GIF (Graphic Interchange Format). Для кодирования цвета в нем используется 8 бит, тоесть допускается 256 различных цветов или столько же градаций серого. Наборыцветов (палитры) могут быть различными. Один GIF-файл может содержать несколькоизображений, позволяющих создавать движущиеся или изменяющиеся образы. В этомслучае требуется согласование палитр различных изображений, составляющих одинфайл. Похожая проблема возникает, если монитор работает в режиме 256 цветов, ана экране одновременно воспроизводятся несколько изображений с разнымипалитрами. Очевидно, что для части картинок качество цветопередачи будетухудшено.
Самопо себе 8-битовое кодирование цвета предполагает, что размер графического файладолжен быть относительно небольшим. Но, кроме того, для уменьшения размерафайла используется еще и сжатие изображения. Существует две разновидностиGIF-файлов: сжатые и обычные, в которых сжатие отсутствует. Компактность файлаи дополнительные преимущества стали причиной того, что данный формат прочноутвердился в качестве стандарта де-факто для Интернета.
Дополнительноепреимущество заключаются в том, что хранение информации в файле может бытьорганизовано таким образом, чтобы при выводе рисунка происходило чередованиестрок. То есть вначале будут выводиться строки с номерами 1, 5, 9 и т. д.,затем с номерами 2, 6,10 и т. д., и так до тех пор, пока весь рисунок не будетотображен. Для наблюдателя такой рисунок вначале кажется нечетким, а затем четкостьизображения увеличивается. При передаче данных по сети это особенно выгодно,так как не требует полной передачи файла и позволяет увидеть изображение сразуже, хотя и в несколько размытом виде.
Другоепреимущество GIF — возможность сделать часть изображения прозрачной. Прозрачнымможет стать только один цвет. Так, создание прозрачного фона позволяет болееестественно вписать рисунок в документ и избежать появления прямоугольника,обозначающего границы изображения.
Дляформата GIF разработано несколько спецификаций. В соответствии со спецификациейGIF89a графический файл может состоять из нескольких блоков.
•Блок заголовка HEADER содержит информацию о размере экрана и палитре.
•Блок текста PLAIN TEXT позволяет добавлять символьные данные к рисунку.
• Блокизображения IMAGE содержит одну картинку, импорт которой может осуществлятьсяне только в формате GIF. При создании движущихся изображений в один файлвключается несколько таких блоков.
•Блок управления CONTROL используется для размещения флагов прозрачности
иожидания, а также для определения временной задержки при выводе нового блокаизображения.
•Блок приложения APPLICATION предназначен для хранения служебной информации.
•Блок комментария COMMENT используется для размещения произвольной информации. Этиданные не выводятся на экран во время воспроизведения GIF-изображения.
•Блок цикла LOOP необходим для многократного воспроизведения движущейсякартинки. В этом блоке задается число повторений при показе «ролика».
Вторымподходящим для Интернета графическим форматом является JPEG (JPG), названныйтак в честь своего разработчика — Join Photographic Experts Group. Этот форматобеспечивает 24-битовое кодирование цвета и лучше подходит для хранения такихизображений, как фотографии. Недостатком формата является возможность искаженияцвета в результате сжатия данных.
ДляИнтернета был разработан еще один формат графики — PNG (Portable NetworkGraphics). Он создан с целью замены формата GIF. В отличие от своего прототипановый формат позволяет использовать как 8-битовое, так и 24-битовое кодированиецвета. Кроме того, алгоритм создания прозрачности усовершенствован. С помощьюальфа-канала прозрачность может быть задана для участков изображения,содержащих разные цвета. Для 24-битовых форматов прозрачность может бытьнеполной, то есть разработчик устанавливает ее величину в процентах (от 0 до100). К сожалению, броузеры пока не научились воспроизводить полупрозрачныеизображения.
Созданиефона HTML-документа
Кфоновому рисунку HTML-документа, безусловно, предъявляется ряд требований. Взависимости от того, какой вид хочет придать своей странице автор, выбираетсянаправление конструирования фона. До недавнего времени классическим решениембыло создание бледно-серого фона с таким же бледным, но рельефным рисунком.Здесь очень многое зависит от художника, но современные графические редакторыпозволяют создавать похожие эффекты и автоматически. Такой фон не долженощутимо снижать контрастность страницы и мешать чтению текста.
Впоследнее время в моде на фоновые рисунки произошли изменения. Все чаще можновстретить белый фон. Белый цвет вне конкуренции, и тут не надо что-либообъяснять. Другое направление — использование бледного фона, но другого цвета,например, бежевого, голубого или зеленого. Сам рисунок выглядит какпроизвольный узор из точек, напоминая поверхность кожи или камня. Здесь опять-таки,полет фантазии художника ограничивается необходимостью обеспечения контрастности.
Наконец,для экзотических страниц самым популярным фоном остается черный. Его разнообразятизображениями звезд (для страниц с космической тематикой), создавая ночноенебо, или дополняют кроваво-красными надписями или рисунками (если надо сделать«круто»).
Влюбом случае источником фона служит рисунок небольшого размера. Заранееневозможно предугадать, какой размер на экране займет документ, так как браузервыполняет автоматическое форматирование. В результате рисунок фона (фрагмент)будет тиражироваться так, чтобы заполнить все пространство окна. Разработчикстраницы должен решить, как будут совмещаться левая и правая, а также верхняя инижняя стороны исходного рисунка.
Рассмотримпроцедуру подготовки изображения для фона. В качестве примера я хочуиспользовать текстуру. Как правило, она имеет нерегулярный рисунок и несодержит ярко выраженных деталей. Фрагментами могут быть изображения облаков,деревьев, камней, поверхности воды. Основой фона документа может стать ифрагмент фона картины, выполненной акварелью или маслом. Все это легко найти вСети. Так, например, для получения древесного рисунка вовсе не обязательноискать изображение среза дерева. Можно использовать подходящую фотографиюдерева и вырезать кусочек изображения ствола. Один раз мне попалась фотографиястарого дерева с содранной временем и ветром корой. Кусочек фотографии пригодилсядля создания «орехового» фона Web-страницы. Видно, что рисунок многократноповторяется и границы между фрагментами хорошо заметны.
/>
Чтобыубрать границы, надо использовать четыре одинаковых изображения. Для трехфрагментов надо выполнить операции зеркального отображения. В редакторе Paintэто можно сделать, выбрав команду Рисунок > Отразить/повернуть. Затемтребуется аккуратно соединить четыре фрагмента так, чтобы между ними не оставалосьпустого пространства, но и не было наложения. Это удобно сделать в режимеувеличения. В конце работы полученный рисунок перемещают в верхний левый уголрабочего поля и выбирают размер рисунка так, чтобы не оставалось незаполненногопространства. Осталось конвертировать изображение в формат JPG или GIF.
/>
Соединениечетырех изображений: а — исходный фрагмент; б— фрагмент, отраженный сверхувниз; в— фрагмент, отраженный сверху вниз и слева направо; г— фрагмент,отраженный слева направо.
Далеепоказано, как изменился вид фона после всех преобразований. Таким образом, есливы путешествуете по Web, имеет смысл коллекционировать интересные фотографии ирисунки. Они все равно записываются в кэш на вашем диске, и их надо толькопериодически копировать в отдельную папку. При выборе и использованиифрагментов изображений необходимо помнить, что существуют авторские права ихсоздателей, и соблюдать меру.
/>
Мырассмотрели только один прием создания фона. Существует много других способовподготовки таких рисунков. Например, можно использовать исходный рисунок в видедлинной узкой полосы, которая будет с гарантией превосходить ширину окнаброузера. Высота полосы может быть уменьшена вплоть до одного пиксела.Учитывая, что в каждом ряде фона исходный рисунок будет воспроизводиться ссамого начала, можно получить такие эффекты, как вертикальные полосы илиплавные переходы цвета.
Кисходному файлу фона предъявляются два основных требования: файл не должен бытьбольшим, а фон не должен препятствовать свободному чтению документа.
Прозрачностьдля GIF и PNG-изображений
Выше,в разделе «Форматы графических файлов», уже упоминалось, что один из цветовизображения формата GIF можно сделать прозрачным. Чаще всего прозрачным делаютцвет фона. Рисунок с прозрачным фоном, размещенный в документе, смотритсясовсем иначе. Он как бы сливается с документом, становясь его неотъемлемойдеталью.
Многиеграфические редакторы позволяют устанавливать прозрачность. Так, показанредактор изображений MS Photo Editor.
/>
Дляоткрытия окна, которое позволит выбрать нужный цвет, следует щелкнуть на кнопкеSet Transparent Color (установить прозрачный цвет). Затем, когда указатель мышипревратится в наклонную стрелку, щелкните на нужном цвете. Обратите внимание,что в окне диалога показаны числовые характеристики выбранного цвета. Это можноиспользовать и для того, чтобы быстро узнать величины базовых цветов для любогооттенка, не устанавливая прозрачность в действительности.
Далеепоказан фрагмент Web-страницы Graphics.htm, на которой для сравнения помещеныдва рисунка: с непрозрачным и прозрачным фоном. При создании эффектапрозрачности в GIF-файле необходимо учитывать, что информация о выбранном цвететеряется, поэтому перед проведением такой операции необходимо создатьстраховочную копию файла.
/>
РедакторMS Photo Editor также позволяет определять прозрачный цвет для файлов форматаPNG. На рисунке работы редактора видно, что кроме указания цвета можно задатьстепень прозрачности в процентах. Это возможно только для 24-разрядных файлов.Разумеется, любое изображение может быть конвертировано в такой формат.
Источники
1. Гончаров А. Самоучитель HTML. — СПб.: Питер
Кодирование звуковойинформации
Несколько забегая вперед,к следующему поколению, рассмотрим дополнительно кодирование звуковойинформации (ЭВМ третьего поколения, конечно, еще не умела обрабатывать этот видинформации). Принцип преобразования звукового сигнала в цифровую форму и егопоследующее воспроизведение показаны на рисунке.
/>
Запись звука происходитследующим образом. Выбирается система равноотстоящих друг от друга уровнейнапряжения сигнала и каждому из них ставится в соответствие определенный номер.Затем через равные очень небольшие промежутки времени измеряется уровеньвходного сигнала и определяется, к какому из стандартных уровней он ближе всегоподходит; номер найденного уровня и записывается в память в качестве громкостизвука в данный момент.
Для высококачественнойстереофонической записи используется частота 44000 Гц, т.е. измерениепроисходит десятки тысяч раз в секунду.
При воспроизведенииданные считываются, и с такой же самой, как и при записи, высокой частотойкомпьютер изменяет интенсивность звука в зависимости от прочитанных номеров уровней.Интересно, что регулировка громкости при таком методе воспроизведения в самомпрямом смысле осуществляется с помощью умножения: например, чтобы увеличитьгромкость вдвое, перед воспроизведением номер уровня необходимо также удвоить.
Таким образом, рассмотревпринципы хранения в ЭВМ различных видов информации, можно сделать важный выводо том, что все они так или иначе преобразуются в числовую форму и кодируютсянабором нулей и единиц. Благодаря такой универсальности представления данных,если из памяти наудачу извлечь содержимое какой-нибудь ячейки, то принципиальноневозможно определить, какая именно информация там закодирована: текст, числоили картинка.
Источник
1. e97.nm.ru/teor/princip/1_3.html