I recently noticed a recurring visual artifact in the "Most Replayed" heatmap on the YouTube player. The highest peaks were always surrounded by two dips. I got curious about why they were there, so I decided to reverse engineer the feature to find out.
This post documents the deep dive. It starts with a system design recreation, reverse engineering the rendering code, and ends with the mathematics.
This is also my first attempt at writing an interactive article. I would love to hear your thoughts on the investigation and the format.
Rendering bezier curves on the client side seems reasonable. Calculating ~400 points and rendering 100 curves would not impact performance, but I wonder if these little interactions would impact performance if added up.
About YouTube's comment about Gangnam Style, it wasn't a tweet. You can't find the original post because it was google+, which is dead. Google said it was a joke shortly afterwards: https://www.cnet.com/tech/services-and-software/gangnam-styl...
Re: Blurry canvases: You are spotting the classic HTML5 Canvas high-DPI issue. It happens because the canvas backing store pixels don't map 1:1 to CSS pixels on high-density displays (like Retina screens). I likely need to scale the canvas drawing context by window.devicePixelRatio to fix that sharpness. Good catch. EDIT: Made the change.
Re: Performance: That is an interesting thought. Since the calculation only triggers when you visit (or resize) the video player, there is definitely a CPU spike. My guess is they chose this approach to have a "plug and play" rendering logic that adapts perfectly to the client's specific device width and pixel density, rather than generating thousands of static image variations on the server.
Re: Gangnam Style: Ah, Google+! That explains why I couldn't find the original source. Thanks for the correction. EDIT: Added the correction.
Is this an invented bit of humor ... or an existing usage applied to the prevalence of rounded corners we see (once again) in User Interfaces of today?
(The original term has nothing to do with web design or UI per se)
https://en.wikipedia.org/wiki/Bouba/kiki_effect
Edit: i see the article goes on to explain the term in context.
But I feel the sharp corners versus round corners is a design/fad cycle that will keep repeating.
We will see sharp corners once again in vogue within the next decade if not sooner.
It will start small with one or two players wanting to distinguish their offering from the crowd, and one of them seeing success, and others copying them slowly at first and then it catches on.
You are spot on about the cycle, though. I suspect that once everything is perfectly round and polished, the only way to stand out will be to go sharp again.