요약
유선선은 동작을 통해 Google 어스 위성 이미지를 탐색할 수 있는 실험입니다. 머신러닝, 데이터 최적화 및 그래픽 카드 성능을 조합하여 백엔드 서버를 사용하지 않고도 실험을 휴대전화의 웹브라우저에서 효율적으로 실행할 수 있습니다. 지금까지 개발 프로세스와 최종 결과까지 얻기 위해 시도한 다양한 접근 방식을 살펴보았습니다.
데이터 아트팀이 지구 이미지의 데이터 세트를 탐색하는 방법에 관해 제게 접근했을 때 저는 매우 기뻤습니다. 이미지가 아름다워서 인간이 만들었던 자연적이든 간에 다양한 종류의 구조와 질감을 보여주었고, 이 데이터 세트를 어떻게 연결할지에 대해서도 흥미를 느꼈습니다. 이미지 유사성 및 이미지를 필터링하고 구성하는 여러 가지 방법을 살펴보며 다양한 초기 실험을 진행했습니다.
우리는 계속 이미지의 아름답고 지배적인 선을 다시 보게 되었습니다. 고속도로, 강, 산 가장자리, 토지 등 이 선은 쉽게 찾을 수 있었으며, Google에서는 이를 탐색하기 위한 몇 가지 프로젝트를 설계했습니다. 저는 아티스트로서 선 컬렉션으로 할 수 있는 아름다운 일에서 영감을 받았습니다(예: Cassandra C 존스의 번개 작업 참조). 이 데이터 세트로 작업하게 되어 기뻤습니다.
선 감지
초기의 과제 중 하나는 이미지에서 선을 감지하는 방법이었습니다. 트레이싱 페이퍼를 꺼내서 이러한 사진 중 하나의 인쇄물 위에 던진 다음 눈에 보이는 선을 그리는 것은 쉽지만, 일반적으로 선을 찾기 위한 컴퓨터 비전 알고리즘은 매우 다양한 이미지에서 잘 작동하지 않는 경향이 있습니다.
저는 로컬 프로젝트를 사용하여 프로젝트에 알고리즘을 그려서 이전 버전의 검색을 개발했으며, 이 버전에서는 검색할 선을 주석으로 추가했습니다. 예술작품 위에 그림을 그리는 일은 재미있었지만 수십 개에서 수천 개로 옮겨가는 과정은 지루했습니다. 선을 찾는 과정을 자동화하려고 했습니다.
이 항공 이미지를 사용해 openCv의 캐니 에지 감지 알고리즘과 같은 기존의 선 감지 알고리즘을 시도했지만, 이 알고리즘이 매우 불연속적인 선분을 제공하거나 임계값이 너무 여유롭다면 가짜 선이 많다는 것을 알게 되었습니다. 또한 좋은 결과를 얻기 위한 기준점은 이미지 세트에 따라 다르며, 저는 감독 없이 일관된 양호한 선을 찾기 위한 알고리즘이 필요했습니다.
저는 gPb (PDF)와 같은 최신 라인 감지 알고리즘을 비롯한 다양한 라인 감지 알고리즘을 실험했습니다. 이 알고리즘은 놀라운 결과를 얻었지만 이미지당 실행하는 데 몇 분이 소요되었습니다. 결국 openCV와 함께 제공되는 알고리즘인 구조화된 포레스트 에지 감지를 선택했습니다.
좋은 '선 이미지'를 만들었어도 실제로 선을 가져오고 개별 선을 서로 식별하는 문제가 있었습니다. 즉, 이 래스터 데이터를 어떻게 벡터로 만들어야 할까요? 저는 컴퓨터 비전 문제를 살펴볼 때 종종 과학자와 연구원이 사용하는 오픈소스 자바 기반 이미지 처리 환경인 imageJ를 조사하며, 이 환경은 건강한 플러그인 생태계를 갖추고 있습니다. 저는 능선 감지라는 플러그인을 찾았습니다. 이 플러그인은 강도 이미지를 가져와 선분의 집합으로 변환하는 데 도움이 됩니다. 참고로 Matlab의 이 에지 감지 및 라벨 지정 코드도 유용했습니다.
서버리스
또한 본질적으로 서버리스인 데이터 시각화 앱을 만들 수 있는지 확인하고자 했습니다. 이 앱에서 매칭 및 연결의 힘든 작업이 클라이언트 측에서 발생합니다. 저는 보통 광고 소재 코딩을 위한 C++ 프레임워크인 openFrameworks에서 일하며 node 프로젝트 외에도 서버 측 코딩을 많이 하지 않았습니다. 클라이언트 측에서 모든 계산을 수행할 수 있고 json 및 이미지 데이터를 제공하는 용도로만 서버를 사용할 수 있는지 궁금했습니다.
그리기 애플리케이션의 경우 매칭 작업이 매우 많습니다. 선을 그릴 때는 수만 개가 넘는 선분 중에서 가장 일치하는 선분을 찾아야 합니다. 한 그림에서 다른 그림까지의 거리를 계산하기 위해 여러 거리를 계산하는 달러 동작 인식기의 측정항목을 사용합니다. 예전에는 스레딩 등의 기법을 사용해 왔지만, 클라이언트 기기(휴대전화 포함)에서 실시간으로 작동하게 하려면 더 나은 방법이 필요했습니다. 가장 가까운 이웃과 가장 가까운 이웃을 찾기 위해 측정항목 트리를 살펴보고 전위 포인트 트리를 선택했습니다(자바스크립트 구현). 전망 포인트 트리는 기본적으로 일련의 데이터와 거리 측정항목을 기반으로 작성되며, 새로운 데이터를 입력하면 가장 가까운 값 목록이 매우 빠르게 제공됩니다. 휴대전화에서 이 작업을 처음 봤을 때 당황했습니다. 이 특정 고정 지점 트리 구현의 큰 이점 중 하나는 계산한 후에 트리를 절약할 수 있고 이 트리를 계산하는 데 드는 비용을 절약할 수 있다는 것입니다.
서버 없이 작동하게 하는 또 다른 과제는 데이터를 휴대기기에 로드하는 것입니다. 그리기의 경우 트리 및 선 세그먼트 데이터가 12MB를 넘었고 이미지가 상당히 크기 때문에, 우리는 빠른 속도의 빠른 속도를 원했고 다운로드를 작게 유지하는 것이 목표였습니다. 우리의 솔루션은 점진적으로 데이터를 로드하는 것이었습니다. 그리기 앱에서 고정 포인트 트리 데이터 세트를 5개의 부분으로 분할하고, 앱이 로드될 때는 첫 번째 청크만 로드한 다음 10초마다 백그라운드에서 다른 데이터 청크를 로드하므로 본질적으로 앱은 사용된 후 처음 1분 동안 더 나아집니다. 드래그 앱에서는 이미지를 캐시하여 드래그하는 동안 새 이미지가 백그라운드에서 로드되도록 열심히 작업했습니다.
마지막으로, 두 앱에 모두 프리로더를 만드는 것이 예상보다 어려운 것으로 나타났기 때문에 데이터 로드에 따른 초기 지연은 당연한 일입니다. Jacquard 요청에서 진행률 콜백을 사용했으며, pixi.js 측에서 비동기식으로 로드되는 이미지가 실제로 로드되었는지 확인하고 이를 사용하여 미리 로드 메시지를 구동했습니다.
연결된 회선
드래그의 경우 가장자리 감지에서 찾은 선에서 무한 선을 만들려고 합니다. 첫 번째 단계는 선 감지 알고리즘에서 선을 필터링하고 한쪽 가장자리에서 시작해 세 개의 다른 가장자리 중 하나에서 끝나는 긴 선을 식별하는 것이었습니다.
일단 긴 선을 연결하기 위해 (더 정확하게 말하면 다중선, 즉 연결된 점의 모음) 선을 연결하기 위해 이러한 선을 일련의 각도 변화로 변환했습니다. 일반적으로 다중선은 점 집합으로 상상하며, 점 a는 점 c에 연결된 점 b에 연결됩니다. 대신 선을 일련의 각도 변화로 처리할 수 있습니다. 앞으로 이동하여 어느 정도 회전하거나 앞으로 이동하고 일정량만큼 회전합니다. 이를 시각화하는 좋은 방법은 와이어 조각을 취하고 돌출되면서 회전을 수행하는 와이어 벤딩 머신을 생각해 보는 것입니다. 그림의 모양은 회전에서 비롯됩니다.
선을 점이 아닌 각도 변화로 간주하면 본질적으로 상대 각도 변화를 추가하는 것이 아닌 점을 연결하는 것보다 불연속성이 적은 하나의 큰 선으로 선을 결합하는 것이 더 쉬워집니다. 선을 추가하려면 기본 선의 현재 각도를 취한 다음 추가하려는 선의 상대적 변경사항을 여기에 추가합니다.
참고로 예술적 활용을 위해 선을 여러 각도 변화로 변환하는 이 기법을 사용했습니다. 선을 말리고 펼치는 방법과 유사하게 그림에서 '언컬(uncurl)'을 만들 수 있습니다. 예: 1, 2, 3
이러한 각도 계산으로 드래그할 때 선을 방향을 바꿀 수 있습니다. Google은 기본 각도가 원하는 위치에서 얼마나 벗어나는지 계산하고 선을 올바른 방향으로 향하는 데 가장 도움이 되는 그림을 찾습니다. 상대적으로 생각해 보는 것이 중요합니다.
마지막으로, 이 프로젝트에 참여하는 것이 정말 재미있는 프로젝트였다고 말씀드리고 싶습니다. 아티스트가 이 이미지만큼 귀여운 데이터 세트를 사용하라는 요청을 받는 것은 굉장히 즐거운 일이며 데이터 아트팀에서 연락드렸다니 영광입니다. 즐겁게 실험해 보시기 바랍니다.