Thought Knots

The meandering musings of Joey Cato

Category: Projects

Stranger Games

Posted on February 3, 2017  in Games, Projects

Re-imagining Stranger Things as an interactive 1983 video game collection

For my recent Netflix Hack Day project, I wanted to create something based on Stranger Things, an original TV show that debuted last year and quickly appealed to my interest in 80’s nostalgia. Having seen a few fan-based video games following its popular release, I felt equally inspired to make some kind of video game contribution as well. It also interested me to design something in the process that was more era-appropriate. Since our Stranger Things story begins in 1983, it seemed logical to aim for an Atari 2600 aesthetic. Even the show itself referenced Atari, so that was all the convincing I needed 🙂

In the end I decided to borrow game-play elements from Frogger and Pacman ( though the demon slugs were loosely inspired by the Brain enemy’s cruise missiles from Robotron ) Projecting the game screen onto the various TV sets was a bit of an afterthought ( I had recently noticed that the television set makes numerous appearances throughout the episodes, so I figured including them would improve the immersion. )

Just as I experienced with My80sTV, this project was an absolute joy to work on. And I’m very grateful for the recent attention it’s received.

Click here if you’d like to play Stranger Games.

, , , , , ,

[Top]

Category: Projects

Netflix Zone – HTC Vive VR Prototype

Posted on May 24, 2016  in Projects

A VR prototype created for the HTC Vive that lets you experience Netflix as if it were a vintage video rental store.

Also featured in the Netflix Tech Blog

, , ,

[Top]

Category: Projects

SongBranch

Posted on March 18, 2016  in Projects

sbsq

Just released my latest project, SongBranch. It’s basically an interactive song lyric visualization app. The edges are colorized as a heat map based on the word/phrase frequency. There are three different graph views: The default Normal view uses a custom algorithm to display a graph the song lyrics in the fewest nodes possible. The Simple view displays each song verse as an individual node, whereas the Detailed view is a graph of each individual word.  You get interesting results from songs based on how the words are structured and repeated. Here are a few of my favorite findings:

 

Daft Punk – Technologic

Eminem – Rap God

Madonna – Like a Prayer

Radiohead – Creep

Chumbawumba – Tubthumping

, ,

[Top]

Category: Projects

Paris, Texas in 1981

Posted on February 13, 2016  in Projects

For my latest excursion in nostalgia, I decided to scan in an old (1981) city directory from my home town (Paris, Texas) and create a interactive map of all of the local businesses listed from back then.

http://gorch.com/paris1981

fb

, ,

[Top]

Category: Projects

rxify

Posted on December 30, 2015  in Projects

An RxJS library wrapper that lets you execute Rx operators directly using marble-diagram ASCII string arguments.

rxify was mainly created as an educational tool to guide those ramping up on Reactive Extensions for the first time by presenting an alternative way to visualize and experiment on its asynchronous features. However, some folks may find it useful for other purposes such as general problem-solving or simplifying unit tests.

https://www.npmjs.com/package/rxify

https://github.com/joeycato/rxify

[Top]

Category: Projects

Say Whaaat!!! (Netflix Subtitle Prototype)

Posted on March 9, 2015  in Projects

Say Whaaat!!! provides a more convenient way to to catch missed dialogue as you watch Netflix by displaying subtitles when you pause playback. It also provides the ability to navigate a film’s timeline, caption by caption.

Also featured in the Netflix Tech Blog

,

[Top]

Category: Projects

MyDecadeTV

Posted on August 1, 2014  in Projects

Now that My70sTV.com is released, I decided it was time to put together a meta-site to combine all of the TV’s into one portal. Also, I’ve written a user guide to make it the channel-surfing  a bit more intuitive.

share200

 

[Top]

Category: Projects

My70sTV

Posted on June 8, 2014  in Projects

Following the footsteps of My80sTV and My90sTV, My70sTV is now officially released. It was pretty fun assembling this as I got a chance to listen through an interesting history of music.

my70stv_200

[Top]

Category: Projects

My 90’s TV!

Posted on January 12, 2014  in Projects

My 80’s TV! was a fun project and it received way more attention that I ever anticipated, so I naturally followed it up with a similar website that was equally nostalgic to me, My 90’s TV!

The biggest challenge and time sink came from the collection of all the clips. Even though I was able to automate much of the data collection, in the end I still manually curated each video to ensure it was correctly tagged with the appropriate year.  So it still remained a time-consuming process. After I was done, the database of clips was almost twice the size as the original My80sTV site! I haven’t decide what decade to pursue next, but it will likely be the 1960’s or 1970’s.

fb_logo_400

[Top]

Category: Projects

My 80’s TV!

Posted on September 15, 2013  in Projects

I’ve always been a huge 80’s nostalgia nut, so I decided honor the decade with my newest web project: My 80’s TV!

The basic goal of this project is to simulate the vintage experience of channel-surfing on a TV from the 80’s decade as much as possible. 

Each time you visit the site, the channels are randomized. In order to closely emulate the television watching experience, the starting times of the videos are randomized as well. In addition, elapsed time is tracked, so if you flip back and forth between channels, it should resume at the correct time.

Recently I added genre filters, and my next goal is to extend them to include dates (1980-1989), since everyone has a different interpretation of the 80’s and so may only care about a specific year. Future plans for this app include support of other decades as well.

On the tech side, I used this project as an opportunity to learn more about jQuery and CSS transitions.

fb_logo_400

 

 

[Top]