1 of 27

Кодування графічних даних

За навчальною програмою 2017 року

Урок 3

8

teach-inf.com.ua

2 of 27

Кодування графічних даних

Розділ 1 § 3

З уроків інформатики в 6 класі ви знаєте, що є два способи кодування графічних даних:

Растровий

Векторний

8

3 of 27

Растрові зображення

Розділ 1 § 3

Пригадаємо, що растровим називають зображення, подане як набір окремих крапок — пікселів (від англ. Рicture Еlement — елемент малюнка).

Піксель є найдрібнішим об’єктом растрового зображення.

8

4 of 27

Растрові зображення

Розділ 1 § 3

Принцип растрового кодування графічних даних легко зрозуміти, якщо відкрити в графічному редакторі фотографію і дуже її збільшити. На рисунку показано пікселі, вишикувані в рядки і стовпці.

Зображення на екрані монітора також має подібну будову, але через малий розмір пікселів ми бачимо суцільне зображення.

8

5 of 27

Растрові зображення

Розділ 1 § 3

Кожен піксель має певний колір, і змінити колір частини пікселя неможливо.

Для кодування зображення числами потрібно:

поділити його на пікселі;

визначити розміри, тобто кількість пікселів у довжину і в ширину;

визначити числовий код кольору кожного пікселя.

8

6 of 27

Растрові зображення

Розділ 1 § 3

Зазвичай кодування зображення числами виконують за допомогою пристроїв, найвідомішими з яких є:

цифровий фотоапарат

сканер

8

7 of 27

Кодування кольору

Розділ 1 § 3

Щоб закодувати двоколірне (наприклад, чорно-біле) зображення, достатньо колір кожного пікселя позначити числом 0 (перший колір) або 1 (другий колір).

Для цього вистачить одного біта, тому кажуть, що двоколірне зображення має глибину кольору 1 біт.

8

8 of 27

Кодування кольору

Розділ 1 § 3

Глибина кольору — це кількість бітів, які використовуються для кодування певного кольору растрового зображення.

8

9 of 27

Кодування кольору

Розділ 1 § 3

Зображення будиночка складається з пікселів восьми кольорів (32 рядки по 35 пікселів у кожному). Для кодування восьми кольорів достатньо десяткових чисел від 0 до 7, які можна подати двійковими послідовностями довжиною 3 біти, адже

2³ = 8. Отже, глибина кольору зображення 3 біти.

8

10 of 27

Кодування кольору

Розділ 1 § 3

Побудуємо таблицю десяткових і двійкових кодів цих кольорів:

Колір	Код	Колір	Код
Чорний	0₁₀ = 000₂	Червоний	4₁₀ = 100₂
Синій	1₁₀ = 001₂	Пурпуровий	5₁₀ = 101₂
Зелений	2₁₀ = 010₂	Жовтий	6₁₀= 110₂
Блакитний	3₁₀ = 011₂	Білий	7₁₀ = 111₂

8

11 of 27

Кодування кольору

Розділ 1 § 3

Закодуємо зображення будиночка послідовністю чисел, зазначивши його ширину й висоту (в пікселях) і коди кольорів пікселів, перелічені зліва направо рядок за рядком:

35 32 7 7 7 7 7 5 5 7 1 1 7 і т. д.

Таким чином, за глибини кольору 3 біти довжина двійкового коду кольорів пікселів цього зображення становитиме:

35x32x3 = 3360 (бітів) або

3360 : 8 = 420 (байтів)

8

12 of 27

Кодування кольору

Розділ 1 § 3

За глибини кольору 8 бітів (або 1 байт) можна закодувати:

2⁸= 256 різних кольорів

а за глибини кольору 16 бітів (або 2 байти):

2¹⁶ = 65 536 кольорів

Проте для досягнення фотографічної якості потрібна більша глибина кольору — 24 біти:

2²⁴ = 16 777 216 кольорів

8

13 of 27

Кодування кольору

Розділ 1 § 3

Зі збільшенням числа кольорів глибина кольору зростає, що за однакової кількості пікселів зображення призводить до збільшення обсягу файлу.

Отже, у файлі растрового зображення зберігаються

розміри зображення

коди кольорів усіх його пікселів

8

14 of 27

Кодування кольору

Розділ 1 § 3

Файли більшості растрових форматів містять також іншу інформацію про зображення:

дані про прозорість пікселів

тип фотокамери

коментарі тощо

8

15 of 27

Розділ 1 § 3

Маючи код растрового зображення, можна скласти програму для виведення його на екран, зобразивши пікселі квадратиками відповідних кольорів:

from tkinter import*

raster = input() # Вводимо рядок із растровим кодом

pic = list(map(int, raster.split()))# Перетворюємо рядок на список чисел

W, H = pic.pop(0), pic.pop(0) # Відокремлюємо ширину W і висоту H

size = 20 # Розмір квадратика-пікселя

root = Tk() # Створюємо полотно необхідного розміру

canvas = Canvas(root, width = size*W, height = size*H)

canvas.pack() # Список кольорів

color = ['black', 'blue', 'green', 'brown', 'red', 'violet', 'yellow', 'white']

for r in range(pic[H]):

for c in range(pic[W]):

canvas.create_rectangle(c*size, r*size,

(c+1)*size, (r+1)*size,

Fill = color[pic[r*pic[*W+]+c+2]])

root.mainloop()

8

16 of 27

Векторні зображення

Розділ 1 § 3

У векторній графіці базовим елементом є лінія.

Пригадаємо, що векторним називають зображення, що складається з графічних примітивів — геометричних об’єктів:

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

відрізків

кіл

кривих тощо

8

17 of 27

Векторні зображення

Розділ 1 § 3

У найпростішому випадку криволінійний контур графічного примітива можна розглядати як ланцюжок відрізків, тобто ламану.

8

18 of 27

Векторні зображення

Розділ 1 § 3

Контур літери К тричі замінили ланцюжком відрізків, щоразу збільшуючи їх кількість на криволінійних ділянках. Як бачимо, зі збільшенням кількості відрізків зростає точність відтворення криволінійного контуру.

початковий контур

15 відрізків

24 відрізки

42 відрізки

8

19 of 27

Векторні зображення

Розділ 1 § 3

Векторним кодом контуру в такому випадку буде послідовність чисел. Перше з них — кількість відрізків N, а наступні 2(N + 1) чисел — координати послідовних вершин ламаної.

Векторний код зображеного контуру з 15 відрізків міститиме 1+2·(15+1)=33 числа і може бути таким:

15 0 0 5 38 14 39 10 25 22 38 28

31 22 27 20 31 12 20 22 19 20 0 12

0 16 17 9 17 5 0 0 0

8

20 of 27

Векторні зображення

Розділ 1 § 3

За такого способу кодування можна послідовно записувати коди кількох контурів. Це не становитиме проблему для розкодування, оскільки кількість чисел у коді одного контуру цілком визначається кількістю відрізків, зазначеною на його початку.

8

21 of 27

Векторні зображення

Розділ 1 § 3

Складемо програму для виведення на полотно зображення, яке задано векторним кодом:

from tkinter import*

vector = input() # Вводимо рядок із векторним кодом

x = list(map(int, vector.split())) # Перетворюємо рядок на список чисел

N = x.pop(0) # Відокремлюємо кількість відрізків у змінну N

y = x[1::2] # Формуємо список координат y

x = x[0::2] # Формуємо список координат x

size = 4 # Масштабний множник

root = Tk() # Створюємо полотно потрібного розміру

canvas = Canvas(root, width = size*max(x), height = size*max(y))

canvas.pack()

for v in range(N): # Будуємо відрізки

canvas.create_line(size*x[v], size*y[v], size*x[v+1], size*y[v+1])

root.mainloop()

8

22 of 27

Векторні зображення

Розділ 1 § 3

Запустивши програму, ми побачимо вікно з виведеним векторним зображенням. Зображення виявилося віддзеркаленим відносно горизонтальної осі, оскільки вісь y на полотні спрямована донизу.

8

23 of 27

Векторні зображення

Розділ 1 § 3

У більшості випадків на практиці застосовуються значно складніші коди. Такі коди дозволяють точно описувати криволінійні ділянки контурів за допомогою кривих Безьє:

колір і тип заповнення,

прозорість та розмиття об’єктів тощо.

8

24 of 27

Питання для самоперевірки

Розділ 1 § 3

Які є способи кодування графічних даних?

Опишіть особливості растрового зображення.

Якою буде довжина двійкового коду зображення розміром 2048 × 1536 пікселів, якщо глибина кольору становить 24 біти?

Фотографія розміром 2048 × 1536 пікселів, збережена у форматі JPG, займає на диску 2,4 Мбайта. Чому цей обсяг значно менший, ніж довжина коду, обчислена в питанні 4?

8

25 of 27

Домашнє завдання

Проаналізувати

§ 3, ст. 14-19

Розділ 1 § 3

8

26 of 27

Працюємо за комп’ютером

Розділ 1 § 3

Сторінка

19

8

27 of 27

Дякую за увагу!

За навчальною програмою 2017 року

Урок 3

8

teach-inf.com.ua