К.Ю. Поляков, Е.А. Ерёмин, Кодирование информации Кодирование графической информации 1

Кодирование информации, 10 класс К.Ю. Поляков, Е.А. Ерёмин, Растровое кодирование 2 Пиксель – это наименьший элемент рисунка, для которого можно задать свой цвет. дискретизация пиксель Растровое изображение – это изображение, которое кодируется как множество пикселей. Рисунок искажается! !

Кодирование информации, 10 класс К.Ю. Поляков, Е.А. Ерёмин, Растровое кодирование A FF 42 5A 7E 1A2642FF425A5A7E 16

Кодирование информации, 10 класс К.Ю. Поляков, Е.А. Ерёмин, Задача 4 Закодируйте рисунок с помощью шестнадцатеричного кода:

Кодирование информации, 10 класс К.Ю. Поляков, Е.А. Ерёмин, Разрешение 5 Разрешение – это количество пикселей, приходящихся на дюйм размера изображения. ppi = pixels per inch, пикселей на дюйм 300 ppi96 ppi48 ppi24 ppi печать экран 1 дюйм = 2,54 см

Кодирование информации, 10 класс К.Ю. Поляков, Е.А. Ерёмин, Разрешение 6 Задача 1. Какой размер в пикселях должен иметь закодированный рисунок с разрешением 300 ppi, чтобы с него можно было сделать отпечаток размером 10×15 см? высота 10 см × 300 пикселей 2,54 см 1181 пиксель ширина 15 см × 300 пикселей 2,54 см 1771 пиксель

Кодирование информации, 10 класс К.Ю. Поляков, Е.А. Ерёмин, Разрешение 7 Задача 2. Закодированный рисунок имеет размеры 5760 × 3840 пикселей и разрешение 600 ppi. Какой размер будет у изображения, отпечатанного на принтере? ширина 5760 пикселей × 2,54 см 600 пикселей 24,4 см высота 3840 пикселей × 2,54 см 600 пикселей 16,3 см

Кодирование информации, 10 класс К.Ю. Поляков, Е.А. Ерёмин, Кодирование цвета Как выводить на монитор цвет с кодом 00? ? Как закодировать цвет в виде чисел? ?

Кодирование информации, 10 класс К.Ю. Поляков, Е.А. Ерёмин, Теория цвета Юнга-Гельмгольца 9 Свет любой длины волны можно заменить на красный, зелёный и синий лучи! ! , нм чувствительность три типа «колбочек»

Кодирование информации, 10 класс К.Ю. Поляков, Е.А. Ерёмин, Цветовая модель RGB 10 Д. Максвелл, 1860 цвет = ( R, G, B ) red красный blue синий green зеленый (0, 0, 0) (255, 255, 255) (255, 0, 0) (0, 255, 0) (255, 255, 0) (0, 0, 255) (255, 150, 150)(100, 0, 0) Сколько разных цветов можно кодировать? ? 256·256·256 = (True Color, «истинный цвет») RGB – цветовая модель для устройств, излучающих свет (мониторов)! !

Кодирование информации, 10 класс К.Ю. Поляков, Е.А. Ерёмин, Цветовая модель RGB 11 RGBВеб-страница (0, 0, 0) # (255,255,255) #FFFFFF (255, 0, 0) #FF0000 (0, 255, 0) #00FF00 (0, 0, 255) #0000FF (255, 255, 0) #FFFF00 (204,204,204) #CCCCCC (255, 255, 0) #FFFF00

Кодирование информации, 10 класс К.Ю. Поляков, Е.А. Ерёмин, Задачи 12 Постройте шестнадцатеричные коды: RGB (100, 200, 200) RGB (30, 50, 200) RGB (60, 180, 20) RGB (220, 150, 30)

Кодирование информации, 10 класс К.Ю. Поляков, Е.А. Ерёмин, Глубина цвета 13 Сколько памяти нужно для хранения цвета 1 пикселя в режиме True Color? ? R G B: 24 бита = 3 байта R (0..255)256 = 2 8 вариантов 8 битов = 1 байт Глубина цвета это количество битов, используемое для кодирования цвета пикселя. True Color (истинный цвет) Задача. Определите размер файла, в котором закодирован растровый рисунок размером 20×30 пикселей в режиме истинного цвета (True Color)? байта = 1800 байт

Кодирование информации, 10 класс К.Ю. Поляков, Е.А. Ерёмин, Кодирование с палитрой 14 Как уменьшить размер файла? ? уменьшить разрешение уменьшить глубину цвета снижается качество Цветовая палитра – это таблица, в которой каждому цвету, заданному в виде составляющих в модели RGB, сопоставляется числовой код.

Кодирование информации, 10 класс К.Ю. Поляков, Е.А. Ерёмин, Кодирование с палитрой цвет 00 2 цвет 01 2 цвет 10 2 цвет Палитра: Какая глубина цвета? ? Сколько занимает палитра? ? 2 бита на пиксель 3 4 = 12 байтов

Кодирование информации, 10 класс К.Ю. Поляков, Е.А. Ерёмин, Кодирование с палитрой 16 Шаг 1. Выбрать количество цветов: 2, 4, … 256. Шаг 2. Выбрать 256 цветов из палитры: Шаг 3. Составить палитру (каждому цвету – номер ) палитра хранится в начале файла … Шаг 4. Код пикселя = номеру его цвета в палитре …1223

Кодирование информации, 10 класс К.Ю. Поляков, Е.А. Ерёмин, Кодирование с палитрой 17 Файл с палитрой: палитра коды пикселей Количество цветов Размер палитры (байтов) Глубина цвета (битов на пиксель)

Кодирование информации, 10 класс К.Ю. Поляков, Е.А. Ерёмин, Задачи 18 Задача 1. В процессе преобразования растрового графического файла количество цветов уменьшилось с 512 до 8. Во сколько раз уменьшился информационный объем файла? Задача 2. Разрешение экрана монитора – 1024 х 768 точек, глубина цвета – 16 бит. Каков необходимый объем видеопамяти для данного графического режима? Задача 3. Сколько байт будет занимать код рисунка размером 40×50 пикселей в режиме истинного цвета? при кодировании с палитрой 256 цветов? Задача 4. Для хранения растрового изображения размером 128 x 128 пикселей отвели 4 килобайта памяти. Каково максимально возможное число цветов в палитре изображения?

Кодирование информации, 10 класс К.Ю. Поляков, Е.А. Ерёмин, Растровые рисунки: форматы файлов 19 ФорматTrue Color ПалитраПрозрачность Анимация BMP JPG GIF PNG

Кодирование информации, 10 класс К.Ю. Поляков, Е.А. Ерёмин, Кодирование цвета при печати (CMYK) 20 G R B G B G R B Белый – красный = голубойC = Cyan Белый – зелёный = пурпурныйM = Magenta Белый – синий = желтыйY = Yellow Модель CMY CM Y Модель CMYK: + Key color меньший расход краски и лучшее качество для чёрного и серого цветов

Кодирование информации, 10 класс К.Ю. Поляков, Е.А. Ерёмин, RGB и CMYK 21 не все цвета, которые показывает монитор (RGB), можно напечатать (CMYK) при переводе кода цвета из RGB в CMYK цвет искажается видит человек RGB CMYK RGB(0,255,0) CMYK(65,0,100,0) RGB(104,175,35)

Кодирование информации, 10 класс К.Ю. Поляков, Е.А. Ерёмин, Цветовая модель HSB (HSV) 22 HSB = Hue (тон, оттенок) Saturation (насыщенность) Brightness (яркость) или Value (величина) 0 / Тон (H) Насыщенность (S) Яркость (B) насыщенность – добавить белого яркость – добавить чёрного

Кодирование информации, 10 класс К.Ю. Поляков, Е.А. Ерёмин, Цветовая модель Lab 23 Международный стандарт кодирования цвета, независимого от устройства (1976 г.) Основана на модели восприятия цвета человеком. Lab = Lightness (светлота) a, b (задают цветовой тон) Светлота 75%Светлота 25% для перевода между цветовыми моделями: RGB Lab CMYK для цветокоррекции фотографий

Кодирование информации, 10 класс К.Ю. Поляков, Е.А. Ерёмин, Профили устройств 24 RGB(255,0,0) Какой цвет увидим? ? RGB(255,0,0) как 680 нм 680 нм RGB(225,10,20) профиль монитора профиль сканера CMYK(0,100,100,0) профиль принтера

Кодирование информации, 10 класс К.Ю. Поляков, Е.А. Ерёмин, Растровое кодирование: итоги 25 универсальный метод (можно закодировать любое изображение) единственный метод для кодирования и обработки размытых изображений, не имеющих чётких границ (фотографий) есть потеря информации (почему?) при изменении размеров цвет и форма объектов на рисунке искажается размер файла не зависит от сложности рисунка (а от чего зависит?)

Кодирование информации, 10 класс К.Ю. Поляков, Е.А. Ерёмин, Векторное кодирование 26 Рисунки из геометрических фигур: отрезки, ломаные, прямоугольники окружности, эллипсы, дуги сглаженные линии (кривые Безье) Для каждой фигуры в памяти хранятся: размеры и координаты на рисунке цвет и стиль границы цвет и стиль заливки (для замкнутых фигур)

Кодирование информации, 10 класс К.Ю. Поляков, Е.А. Ерёмин, Векторное кодирование 27 Кривые Безье: А Б В Г Д Хранятся координаты узлов и концов «рычагов» (3 точки для каждого узла, кривые 3-го порядка). угловой узел гладкий узел

Кодирование информации, 10 класс К.Ю. Поляков, Е.А. Ерёмин, Векторное кодирование (итоги) 28 лучший способ для хранения чертежей, схем, карт при кодировании нет потери информации при изменении размера нет искажений меньше размер файла, зависит от сложности рисунка неэффективно использовать для фотографий и размытых изображений растровый рисунок векторный рисунок

Кодирование информации, 10 класс К.Ю. Поляков, Е.А. Ерёмин, Векторное кодирование: форматы файлов 29 WMF (Windows Metafile) EMF (Windows Metafile) CDR (программа CorelDraw) AI (программа Adobe Illustrator) SVG (Scalable Vector Graphics, масштабируемые векторные изображения) для веб-страниц

Кодирование информации, 10 класс К.Ю. Поляков, Е.А. Ерёмин, Векторные рисунки: SVG 30 <rect width="135" height="30" x="0" y="10" stroke-width="1" stroke="rgb(0,0,0)" fill="rgb(255,255,255)"/> <rect width="135" height="30" x="0" y="40" stroke-width="1" stroke="rgb(0,0,0)" fill="rgb(0,0,255)"/> <rect width="135" height="30" x="0" y="70" stroke-width="1" stroke="rgb(0,0,0)" fill="rgb(255,0,0)"/> <line x1="0" y1="0" x2="0" y2="150" stroke-width="15" stroke="rgb(0,0,0)" /> <rect width="135" height="30" x="0" y="10" stroke-width="1" stroke="rgb(0,0,0)" fill="rgb(255,255,255)"/> <rect width="135" height="30" x="0" y="40" stroke-width="1" stroke="rgb(0,0,0)" fill="rgb(0,0,255)"/> <rect width="135" height="30" x="0" y="70" stroke-width="1" stroke="rgb(0,0,0)" fill="rgb(255,0,0)"/> <line x1="0" y1="0" x2="0" y2="150" stroke-width="15" stroke="rgb(0,0,0)" /> прямоугольник размеры координаты контур заливка

Кодирование информации, 10 класс К.Ю. Поляков, Е.А. Ерёмин, Конец фильма ПОЛЯКОВ Константин Юрьевич д.т.н., учитель информатики ГБОУ СОШ 163, г. Санкт-Петербург ЕРЕМИН Евгений Александрович к.ф.-м.н., доцент кафедры мультимедийной дидактики и ИТО ПГГПУ, г. Пермь

Кодирование информации, 10 класс К.Ю. Поляков, Е.А. Ерёмин, Источники иллюстраций авторские материалы