/dvd-screensaver

A remake of the nostalgic DVD screensaver made with <canvas> and Javascript.

Primary LanguageJavaScript

DVD Screensaver

The live website: https://dvd-screensaver.surge.sh
Docs: https://dvd-screensaver.surge.sh/docs

Inspired by the DVD screensaver we all know and love.

Development

It's just a static website. If you are using VSCode Debugger for Chrome, F5 will launch the project in Chrome.

To deploy, type surge in the command line.

Todo

  • The sort 'n' sweep algorithm still ain't totally right.
  • Refactor
    • Determine highest variance axis.
    • Potentially some sort of currying method on Point to make working points a bit easier in places?
    • For the Rect class, renam .vector to .dir and make vector a computer prop from .dir * .vel
    • Why does the whole program slow down over time?
    • All images load immediately
    • Overflow hidden/improve on mobile
    • Should we use the same code to make a dynamic rectangle bounce off of the walls? Then we could remove the offscreen bug section.
    • Add some nicer docs.
  • Implement collision detection working off of [this tutorial] (https://youtu.be/8JJ-4JgR7Dg?t=2003)
    • Get collision vector working perfectly with a ray coming from any angle.
    • Get a dynamic rectangle to bounce correctly off of a static rectangle?
    • Implement sort and sweep first with static rectangles.
    • Get two rectangles to bounce off of one another using sort and sweep.
  • More self-explanatory user interface
  • Busted mouseout bug.

Maybe later

  • Give an option to hit the corner every time.
  • Maybe rebuild this in Elm?

Big thanks to @adeshar00 for helping me think through collision detection.
Built during my time at Recurse Center.