TwiddleLab / Код / Как компьютер хранит всё

Пиксели и цвета

Урок 4 из 11 · 7 мин · Бесплатно, без аккаунта

Что ты узнаешь

• Картинка это сетка пикселей, каждый одного цвета.
• Пиксель это три числа, R, G, B, от 0 до 255: по байту на каждое.
• Равные R, G и B дают серый. 256 x 256 x 256 = 16 777 216 цветов.
• Размер без сжатия = ширина x высота x 3 байта.

Начать урок

Как идёт урок

1. Приблизь любое фото как следует. Из чего оно сделано?

   Дотяни увеличение до конца.

2. Пиксель экрана это три крошечные лампы: красная, зелёная и синяя.

   Включай и выключай их. Сколько цветов получится?

3. У каждой лампы яркость от 0 до 255. Смешай оранжевый.

   Двигай три полоски.

4. Пиксели и RGB.

   Пиксель (элемент картинки) это один квадратик картинки. Разрешение это сколько их: 1920 x 1080 это около 2 миллионов.

   RGB: каждый пиксель это три числа, красный, зелёный, синий, от 0 до 255. По байту на каждое, значит, 3 байта на пиксель.

   256 x 256 x 256 = 16 777 216 цветов. 0, 0, 0 это чёрный, 255, 255, 255 белый, равные числа это серые.

5. Нарисуй свой спрайт 8 x 8.

   Выбери цвет, потом нажимай на квадратики или веди по ним. Он пригодится ещё дважды.

6. Подбери цвет: повтори каждый цвет тремя ползунками.

   Четыре цели. Закрепляй, когда кажется, что получилось.

7. Какие из них настоящие серые?

   Перетащи каждый образец в банку. Читай числа.

8. Фильтр-негатив превращает каждое число v в 255 - v. В этом фильтре баги.

   Найди пиксели своего спрайта, которые так и не перевернулись.

9. Фото 1000 x 1000 пикселей. Сколько байт оно занимает без сжатия?

10. Сколько весит твой спрайт как файл?

    Передвинь метку на шкале размеров.

Предыдущий урок: Буквы это числа · Следующий урок: Звук это список чисел · Часть курса: Как компьютер хранит всё

Уроки интерактивные и работают на JavaScript. Включи его, чтобы играть.