Наземные линии

Краткое содержание

Land Lines — это эксперимент, который позволяет вам исследовать спутниковые изображения Google Earth с помощью жестов. Благодаря сочетанию машинного обучения, оптимизации данных и мощности видеокарты эксперимент может эффективно проводиться в веб-браузере вашего телефона без необходимости использования внутренних серверов. Это взгляд на наш процесс разработки и различные подходы, которые мы пробовали, ведущие к конечному результату.

https://g.co/LandLines

Когда команда Data Arts обратилась ко мне с предложением изучить набор данных изображений Земли, я был очень взволнован — изображения были прекрасны, раскрывая самые разные структуры и текстуры, как созданные человеком, так и природные, и я был заинтригован тем, как соединить эти данные. набор. Я провел множество первоначальных экспериментов, изучая сходство изображений и различные способы их фильтрации и организации.

макет сходства t-sne
макет подобия t-sne, высокое разрешение 50 мб

Как группа, мы продолжали возвращаться к красивым и доминирующим линиям изображений. Эти линии было легко обнаружить — шоссе, реки, края гор и участки земли — и мы разработали несколько проектов, чтобы исследовать их. Как художника меня вдохновили прекрасные вещи, которые можно делать с коллекциями линий (см., например , работу Кассандры Джонс с молниями ), и мне было очень интересно работать с этим набором данных.

Обнаружение линии

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

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

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

Я экспериментировал с различными алгоритмами обнаружения линий, включая последние, такие как gPb (PDF) , которые, хотя и давали потрясающие результаты, требовали нескольких минут для запуска каждого изображения. В конце концов я остановился на обнаружении границ структурированного леса — алгоритме, который поставляется с openCV .

Когда у меня было хорошее «линейное изображение», у меня все еще была проблема с получением линий и идентификацией отдельных линий друг от друга, т. е. как мне взять эти растровые данные и сделать их векторными. Часто, когда я занимаюсь проблемами компьютерного зрения, я исследую imageJ , среду обработки изображений на основе Java с открытым исходным кодом, используемую учеными и исследователями и имеющую здоровую экосистему плагинов . Я нашел плагин под названием «Обнаружение гребней» , который помогает получить изображение интенсивности и превратить его в набор сегментов линий. (Кстати, я также нашел этот код обнаружения и маркировки краев из Matlab полезным).

Изображение с обнаруженными сегментами линий
Изображение с обнаруженными сегментами линий

Бессерверный

Я также хотел посмотреть, возможно ли создать приложение для визуализации данных, которое по существу является бессерверным, где тяжелая работа по сопоставлению и подключению выполняется на стороне клиента. Обычно я работаю в openFrameworks , фреймворке C++ для творческого кодирования, и, за исключением редких узловых проектов, я не особо занимался кодированием на стороне сервера. Мне было любопытно, можно ли выполнять все вычисления на стороне клиента и использовать сервер только для обслуживания данных json и изображений.

Для приложения Draw сопоставление — очень тяжелая операция. Когда вы рисуете линию, нам нужно найти наиболее близкое совпадение среди более чем десятков тысяч сегментов линии. Чтобы вычислить расстояние одного рисунка до другого, мы используем метрику из распознавателя долларовых жестов , которая сама по себе включает в себя множество вычислений расстояния. Раньше я использовал многопоточность и другие приемы, но для того, чтобы заставить их работать в реальном времени на клиентском устройстве (включая мобильные телефоны), мне нужно было что-то получше. Я изучил деревья метрик для поиска ближайших/ближайших соседей и остановился на деревьях точек обзора ( реализация JavaScript ). Дерево точек обзора в основном строится на основе набора данных и метрики расстояния, и когда вы вводите новый фрагмент данных, оно довольно быстро дает вам список ближайших значений. Когда я впервые увидел эту работу на мобильном телефоне, я был в шоке. Одним из больших преимуществ этой конкретной реализации дерева точек обзора является то, что вы можете сохранить дерево после его вычисления и сэкономить на затратах на его вычисление.

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

Еще одна проблема, связанная с тем, чтобы заставить его работать без сервера, — это загрузка данных на мобильное устройство. Для рисования данные дерева и сегментов линий составляли более 12 МБ, а изображения были довольно большими, мы хотели, чтобы процесс был быстрым и отзывчивым, и цель это было стараться, чтобы загрузка была небольшой. Наше решение заключалось в постепенной загрузке данных. В приложении рисования мы разделяем набор данных дерева точек обзора на 5 частей, и когда приложение загружается, оно загружает только первый фрагмент, а затем каждые 10 секунд загружает еще один фрагмент данных в фоновом режиме, так что, по сути, приложение становится все лучше и лучше для первая минута использования. В приложении перетаскивания также было тщательно проработано кэширование изображений, чтобы при перетаскивании новые изображения загружались в фоновом режиме.

Наконец, одна вещь, которую я нашел сложнее, чем ожидалось, — это создание предварительного загрузчика для обоих приложений, поэтому первоначальная задержка при загрузке данных будет понятна. Я использовал обратный вызов прогресса для запросов ajax и на стороне pixi.js, проверял, что изображения, которые загружались асинхронно, действительно загрузились, и использовал это для управления сообщением предварительной загрузки.

Подключенная линия

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

Хорошие линии для подключения отмечены краснымХорошие линии для подключения отмечены красным
Хорошие линии для подключения отмечены красным

Когда у меня был набор длинных линий (или, если использовать более точный термин, полилинии , набор соединенных точек), чтобы соединить их, я преобразовал эти линии в набор изменений угла. Обычно, когда вы думаете о ломаной линии, вы представляете ее как набор точек: точка a соединена с точкой b, которая соединена с точкой c. Вместо этого вы можете рассматривать линию как набор изменений угла: двигаться вперед и поворачивать на некоторое расстояние, двигаться вперед и поворачивать на некоторое расстояние. Хороший способ представить это — подумать о машинах для гибки проволоки , которые берут кусок проволоки и во время его выдавливания выполняют вращения. Форма рисунка получается в результате токарной обработки.

Если вы рассматриваете линию как изменение угла, а не точки, становится проще объединить линии в одну большую линию с меньшим количеством разрывов - вместо сшивания точек вы, по сути, добавляете относительные изменения угла. Чтобы добавить линию, вы берете текущий угол основной линии aimage0 и добавляете к нему относительные изменения линии, которую хотите добавить.

В качестве примечания: я использовал эту технику преобразования линии в набор изменений угла для художественной эксплуатации — вы можете заставить рисунки «разворачиваться» аналогично тому, как проволока может скручиваться и разворачиваться. Несколько примеров: раз , два , три.

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

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