NTSC — Never Twice The Same Credits

Published in

Applaudience

9 min readNov 10, 2016

A different title sequence every time you watch it!

As this is is not a "typical video", I cannot embed it here, but you can discover it here >> https://www.studionora.ca/projects/never-twice-the-same-credits.html

THE CONCEPT

I’ve been a Video Editor & Motion Designer for 15+ years, and I started learning about code few months ago. I’m kind of addicted to TV Series and love Title Sequences, but as I watch a lot of them I don’t like seeing the same credits all over again and again and again…

And as I was experimenting with code, I was wondering if it would be possible to create a Title Sequence that would change every time you watch a new episode*. That’s how I came up with this idea.

Note: I don’t consider myself a software geek or a developper. I’m sure that my code is a bit messy and that there would be a better way to do this. I just wanted to share my journey with you. If you have any tips or have ideas to share, feel free to comment and provide feedback.

I am not affiliated to any of the following brands, apps or websites. I don’t profit by mentioning them, they are part of my real workflow and act as daily work tools.

You could say that Game Of Thrones did it it in a way, but it was not randomly generated in realtime. I invite you to check this Wikipedia page for more info about it.

THE STORY

Even if it’s a made up series, here is a quick synopsis:
“NTSC” takes place in the San Francisco Bay Area in the beginning of the 2000s. A child has been missing for months. A police duo is about to abandon the search, when one of them stumbles upon a broken doll’s ceramic eye near road №1. They start to look for others pieces… They are about to discover something stranger than they could imagine.

BEHIND THE SCENES

Building The Sequence

First, I had to quickly edit the sequence that would be the backbone of this experiment.

As the content is not what matters the most, I’m going to sum up my workflow around the editing process.

THE MUSIC

I headed to premiumbeat.com to find a song that I would be able to use and does not cost an arm and a leg.

THE FOOTAGE

I needed to find great “atmospheric” visuals to illustrate the concept.My first thought was to buy some stock footage, but as I needed around 20 shots, it would have cost too much. So I visited unsplash.com where you can find amazing photos for free.

THE ROUGH CUT

As I was experimenting, I tried Premiere Pro (I’m usually a FCPX aficionados… yes I know… but really guys I love FCPX… anyway that’s not the point here). I assembled the main sequence, and when I was happy with it I exported a quick video .mp4 as a reference. The structure of my Edit looked like this:

THE COMPOSITING

Even though I was only working with stills, I thought it would interesting to animate them. I added some quick movements and played with the origami plug-in in After FX. Here is an example of a before-after shot:

After I had prepared all the shots I needed for the different parts, I exported them as individual clips. I ended up with 15 HD video files [24i/s] and because I wanted the experiment to load quickly, I compressed them as 640x360 px files with an average size < 1 MB. I named them “Pn-Sn” [P for “Part” and S for “Shot”] to be able to identify them easily:

P1-S1.mov, P1-S2.mov, P1-S2.mov, P2-S1.mov, etc.

So now I had my backbone sequence as a reference, all the individual shots and I was almost ready to start to code but I needed a map to know where I was going. As I said, I’d like to make this title sequence as different as it can be every time the viewer presses “play”.

So :

The 1st Part [contains 1 shot]: 3 different shots will be available
The 2nd Part [contains 4 shots] : 10 different shots will be available
The 3rd part [contains 3 shots]: 3 different shots will be available
The 4th part [contains 1 shot]: 1 shot available

You can go crazy with this stuff, but for the test I think that 90 720 different title sequences combination (at least) will be enough!

So if I add some other extra abstract graphic randomness and names of the (pseudo) actors, the blue print should look like this:

Note: Ok it’s not exactly what happened, I did not have this clean and tidy map ready before I started. It was much more sketchy

So now I was ready to start coding. As I said earlier, I’m new to coding, and I started to learn with the amazing js library p5.js created by Lauren McCarthy (based on Processing created by Ben Fry and Casey Reas). So all the code I will use will be based on this library and its derivatives.

The Code

I will not describe all of the code here, but only the main part (if you’d like to go deeper, please feel free to head to my github repository).

So I will cover:

How I created “the timeline”
How I did the randomness of the video sequence
How I generated the extra graphic stuff in real time

CREATING THE TIMELINE

First, I needed to re-create the timeline ; I never did that before and I had no clue how to do it.

I knew that I needed to mark the timing accurately. So I looked up the p5.js library. I first found the millis() function (which returns the number of milliseconds since starting the program) but because I wanted to start my sequence only when the user clicks the play button, I couldn’t use it.

Then, in the p5.sound.js library I found the currentTime() function (which returns the current position of the p5.SoundFile playhead, in seconds). I thought it would be perfect because the music file was the unchanging part of the sequence. Unfortunately, it didn’t work really well. The counter was not “accurate”, maybe because it’s only in seconds and not in ms. I still didn’t understand.

Anyway, I went to another direction and decided to create my own counter. As I knew that the p5 sketch plays natively at 60f/s, I just needed to multiply the time in seconds by 60 to make the counter a “frame-counter” and it worked pretty well!

So, for example, the interval [0–5 sec] would be counter-wise [0–300], [5–10 sec] > [300–600], etc. Now I can link the counter to the timeline.

Here is the code:

I was happy because I created my very first timeline in code that I can play with.

CREATING THE RANDOMNESS

Now it was time to create the random selection of the shots. I needed to create an array of numbers [0 ,1 ,2, …] without any repetition of the same element. If I managed to create a random sequence of numbers, I didn’t succeed in avoiding the repetition, so I asked for help. Jeremy Dowell for the Coding Rainbow Slack community helped me with this and came up with this code:

It works perfectly. Thanks Jeremy.

Note: with the p5.js library, you cannot use a function() named shuffle() (it’s already a function for randomizes the order of the elements of an array) that’s why I called it suffleSeq() .

Now I have to code a function to create the random selection for each part:

So in this example the Part 2 of the Sequence will contain:

Shot 3
Shot 5
Shot 1
Shot 9

which will look like this:

The process is the same for all the other parts of the sequence.

GENERATING THE GRAPHICS LAYER (in real time)

A. The Names of the pseudo-Actors:

Because it’s a Title Sequence, you need to have the names of the actors, so I used p5.js here again to generate them in realtime on top of the video layer. As their position depends on the shots, I predefined several positions in the setup() function, by creating vectors and assigned a position accordingly to the shot in the checkPnSn() function.

To display the names, I used 2 instances:

one in white
one in red with missing letters + some small randomness in the position

B. The Extra Graphics:

And then, I wanted to add some other graphic layers. I recently stumbled upon p5.scribble.js that draws 2D primitives in a sketchy look (created by Generative Light). It was perfect for this experiment. So I created 4 different sketches for the 4 shots of part 2 (I added some randomness to accentuate the NTSC feeling ;)

Here is the code for the first one:

And the result:

TO BE CONTINUED…

I think I just scratched the surface of what we can do with this experiment, but here are some of the possibilities :

Easily changing the shots even mid season, as you just need to replace a few clips or some clips.
Using some words as clues, as I did in the part 3 with the 3 words [“3.45pm”, “Pier 7”, “Rosebud”]. The viewer would catch them or not, and they would act as extra bits of information about the story. Again, this could be easily changed at will.
Some shots could be cut in half and only be recognizable if the sequence plays on after like the other, as I did in the experiment.
We could even think beyond the Title Sequence; maybe a film could be treated in the same way, so that the audience can watch ‘not exactly’ the same movie.

So what do you think about this concept? Do you think it’s worth it? Do you have any ideas? Feel free to leave a comment. I’d be glad to continue the discussion.

Written by Arno Faure
Proofread by Karan Singh

Arno is Visual Artist, Creative Director & Co-Founder of NØRA a graphic design studio. I co-created UNTIL, a label to inspire children.