Using my own Seriously.js, which takes advantage of the graphics hardware to render high-definition video effects, I’ve created a series of transitions that media creators can use to edit in real time in a browser.
The Whip Pan Transition Effect
The first transition I tried is a “whip pan“, where the camera pans laterally — too fast to see the cut to the next shot. We can see this in some old Kung Fu movies and in the work of Paul Thomas Anderson and Edgar Wright, (See Shaun of the Dead). Ideally, this would be done with an actual in-camera pan, but we can fake it by quickly moving the outgoing and incoming clip to the side while applying a large directional blur.
The TV Channel Change Transition Effect
The next effect is a TV channel change. It’s maybe a bit too stylized, but it’s fun and might make sense with period footage. Seriously.js happens to come with an analog TV glitch effect, with all kinds of scan-line distortion, vertical sync and other ways of screwing up the image. We start off by cranking these effects up high and then gradually but quickly bringing them back down to zero after the cut. This could be combined with other effects like black-and-white to make the whole video look more like old TV.
The Flash Transition Effect
Finally, there is the flash transition, sometimes called a glow transition or exposure bloom. The exposure is ramped way up and the whole image is increasingly blurred, leaving an almost all-white frame. After the cut, we re-focus and bring the exposure and blur back down to reveal the second shot. It’s a more nuanced effect than fading through white, as some of the original color and shape of the video is retained several frames into the transition.
Implementing the image effects for this experiment was quick, as I’ve already put a lot of work into Seriously.js to include a few dozen effects and support for images and HTML5’s canvas feature — meaning it would be just as easy to transition between static images, interactive graphics or a webcam stream. I’ll hope to share these transitions as a library, but more work was required, such as managing keyboard and mouse interactions, placing and sizing video, selecting the correct video sizes and data rates for different platforms and managing multiple codecs.
In this example, the videos remain paused when we cut away from them. There are cases where it would be useful to cut back to a video later in its timeline, as though it were running somewhere in the background. That raises potential bandwidth challenges that haven’t been dealt with yet.
The code is available on GitHub, as is Seriously.js, and both are free to use. Let us know what you think, if you have any ideas for how this might be improved or if you end up using this in your own project. Comment below, use the hashtag #povtech or email us at email@example.com.