Hopefully you know about this bouncing DVD logo screensaver, my mind goes right to watching it in class or seeing it on a bus. Either way over the years its almost become a meme, there’s something just so satisfying about when it hits the corner lol.
(Yes I know the video below is fake, but still thought it really captures the feeling)
With that said, I tried to make it in pixi.js in an afternoon. It surprisingly wasn’t too hard when we utilize pixi.js’s tint api. Essentially though all we need to do is when the logo hits the “wall” just randomly generate a new tint. An example of that looks like this:
[crayon-61e6d234e0a50867660984/]If you want to learn more about the tint api you can read more about it here in the docs:
https://scottmcdonnell.github.io/pixi-examples/index.html?s=demos&f=tinting.js&title=Tinting
As always because its on codepen.io so feel free to fork it! You can view the source here, if you want you can replace the logo (it’s a base64 encoded string), because I’m too cheap for codepen premium!!
