Лекція 5. Як комп’ютер бачить картинки

Лекція 5. Як комп’ютер бачить картинки

Рівень 1: Мисливець за даними

Марко, сьогодні ми не просто вивчимо новий термін — ми відкриємо ще один шар того, як насправді працює комп’ютер.

Що ми сьогодні розкриємо

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

Зв’язок з попередніми лекціями

У цій лекції ми використаємо знання про байти з лекції 4, щоб зрозуміти, чому навіть маленька картинка складається з великої кількості даних.

Картинка як мозаїка

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

Наприклад, картинка 800×600 має 480 000 пікселів. Уже майже пів мільйона маленьких кольорових «цеглинок».

graph LR
    subgraph "Зображення 4×4"
        P1["🟦"] 
        P2["🟦"]
        P3["🟥"]
        P4["🟥"]
        P5["🟦"]
        P6["🟦"]
        P7["🟥"]
        P8["🟥"]
        P9["🟩"]
        P10["🟩"]
        P11["🟨"]
        P12["🟨"]
        P13["🟩"]
        P14["🟩"]
        P15["🟨"]
        P16["🟨"]
    end

    P1 -->|"R=0 G=0 B=255"| C1["Кожен піксель = 3 числа RGB"]
    P3 -->|"R=255 G=0 B=0"| C1

    C1 -->|"× кількість пікселів"| C2["Весь файл = цифри + правила"]

    style C1 fill:#fff3e0
    style C2 fill:#e8f5e9

RGB — колір як три числа

Екран часто створює колір, змішуючи Red, Green і Blue. Простий варіант запису використовує для кожного каналу числа від 0 до 255.

(255, 0, 0)   червоний
(0, 255, 0)   зелений
(0, 0, 255)   синій
(255,255,255) білий
(0,0,0)       чорний

255 тут не випадкове: один байт має 256 можливих значень — від 0 до 255.

graph TD
    A["Піксель: R=255, G=255, B=0"] --> B["Змішуємо червоний + зелений"]
    B --> C["Результат: жовтий 🟨"]
    D["Піксель: R=0, G=0, B=0"] --> E["Жоден канал не увімкнений"]
    E --> F["Результат: чорний ⬛"]
    G["Піксель: R=255, G=255, B=255"] --> H["Всі канали на максимумі"]
    H --> I["Результат: білий ⬜"]

    style A fill:#fff9c4
    style C fill:#fff9c4
    style D fill:#212121,color:#fff
    style F fill:#212121,color:#fff
    style G fill:#fafafa
    style I fill:#fafafa

Роздільна здатність і розмір даних

Чим більше пікселів, тим більше даних треба зберегти. Якщо дуже грубо уявити RGB-картинку без стиснення як 3 байти на піксель, то 1920×1080 потребує понад 6 мільйонів байтів лише для кольорів одного кадру.

Реальні формати PNG і JPEG використовують додаткові правила та стиснення, тому розмір файлу не дорівнює просто ширина × висота × 3. Але така оцінка добре показує масштаб.

Приклади

Приклад 1

Піксель (255, 255, 0) має максимум червоного й зеленого та нуль синього — виходить жовтий.

Приклад 2

Картинка 10×10 — це лише 100 пікселів. Її можна буквально уявити як маленьку таблицю чисел.

Приклад 3

Зображення 4000×3000 має 12 000 000 пікселів — тому фотографія з камери містить дуже багато початкових даних.

Python-лабораторія: створюємо PPM-картинку без бібліотек

Формат PPM дуже простий і чудово підходить для експерименту. Створи pixel_art.py:

width = 4
height = 4

pixels = [
    [(255,0,0), (255,0,0), (0,0,255), (0,0,255)],
    [(255,0,0), (255,0,0), (0,0,255), (0,0,255)],
    [(0,255,0), (0,255,0), (255,255,0), (255,255,0)],
    [(0,255,0), (0,255,0), (255,255,0), (255,255,0)],
]

with open("pixels.ppm", "w") as f:
    f.write("P3
")
    f.write(f"{width} {height}
")
    f.write("255
")
    for row in pixels:
        for r, g, b in row:
            f.write(f"{r} {g} {b} ")
        f.write("
")

Відкрий pixels.ppm у програмі перегляду зображень. Ти власноруч створив картинку просто числами.

Місія для Марка

Виконай місію по черзі. Якщо щось не виходить — спочатку перечитай приклад вище й спробуй знайти, на якому кроці результат відрізняється.

1. запусти pixel_art.py і відкрий результат
2. зміни один синій піксель на білий (255,255,255)
3. створи власний візерунок 4×4 хоча б із трьох кольорів
4. порахуй кількість пікселів у зображеннях 100×100 та 1920×1080
5. поясни, чому число 255 часто зустрічається у RGB

Перевір себе

• Що таке піксель?
• Що означають три числа RGB?
• Скільки пікселів у картинці 20×30?
• Чому більша роздільна здатність зазвичай означає більше даних?
• Чи дорівнює розмір JPEG-файлу просто кількості пікселів × 3?

Терміни однією фразою

• Піксель — найменша кольорова «цеглинка» зображення.
• Растрове зображення — картинка як прямокутна сітка пікселів.
• RGB — спосіб записати колір трьома числами: Red (червоний), Green (зелений), Blue (синій).
• Роздільна здатність — скільки пікселів у ширину й висоту (наприклад 800×600).
• Канал кольору — одна з трьох частин RGB, кожна від 0 до 255.
• PPM — простий текстовий формат картинки, який легко створити в Python.

Чек-лист перед наступною лекцією

• Чи можеш ти пояснити, що таке піксель та RGB-колір?
• Чи знаєш ти, що таке роздільна здатність зображення?
• Чи розумієш ти формат PPM та як у ньому зберігаються пікселі?

Що потрібно винести з лекції

• растрове зображення — це сітка пікселів
• колір пікселя можна представити числами, наприклад RGB
• розмір і якість зображення пов’язані з кількістю пікселів та способом кодування

---

Хакерський принцип: не запам’ятовуй магічні слова. Намагайся пояснити своїми словами, що відбулося і чому.