C04 · От света к пикселю
Пиксели, массивы и прозрачность
У массива есть координаты, каналы, числовой тип и смысл значений. Цветные квадраты — только способ показа.
Если нужны основы
Теория
Где число и что оно значит
x — столбец, y — строка. В интерфейсе считаем с 1, в программе — с 0. У RGB три канала, у скалярной карты один. Номер канала нельзя путать с координатой. В строковом хранении сначала идут каналы одной клетки, затем следующий столбец.
Маска обозначает принадлежность, метка — идентификатор области, производная может быть отрицательной. Одинаковое число 1 имеет разный смысл. Цветовая шкала и тема сайта не должны менять числовой массив.
Что хранится в ячейке?
Переключайте каналы, среднее кодов и маску. Координаты совпадают, а смысл чисел меняется.
Точные значения — в разборе точки
RGB; диапазон показа 0…1
Точные значения — в разборе точки
Серая шкала 0…1: от чёрного к белому.
Разобрать выбранную точку
Что показывает график
RGB содержит три числа в точке, скалярная карта — одно. Маска 0/1 обозначает принадлежность, не цвет материала.
Параметры и подробности
Изображение хранится как строки × столбцы × каналы. RGB-плоскость содержит измерения или коды; маска содержит принадлежность. Прямоугольная маска задана вручную, а не найдена по цветам. Среднее R,G,B здесь — арифметическая иллюстрация, не физическая яркость. Номера координат в интерфейсе начинаются с 1.
Выбери точку на изображении. Стрелки перемещают её; Home и End — к краям строки. Просмотр не изменяет вычисление.
Для изменения примера нужен JavaScript и Canvas. Рассчитанные изображения доступны выше.
Соседство — тоже соглашение
Четыре соседа делят сторону, восемь включают диагонали. Фигуры, касающиеся углом, соединены при 8-связности и раздельны при 4-связности. Это важно для заливки и измерения объектов. Манхэттенское расстояние считает горизонтальные и вертикальные шаги, евклидово — длину прямой.
Две фигуры или одна?
Нажмите на белую клетку слева. Включите переход через угол: проверьте, достигнет ли заливка второй фигуры. Верните четыре соседа — изменятся правила пути, а исходные клетки останутся прежними.
Точные значения — в разборе точки
Серая шкала 0…1: от чёрного к белому.
Точные значения — в разборе точки
Серая шкала 0…1: от чёрного к белому.
Разобрать выбранную точку
Что показывает график
При касании углом 4-связность оставляет две области, 8-связность соединяет их. Оба результата верны для разных явно заданных правил.
- Достижимо клеток
- 9
Параметры и подробности
Нажмите на белую клетку слева: заливка начинается от неё. При четырёх соседях можно переходить только через сторону; при восьми — ещё и через угол. Нажатие на чёрный фон даёт пустую область.
Выбери точку на изображении. Стрелки перемещают её; Home и End — к краям строки. Просмотр не изменяет вычисление.
Для изменения примера нужен JavaScript и Canvas. Рассчитанные изображения доступны выше.
Невидимый цвет не должен протечь
α — покрытие: 0 не даёт вклада, 1 непрозрачно. В прямой записи RGB отдельно от α; в предумноженной хранят α·RGB. Полностью прозрачная клетка тогда вносит нулевой цветовой вклад при усреднении.
У прозрачных клеток примера спрятан синий, у фигуры — красный. Усреднение прямого RGB создаёт синюю кайму. Оба режима считают в линейном свете, чтобы не смешивать ошибку α с ошибкой цветового кодирования. Отдельно усредняют α и α·RGB, затем добавляют фон·(1−α).
Здесь «усреднить» означает взять горизонтальный ряд соседей, сложить их вклады и разделить на длину ряда. На синем канале выберите клетку у края красной фигуры: в правильном режиме невидимые синие значения получают вес 0. Остаётся только синяя составляющая видимой подложки. Полный общий механизм фильтров разберём отдельно.
Синяя кайма у красной фигуры
Прозрачные клетки содержат невидимый синий RGB. Переключите способ фильтрации и подложку; следите за краем.
Точные значения — в разборе точки
RGB линейный → sRGB; диапазон показа 0…1
- Добавить непокрытую подложку
Точные значения — в разборе точки
RGB линейный → sRGB; диапазон показа 0…1
Разобрать выбранную точку
Что показывает график
Вместе фильтруют α·RGB и α. Невидимый цвет не должен просачиваться в результат.
Параметры и подробности
Во всех вычислениях цвет — линейный свет. У полностью прозрачных пикселей условно записан синий RGB. Ошибка: усреднить прямой RGB и затем умножить на среднюю α. Верно: усреднить α·RGB и α отдельно, затем добавить фон·(1−α). Так цвет невидимых пикселей не даёт синюю кайму.
Выбери точку на изображении. Стрелки перемещают её; Home и End — к краям строки. Просмотр не изменяет вычисление.
Для изменения примера нужен JavaScript и Canvas. Рассчитанные изображения доступны выше.
Показ и хранение различаются
Фильтр может дать −0,2 или 1,4. Float-массив сохраняет эти значения; ограничен экран, а не математическая модель. Диапазон отображения подписывается, инспектор сохраняет числа. Преобразование в обычный 8-битный RGB требует явных кодирования, округления и ограничения.
Практика
Проверь идею на другом условии. Следуй задаче над изображениями; разбор точки поможет объяснить результат. Эта практика не оценивается.
Убрать синюю кайму
Создайте заметную синюю кайму неправильной фильтрацией, затем уберите её без смены цветов. Проверьте край на тёмной и светлой подложках.
Точные значения — в разборе точки
RGB линейный → sRGB; диапазон показа 0…1
- Добавить непокрытую подложку
Точные значения — в разборе точки
RGB линейный → sRGB; диапазон показа 0…1
Разобрать выбранную точку
Что показывает график
Вместе фильтруют α·RGB и α. Невидимый цвет не должен просачиваться в результат.
Параметры и подробности
Во всех вычислениях цвет — линейный свет. У полностью прозрачных пикселей условно записан синий RGB. Ошибка: усреднить прямой RGB и затем умножить на среднюю α. Верно: усреднить α·RGB и α отдельно, затем добавить фон·(1−α). Так цвет невидимых пикселей не даёт синюю кайму.
Выбери точку на изображении. Стрелки перемещают её; Home и End — к краям строки. Просмотр не изменяет вычисление.
Для изменения примера нужен JavaScript и Canvas. Рассчитанные изображения доступны выше.
Игры
Убрать синюю кайму
Какой способ смешивания оставляет такой край?
Точные значения — в разборе точки
RGB линейный → sRGB; диапазон показа 0…1
- Добавить непокрытую подложку
Точные значения — в разборе точки
RGB линейный → sRGB; диапазон показа 0…1
Точные значения — в разборе точки
RGB линейный → sRGB; диапазон показа 0…1
Сравни результат с образцом.
Разобрать выбранную точку
Что показывает график
Вместе фильтруют α·RGB и α. Невидимый цвет не должен просачиваться в результат.
Параметры и подробности
Во всех вычислениях цвет — линейный свет. У полностью прозрачных пикселей условно записан синий RGB. Ошибка: усреднить прямой RGB и затем умножить на среднюю α. Верно: усреднить α·RGB и α отдельно, затем добавить фон·(1−α). Так цвет невидимых пикселей не даёт синюю кайму.
Выбери точку на изображении. Стрелки перемещают её; Home и End — к краям строки. Просмотр не изменяет вычисление.
Для изменения примера нужен JavaScript и Canvas. Рассчитанные изображения доступны выше.
Проверь объяснение
Вопрос 1 из 5
Квадраты касаются углом. Почему заливка достигает второго лишь при 8 соседях?
Точные значения — в разборе точки
Серая шкала 0…1: от чёрного к белому.
Точные значения — в разборе точки
Серая шкала 0…1: от чёрного к белому.
Точные значения — в разборе точки
RGB линейный → sRGB; диапазон показа 0…1
Точные значения — в разборе точки
RGB линейный → sRGB; диапазон показа 0…1
Выбери один ответ. Он проверится сразу.
Ограничения и материалы
Границы этого примера
α показана отдельной картой; это не редактор слоёв. Численная композиция не зависит от CSS-фильтров или темы.