Reviving the Dream of the 90s with WebGL

Bfb8a1489a81ab3faf55860402abb58e?s=47 Billy Roh
October 04, 2019

Reviving the Dream of the 90s with WebGL

See demos on billyroh.com/screensavers.

The 90s were an exuberant time for technology. This is an attempt to bring back some of that energy by recreating 90s screensavers with WebGL and other modern web technologies.

Bfb8a1489a81ab3faf55860402abb58e?s=128

Billy Roh

October 04, 2019
Tweet

Transcript

  1. 1.
  2. 2.

    Washington University Computer Science 2012 Facebook Product designer 2013 –

    2014 Opendoor Senior product designer 2014 – 2019
  3. 3.

    $40,000 raised for non-profits through WaffleJS I helped start a

    creative coding monthly meetup called WaffleJS. We just had our 4-year anniversary!
  4. 5.
  5. 7.
  6. 8.
  7. 9.
  8. 11.

    The transition between this and the thesis is a bit

    rough Beginning of modern computing (Windows)… 90s -> Windows => screensavers Pipes and maze Windows 95 screensavers
  9. 12.
  10. 14.
  11. 18.

    1. Generate matrix 2. Seed starting position and mark 3.

    Choose unoccupied position and mark 4. Repeat visitedMatrix pipePath 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0
  12. 19.

    1. Generate matrix 2. Seed starting position and mark 3.

    Choose unoccupied position and mark 4. Repeat pipeMatrix pipePath 0 0 0 0 0 0 0 0 0 0 1 0 0 0 0 0
  13. 20.

    1. Generate matrix 2. Seed starting position and mark 3.

    Choose unoccupied position and mark 4. Repeat pipeMatrix pipePath 0 0 0 0 0 0 0 0 0 0 1 0 0 0 0 0
  14. 21.

    1. Generate matrix 2. Seed starting position and mark 3.

    Choose unoccupied position and mark 4. Repeat pipeMatrix pipePath 0 0 0 0 0 0 1 0 0 0 1 0 0 0 0 0
  15. 22.

    1. Generate matrix 2. Seed starting position and mark 3.

    Choose unoccupied position and mark 4. Repeat pipeMatrix pipePath 0 0 0 0 0 0 1 0 0 0 1 0 0 0 0 0 1 1 1 1 1 1
  16. 23.

    1. Generate matrix 2. Seed starting position and mark 3.

    Choose unoccupied position and mark 4. Repeat pipeMatrix pipePath 0 0 0 0 0 0 1 0 0 0 1 0 0 0 0 0 1 1 1 1 1 1 1
  17. 24.

    1. Generate matrix 2. Seed starting position and mark 3.

    Choose unoccupied position and mark 4. Repeat pipeMatrix pipePath 0 0 0 0 0 0 1 0 0 0 1 0 0 0 0 0 1 1 1 1 1 1 1
  18. 25.

    1. Generate matrix 2. Seed starting position and mark 3.

    Choose unoccupied position and mark 4. Repeat pipeMatrix pipePath 0 0 0 0 0 0 1 0 0 0 1 0 0 0 0 0 1 1 1 1 1 1 1 1
  19. 26.

    1. Generate matrix 2. Seed starting position and mark 3.

    Choose unoccupied position and mark 4. Repeat pipeMatrix pipePath 0 0 0 0 0 0 1 0 0 0 1 0 0 0 0 0 1 1 1 1 1 1 1 1 1 1 1 1 1 1
  20. 28.
  21. 34.
  22. 35.

    Wait between each drawPipe() Iterate through pipePath and wait until

    drawPath is complete in between each iteration
  23. 36.

    Wait between each drawSegment() Iterate through pipePath and wait until

    drawPath is complete in between each iteration
  24. 41.
  25. 43.
  26. 45.
  27. 49.
  28. 51.
  29. 54.
  30. 55.
  31. 58.

    1. Create grid from viewport 2. Randomly divide up grid

    into groups 3. Render each group as an SVG
  32. 59.

    1. Create grid from viewport 2. Randomly divide up grid

    into groups 3. Render each group as an SVG 2 1 3 4 1 1 2 1 3 3 4 2 1 2 1 2 1 4 4 1 3 1 2 3
  33. 60.

    1. Create grid from viewport 2. Randomly divide up grid

    into groups 3. Render each group as an SVG 2 1 3 4 1 1 2 1 3 3 4 2 1 2 1 2 1 4 4 1 3 1 2 3
  34. 61.

    Render 1,000s of squares individually Cumbersome, slow to render <svg>

    <rect/> <rect/> <rect/> <!— and so on --> </svg>
  35. 62.

    Render 100s of squares at once with <path> Easier to

    manage, faster to render <svg> <path/> </svg>
  36. 72.
  37. 73.
  38. 74.
  39. 75.
  40. 77.

    Generate the maze Depth-first search Traverse the maze Depth-first search

    Dynamic entities A-frame look-at Dissolve and reset Animation params
  41. 78.

    Generate the maze Depth-first search Traverse the maze Depth-first search

    Dynamic entities A-frame look-at Dissolve and reset Animation params
  42. 80.
  43. 81.

    Generate the maze Depth-first search Traverse the maze Depth-first search

    Dynamic entities A-frame look-at Dissolve and reset Animation params
  44. 90.

    Generate the maze Depth-first search Traverse the maze Depth-first search

    Dynamic entities A-frame look-at Dissolve and reset Animation params
  45. 91.

    Smiley face Stationary Resets maze Rat Traverses maze Has no

    effect Start button Spawns near camera Has no effect
  46. 92.
  47. 96.
  48. 98.
  49. 100.

    Generate the maze Depth-first search Traverse the maze Depth-first search

    Dynamic entities A-frame look-at Dissolve and reset Animation params
  50. 104.

    Property to animate e.g. position, scale, rotation Value to animate

    to Easing e.g. easeInOutQuad, easeInOutElastic Animation attribute Can add arbitrary characters after “animation”
  51. 105.
  52. 108.
  53. 110.
  54. 114.
  55. 115.

    The Metropolitan Transportation Authority ran a six- month, $1 million

    trial of the “fertility management bait” in subways in 2013, and said in 2017 that it would expand to additional stations following “promising results.”
  56. 116.
  57. 118.
  58. 119.
  59. 120.
  60. 121.
  61. 122.
  62. 125.
  63. 126.