пресловутых RGB. Обработка изображений в Javascript — Цвет… | Шон Маллен
Обработка изображений в Javascript — цветовые модели
Опубликовано в·
5 мин чтения·
18 апреля 2020 г.Это — это вторая часть серии статей, посвященных обработке изображений в Javascript. . В предыдущей части я рассказал, как считывать пиксели изображения, обрабатывать их на графическом процессоре и отображать на холсте. Проверьте это.
- Посмотрите на эту фотографию
Начните редактировать фотографии прямо сейчас с помощью демонстрационного сайта, который я создал.
Вкратце: мы используем GPU.js для распараллеливания наших алгоритмов обработки изображений. А вот код для отображения изображения.
Данные пикселей сохраняются в виде значений интенсивности красного, зеленого и синего цветов. Это характерно для форматов цифровых изображений (таких как PNG и GIF¹) и имеет смысл. Физические пиксели экрана компьютера состоят из крошечных красных, зеленых и синих огней, которые в сочетании друг с другом позволяют нам воспринимать любой цвет в видимом спектре.
Это не единственный способ представления цвета. Он хорошо работает при создании цвета с помощью источников света, таких как светодиоды в мониторе вашего компьютера, но плохо работает с другими средами. Подумайте о том, чтобы покрасить новый забор из штакетника. Вы не станете смешивать красную, зеленую и синюю краску и ожидать, что она будет белой. ТСЖ будет стучать в вашу дверь. По этой причине цветовая модель RGB считается аддитивной моделью . Чем больше добавлено каждого составляющего цвета, тем ярче композиция.
При работе с чернилами, красками и т. д. мы работаем с вычитательной моделью . Вместо того, чтобы использовать свет для создания цвета для нас, у нас будет внешний источник света, проецируемый на нашу среду. Любые пигменты, добавленные в эту среду, поглощают свет и отражают цвет, который вы видите. Стандартной моделью добавления цветов субтрактивным способом является CMYK, что означает голубой — пурпурный — желтый — ключевой.
Ключ — это черный компонент, и он называется так потому, что добавляет детали изображению, по крайней мере, так мне говорит Википедия. Вы можете быть знакомы с ними, потому что они, скорее всего, являются чернилами в картридже вашего цветного принтера.
Давайте посмотрим, как выглядят каналы CMYK по отдельности.
Каналы CMYK: нижний левый = голубой, верхний левый = пурпурный, верхний правый = желтый, нижний правый = ключевойТеперь давайте посмотрим, как каналы CMYK перекрываются для создания изображения с естественными цветами.
Center содержит все каналы CMYK.Как и RGB, мы будем работать со значениями CMYK в диапазоне от 0 до 1. Формула преобразования RGB в CMYK выглядит следующим образом².
ключ = макс.(красный, зеленый, синий)
голубой = (1 - красный - ключ) / (1 - ключ)
пурпурный = (1 - зеленый - ключ) / (1 - ключ)
желтый = (1 - синий - ключ) / (1 - ключ)
И CMYK обратно в RGB
красный = (1 - голубой) * (1 - ключ)
зеленый = (1 - пурпурный) * (1 - ключ)
синий = (1 - желтый) * (1 - ключ)
Определение функций на GPU.
В предыдущем уроке мы создали функции ядра. Они перемещают наши данные на графический процессор для параллельной обработки. Мы также можем написать функции, которые будут работать как обычные функции Javascript, но могут использоваться в наших ядрах на графическом процессоре. GPU.js предоставляет способ сделать это: gpu.addFunction. В качестве аргумента принимает именованную функцию. Мы используем его здесь, чтобы упростить код и сделать более понятным то, что делает ядро.
В этом примере мы добавляем функции rgb2cmyk и cmyk2rgb . В строке 28 значения RGB преобразуются в CMYK. Затем мы можем делать что угодно со значениями CMYK. В строках с 30 по 33 они умножаются на аргумент ядра. В строке 36 наши измененные значения CMYK возвращаются в RGB, чтобы их можно было записать на холст.
Попробуйте это ядро здесь.
HSV, или Hue-Saturation-Value, отличается от RGB и CMYK. В отличие от них, он не основан на смешении цветов.
Вместо этого он был разработан, чтобы более точно соответствовать человеческому восприятию цвета. Цветовая модель HSV часто отображается в виде цилиндра.
Цвет HSV сплошной цилиндр насыщенность серый.png
Взято из Викисклада, бесплатного репозитория медиафайлов
commons.wikimedia.org
По окружности цилиндра расположены полностью насыщенные цвета. Перемещение к центру цилиндра уменьшает насыщенность или интенсивность цвета. Величина — это мера оттенка цвета. Значение 0 всегда черное, а значение 1 не имеет затенения.
Оттенок — это представление цвета как угла поворота. При 0° красный . Когда мы начинаем вращаться вокруг цилиндра, мы достигаем зеленого цвета при 120°. Цвета между 0° и 120° представляют собой линейную интерполяцию между красным и зеленым. Следующие 120° вокруг цилиндра идут от зеленого к синему, а затем обратно от синего к красному на 360°. Мне кажется интересным, что эта линейная интерполяция дает голубой, пурпурный и желтый цвета посередине между чистыми углами красного, зеленого и синего.
Чтобы дать представление о том, как работает изменение оттенка, на следующем рисунке показано, как изображение будет выглядеть при повороте с шагом 90° применяется к каждому пикселю.
Оттенок Поворот: нижний левый = 0°, верхний левый = 90°, верхний правый = 180°, нижний правый = 270°Вот код для перехода между цветовыми моделями HSV и RGB. Преобразование цветовой модели немного сложнее, чем CMYK, но этот код следует той же схеме, что и пример преобразования CMYK.
Поиграйте с этим ядром здесь!
Существует множество других цветовых моделей для изучения. HSL или HSB (Hue — Saturation — Lightness/Brightness) — еще одна распространенная модель, похожая по концепции на HSV.
Footnotes[1] Я собираюсь углубиться в дебаты о произношении GIF просто потому, что мне так хочется. Жирафа.
[2] Формулы, которые я использую, взяты из быстрых таблиц.
Преобразование RGB в массив и обратно, широковещательная рассылка — Новое для Julia
bankiaboy 1
Привет,
Я только что провел пару дней с Джулией — мне очень нравится окружение Pluto, Jupyter и repl. Python вызывал у меня желчь.
У меня есть несколько очень «ранних» вопросов, связанных с идиомами для распаковки и переупаковки одиночных значений RGB . В курсе MIT Introduction to Computational Thinking есть очень раннее упражнение по написанию функции, которая инвертирует значение RGB . Я могу сделать это простым способом, но…
A. Я знаю, как сделать значение RGB таким, как это RGB(-1.0, 0.0, 0.0) , но я не могу понять, как преобразовать массив, содержащий те же значения до одного
v = (-1,0, 0,0, 0,0) v2 = RGB(v) # Я не могу найти примеры
B. Как распаковать значение RGB в массив без использования [c.r, c.g. в.б] ?
Я хотел бы сделать что-то вроде (r,g,b) = c или c. — с сохранением порядка. Мои скобки не в порядке 
asArray
C. Я разочарован, потому что могу транслировать операцию над массивом, но не над RBG value:
с = RGB(-1.0, 0.0, 0.0) v = (к.г, к.г, к.б) v2 = 1 .- v # Работает хорошо # Я не знаю, как вернуться к RGB
Я хотел бы уметь:
c = RGB(-1.0, 0.0, 0.0) с2 = 1 -. с
Я попытался просмотреть cmap , но не было примеров, достаточно простых для интерпретации на моем уровне.
Ура…
стиллислалом 2
Чтобы распаковать кортеж или массив в значение RGB, вы можете использовать оператор splat следующим образом:
julia> v2 = RGB(v...)
RGB{Float64}(-1.0,0.0,0.0)
Я думаю, вам нужен mapc , а не cmap .