Chromaweaver - Richard Young

Overview

Chromaweaver is a proof of concept that leverages image processing libraries for the purpose of generating, storing, and interacting with movie barcodes. Currently, it provides researchers a quick visual overlook of video content and allows for comparisons between videos.

I created Chromaweaver to fulfill my M.S. in Information Science capstone project requirement at UA Little Rock. A full breakdown of this project can be found on my web-based journal.

Challenges

Providing tools for YouTube video comparisons
Generating movie barcodes — this technique is relatively new and development must be compatible with YouTubeTracker
Optimizing generated movie barcodes for an interactive user interface

Approach

This collection of work illustrates Chromaweaver’s project milestones specific to UI/UX.

Step 1: Ideation

What I find interesting about movie barcodes is that hours of video content can quickly be “digested” by a user in a single glance. The image below, a movie barcode, is a depiction of every frame from the movie The Lord of the Rings: The Fellowship of the Ring.

“Fellowship of the Ring “movie barcode”, a slice of every single frame from the movie.” by iBaconized

Applying movie barcodes to my research with COSMOS, I pitched a UI concept, shown in the image below, which would allow users to navigate video progression by selecting points of interest on the movie barcode.

A Youtube video screenshot with a moviebarcode navigation box underneath — UI concept featuring work from pyimagesearch

While researching movie barcode generation techniques, I experimented with statistically comparing the movie barcodes to provide a numerical metric for video analyses. In the image below, I perform a histogram analysis to detect similarities between the selected movie barcodes.

Histogram output of 5 moviebarcodes with titles of associated videos — Movie barcode Correlation Result Output generated with Python and OpenCV

Step 2: Design

Next, I created static mock-ups and conceptualized features using Affinity Designer. The mockup below displays Chromaweaver’s main functionality, movie barcode generation.

Moviebarcode generation mockup created in Affinity Designer — Movie barcode generation mockup created in Affinity Designer

This second mockup shows the main page again with the addition of a search field, sorting method, and hover interaction for selection.

Search functionality mockup with hover interaction created in Affinity Designer

In this last mockup I present the detail view of a selected movie barcode and it’s associated video.

Detail view mockup created in Affinity Designer

Step 3: Implementation

I implemented my mockups using HTML, CSS, and Django. As seen below, I provide a Youtube video ID to begin the generation process, and if the generation is successful, the user is redirected to the detail view.

Animation of generating a moviebarcode with Chromaweaver — Generating a movie barcode with Chromaweaver

This second GIF demonstrates the process of exploring a list of movie barcodes. A user is able to scroll through the movie barcodes and select a video by clicking its title link.

Animation of visually comparing moviebarcodes for selection with Chromaweaver — Visually comparing movie barcode for selection with Chromaweaver

In this final GIF, I show the detail view in its current state. At this time, the user has the ability to watch the video and either use the Youtube video controls or the movie barcode itself to select a point of interest.

Animation of interacting with a moviebarcode and its associated video with Chromaweaver — Interacting with a movie barcode and its associated video with Chromaweaver

End Results

Developed methods for automated movie barcode generation that can be performed on Youtube videos
Created a proof of concept that generates movie barcodes and can be integrated into the YoutubeTracker application
Began developing methods for statistically comparing generated movie barcodes

View YouTubeTracker Next