alt Hacker NewsGreat article! I've always wondered how youtube implemented it. Love the interactive canvases too. But maybe it's just me, the canvases look blurry?
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...
Thanks for reading and for the kind words!
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.