Реализовать алгоритм SLIC для создания рисунков пикселей

предисловие

Пиксельный ветер впервые появился в 8-битных видеоиграх.Из-за размера компьютерной памяти и одного цвета дисплея для представления контента можно использовать лишь небольшое количество пикселей, но многие классические пиксельные игры были созданы. С увеличением объема памяти и разрешения экрана ограничение памяти и средств отображения больше не является проблемой, и пиксельный ветер постепенно превратился в уникальный творческий стиль.

Общий процесс рисования пиксельной раскраски включает рисование линий, раскрашивание и т. д., а рисование пиксель за пикселем занимает много времени. Некоторые популярные художественные методы, такие как рисование линий и рисование, постепенно превратились в методы автоматической или полуавтоматической генерации. Эта статья будет реализована с нуляSLIC[1] и реализовать инструмент для создания рисунков пикселей.

Что такое алгоритм SLIC

Причина, по которой отрисовка пикселей не является простой, заключается в том, что прямое понижение дискретизации не может точно захватить ключевые пиксели, и легко потерять информацию о границах, а сгенерированная окраска пикселей часто неудовлетворительна. Ручное подключение и раскрашивание — все, чтобы выбрать соответствующие пиксели. Отсюда наша проблема заключается в том, как выбрать подходящие пиксели для окраски.

Во-первых, введем понятие — суперпиксель. Суперпиксель — это технология сегментации изображения, предложенная и разработанная Сяофэном Реном в 2003 году, которая относится к блокам пикселей неправильной формы с определенной визуальной значимостью, состоящим из соседних пикселей со сходной текстурой, цветом, яркостью и другими характеристиками [1].

Разделив изображение на суперпиксели, можно получить похожие кластеры пикселей, и подобные пиксели будут заполнены одним и тем же цветом, и результирующая покраска пикселей будет более разумной.

Методы сегментации суперпикселей включают извлечение контуров, кластеризацию, градиентное восхождение и так далее. бумага[1]ПредложенныйSLICАлгоритм сегментации суперпикселей (простая линейная итеративная кластеризация,simple linear iterative clustering) является одним из них, основанным наK-meansАлгоритм кластеризации в соответствии с характеристиками цвета и расстояния пикселей для достижения хороших результатов сегментации по сравнению с несколькими алгоритмами сегментации суперпикселей,SLICОн имеет преимущества простого и гибкого, хорошего эффекта и высокой скорости обработки. SLIC

Как реализовать алгоритм SLIC

SLICОсновной процесс выглядит следующим образом:

Предварительная обработка изображения.

преобразовать изображение изRGBПреобразование цветового пространства вCIE-Labцветовое пространство,LabЦветовое пространство больше соответствует зрительному восприятию цвета человеком. Расстояние в этом пространстве может отражать разницу в цвете, ощущаемую людьми, и соответствующий расчет будет более точным.

LabЦветовое пространство также имеет три канала, которыеl,a,b,вlПредставляет яркость, диапазон значений[0,100],aпредставляет компоненты от зеленого до красного в диапазоне[-128,127],bПредставляет компоненты от синего до желтого в диапазоне[-128,127].

RGBиLABНе существует формулы прямого преобразования междуRGBПреобразовать вXYZПреобразование цветового пространства вLAB, см. полный код в конце текста.
Инициализировать кластерные центры.

Количество суперпикселей определяется по параметрам, то есть на сколько областей нужно разделить. Предположим, что изображение имеетNпикселей, которые, как ожидается, будут разделены наKсуперпикселей, каждый размеромN/K, расстояние между соседними центрами равноS=Sqr(N/K),получитьKкоординаты кластера.
Оптимизируйте начальные центры кластеров. в центре кластера3*3По соседству пиксель с наименьшим градиентом выбирается в качестве нового центра кластера.

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

Вычисление градиента дискретных градиентов здесь подробно не выводится.Поскольку он содержит несколько квадратов и квадратных корней, объем вычислений велик, и он обычно упрощается до операции аппроксимации квадратного и квадратного корня с абсолютными значениями. Упрощенные расчетные координаты(i,j)Формула градиента точки пикселя:

в（i+1,j）и（i,j+1）координаты точки справа от пикселя и точки под пикселем.l(a,b)за（a，b）значение канала яркости пикселя в координатахl.
Вычислите расстояние между точкой пикселя и центром кластера.

В районе центра скопления расстояние S2S*2SВычислите расстояние между точкой пикселя и центром каждого кластера в окрестности .

Расстояние здесь евклидово расстояние, общее расстояниеDЗависит отdcцветовое расстояние иdsКосмическая дистанция состоит из двух частей. Формула выглядит следующим образом:

Если напрямуюl,a,b,x,yОбъединение в вектор для расчета расстояния при изменении размера суперпикселя,x,yЗначение может быть очень большим, например, если график1000*1000, пространственное расстояние может достигать1000*Sqr(2), а цветовое расстояние не более10*Sqr(2), в результате чего получается окончательное вычисленное значение расстояния, пространственное расстояниеdsВес слишком большой.

Поэтому его нужно нормализовать и разделить на максимальное значение, то есть начальную ширину точки суперпикселя.S, который сопоставляет значение с[0,1].

И расстояние цветового пространства также даст фиксированное значениеmнастроить вес влияния цветового расстояния и пространственного расстояния,mДиапазон значений[1,40].

Формула расстояния становится

когдаmЧем больше цветовое пространство разделено наmЧем меньше значение, тем больше вес пространственного расстояния, тем более правильными будут сгенерированные пиксели.mЧем он меньше, тем больше вес цветового расстояния, тем компактнее будет суперпиксель по краям и тем более неправильная форма и размер.
Классификация пикселей.

Категория каждого пикселя помечается как категория с наименьшим расстоянием от центра его кластера.
Пересчитать центры кластеров.

Вычислите среднее векторное значение всех пикселей, принадлежащих одному и тому же кластеру, и снова получите центр кластера.
повторять4～6процесс.

Пока расстояние между старым центром кластера и новым центром кластера не станет меньше определенного порога или не достигнет определенного числа итераций, вообще говоря, когда число итераций достигнет10, алгоритм может достичь сходимости.
Кластерная оптимизация.

В конце итерации могут быть изолированные пиксели, не принадлежащие к тому же связанному домену, что и центр кластера, и алгоритм связности можно использовать для их присвоения ближайшей метке кластера.

Конкретный алгоритм реализации в статье не приводится. Сценарий применения этой статьи заключается в создании пиксельных рисунков, при этом пиксели будут подвергаться субдискретизации и не будут уточняться для каждого пикселя, поэтому в этой статье не проводится оптимизация кластеризации.

Подводя итог, процесс алгоритма SLIC примерно такой же, какK-meansСогласован, итеративно вычисляет кластер с наименьшим расстоянием, разница в том, что только для центра кластераSВычисление выполняется в пикселях на расстоянии, что сокращает количество вычислений.

Создание пиксельной графики

на основеSLICалгоритм, мы уже можем разделить граф наNсуперпиксели. Пиксели в каждом суперпикселе похожи. То есть каждый пиксель классифицируется как суперпиксель с центром кластера. Затем назначьте цвет пикселя цвету его центра кластера, чтобы получить желаемый эффект.

Установите определенный размер шагаstride,использоватьCanvas, каждыйstrideКаждому пикселю присваивается цвет его центра кластера, то есть получается окончательный результат пикселизации.

И все субъективные ощущения от рисования пикселей непостоянны, чтобы предоставить пользователям больше выбора и получить удовлетворительные результаты. Могут быть раскрыты дополнительные параметры ручного вмешательства, такие как отмена условия завершения оптимизации кластеризации и установка количества итераций пользователем, а также размер шага конечного значения пикселя. Параметры, устанавливаемые вручную, включают

Супер размер пикселяblocksize;blocksizeЧем меньше значение, тем тоньше сегментация суперпикселя.
количество итерацийiters;itersЧем больше значение, тем точнее результат сегментации и больше время расчета.
веса цветового пространстваweight;weightЧем больше значение, тем больше влияние цвета на результат сегментации.
Возьмите размер шага в пикселяхstride;strideЧем меньше значение, тем ближе сгенерированное растровое изображение к суперпикселю и тем оно тоньше.

Реализовать пользовательский интерфейс

Как инструмент, он, естественно, нуждается в пользовательском интерфейсе, а внешний интерфейс основан наHTML/Javascript/CSSпостроить, использоватьCanvas APIрисует содержимое изображения, пока панель взаимодействия с пользователем выбираетdat.gui[3] Библиотеки.dat.guiЭто легкая библиотека графического интерфейса, которая очень удобна для изменения параметров и часто используется в качестве демонстрации визуального демо. Поддерживаемые типы параметров включаютNumber,String,Boolean, пользовательские функции и т. д. Соответствующие ответные события могут быть привязаны к различным свойствам, и события автоматически запускаются при изменении значения свойства.

Добавьте следующие свойства и события для инструмента «Создать пикселизацию»:

когдаiters、stride、blockSize、weight(вес цветового пространства m) повторить при изменении параметраSLICАлгоритм расчета и перерисовка результата расчета;
Добавить кUpload imageиExport imageкнопка, которая позволяет пользователям загружать изображения и загружать пиксельные изображения;

рисование изображенияCanvasналожение слоя на слой холстаCanvasХолст, чтобы визуализировать результаты алгоритма, добавляя следующие функции

gridПереключатель определяет, следует ли рисовать пиксельную сетку;
CentersПереключатель управляет отображением центра кластера;
ContoursПереключатель управляет отображением контура края кластера;

где центральная точка кластераCentersРозыгрыш напрямую используетctx.fillRectПросто введите координаты центральной точки.

контур суперпикселяContoursДля рисования необходимо сначала рассчитать точки контура.

может сравнить каждый пиксель с окружающим8Если количество пикселей с разными центрами кластеров больше, чем2, значит вокруг данного пикселя более двух точек разных категорий, то эта точка является контуром. Эффект следующий:

Наконец, вы получаете простой инструмент для создания пиксельной графики.

Адрес опыта

Адрес кода полной версии (версия JS)

использованная литература

[1] Ачанта Р., Шаджи А., Смит К., Луччи А., Фуа П., Сусстранк С. Суперпиксели SLIC, Технический отчет, IVRG CVLAB, 2010.

[2] Gerstner T , Decarlo D , Alexa M , et al. Pixelated image abstraction with integrated user constraints[J]. Computers & graphics, 2013.

[3] GitHub.com/data arts/big…