Upgrade to Pro — share decks privately, control downloads, hide ads and more …

Reviving the Dream of the 90s with WebGL

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.

Billy Roh

October 04, 2019
Tweet

More Decks by Billy Roh

Other Decks in Technology

Transcript

  1. Washington University
    Computer Science
    2012
    Facebook
    Product designer
    2013 – 2014
    Opendoor
    Senior product designer
    2014 – 2019

    View full-size slide

  2. $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!

    View full-size slide

  3. Grew up in the 90s in
    Vancouver, Canada

    View full-size slide

  4. (Irrational?)

    View full-size slide

  5. We have given up
    in exchange for .

    View full-size slide

  6. 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

    View full-size slide

  7. Recreated using WebGL, matrix math,
    asynchronous functions, HSL, SVG paths
    In-browser recreations

    View full-size slide

  8. Windows 95 original

    View full-size slide

  9. Avoid intersections
    Matrix math
    Sequential rendering
    Asynchronous functions
    Generative palette
    HSL, material
    Dissolve and reset
    SVG paths

    View full-size slide

  10. Avoid intersections
    Matrix math
    Sequential rendering
    Asynchronous functions
    Generative palette
    HSL, material
    Dissolve and reset
    SVG paths

    View full-size slide

  11. 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

    View full-size slide

  12. 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

    View full-size slide

  13. 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

    View full-size slide

  14. 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

    View full-size slide

  15. 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

    View full-size slide

  16. 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

    View full-size slide

  17. 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

    View full-size slide

  18. 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

    View full-size slide

  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 1 0
    0 0 1 0
    0 0 0 0
    1
    1
    1
    1
    1
    1
    1
    1
    1
    1
    1
    1
    1
    1

    View full-size slide

  20. Avoid intersections
    Matrix math
    Sequential rendering
    Asynchronous functions
    Generative palette
    HSL, material
    Dissolve and reset
    SVG paths

    View full-size slide

  21. Iterate through pipePathArray to
    render each pipe

    View full-size slide

  22. …which immediately renders all the
    pipes at once

    View full-size slide

  23. Synchronous
    Everything gets rendered at once

    View full-size slide

  24. Promise chaining
    Endless chaining oh no

    View full-size slide

  25. Await/async
    Simpler, easier to understand

    View full-size slide

  26. Wait between each drawPipe()
    Iterate through pipePath and wait
    until drawPath is complete in
    between each iteration

    View full-size slide

  27. Wait between each drawSegment()
    Iterate through pipePath and wait
    until drawPath is complete in
    between each iteration

    View full-size slide

  28. Draw and delay
    Draw a segment of the pipe and add
    a time delay

    View full-size slide

  29. Asynchronous
    Pipes get rendered sequentially

    View full-size slide

  30. Avoid intersections
    Matrix math
    Sequential rendering
    Asynchronous functions
    Generative palette
    HSL, material
    Dissolve and reset
    SVG paths

    View full-size slide

  31. Dynamically generate palette
    and use semi-shiny material
    Windows 95 original

    View full-size slide

  32. Shiny material
    Material params
    Generative palette
    HSL
    Teapot
    External asset

    View full-size slide

  33. Generate random colour
    Cap it to reasonable saturation and
    lightness values

    View full-size slide

  34. Color
    Fog
    Metalness
    Opacity
    Texture
    Wireframe
    Emissive
    Roughness
    Material can affect dozens
    of things, such as…

    View full-size slide

  35. Default Metalness
    0.3
    Metalness
    1.0

    View full-size slide

  36. Audio
    A-frame can load and
    cache external assets.
    Images 3D models

    View full-size slide

  37. Load asset
    Set unique ID

    View full-size slide

  38. Ensure only one teapot
    is rendered

    View full-size slide

  39. Reference unique ID
    from

    View full-size slide

  40. Avoid intersections
    Matrix math
    Sequential rendering
    Asynchronous functions
    Generative palette
    HSL, material
    Dissolve and reset
    SVG paths

    View full-size slide

  41. Fade out with small black
    squares then reset
    Windows 95 original

    View full-size slide

  42. 1. Create grid from viewport
    2. Randomly divide up grid into groups
    3. Render each group as an SVG

    View full-size slide

  43. 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

    View full-size slide

  44. 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

    View full-size slide

  45. Render 1,000s of squares individually
    Cumbersome, slow to render






    View full-size slide

  46. Render 100s of squares at once with
    Easier to manage, faster to render



    View full-size slide

  47. Move Horizontal
    Vertical Z (Cloze?)

    View full-size slide

  48. Instantiate a string

    View full-size slide

  49. Use `M` to set the starting point

    View full-size slide

  50. Use `H` to draw a horizontal line

    View full-size slide

  51. Use `V` to draw a vertical line

    View full-size slide

  52. Use `H` to draw a horizontal line

    View full-size slide

  53. Use `Z` to close the shape

    View full-size slide

  54. Repeat for all squares in the array

    View full-size slide

  55. In-browser recreation

    View full-size slide

  56. Q: How might we make this more fun?
    A: More colours, interaction and

    View full-size slide

  57. Windows 95 original

    View full-size slide

  58. Generate the maze
    Depth-first search
    Traverse the maze
    Depth-first search
    Dynamic entities
    A-frame look-at
    Dissolve and reset
    Animation params

    View full-size slide

  59. Generate the maze
    Depth-first search
    Traverse the maze
    Depth-first search
    Dynamic entities
    A-frame look-at
    Dissolve and reset
    Animation params

    View full-size slide

  60. Source: wolfesoftware.com/maze-generator/

    View full-size slide

  61. Generate the maze
    Depth-first search
    Traverse the maze
    Depth-first search
    Dynamic entities
    A-frame look-at
    Dissolve and reset
    Animation params

    View full-size slide

  62. 1. Pick random starting position
    2. Pick an accessible, unvisited position
    3. Else, step backward

    View full-size slide

  63. 1. Pick random starting position
    2. Pick an accessible, unvisited position
    3. Else, step backward

    View full-size slide

  64. 1. Pick random starting position
    2. Pick an accessible, unvisited position
    3. Else, step backward

    View full-size slide

  65. 1. Pick random starting position
    2. Pick an accessible, unvisited position
    3. Else, step backward

    View full-size slide

  66. 1. Pick random starting position
    2. Pick an accessible, unvisited position
    3. Else, step backward

    View full-size slide

  67. 1. Pick random starting position
    2. Pick an accessible, unvisited position
    3. Else, step backward

    View full-size slide

  68. 1. Pick random starting position
    2. Pick an accessible, unvisited position
    3. Else, step backward

    View full-size slide

  69. In-browser recreation

    View full-size slide

  70. Generate the maze
    Depth-first search
    Traverse the maze
    Depth-first search
    Dynamic entities
    A-frame look-at
    Dissolve and reset
    Animation params

    View full-size slide

  71. Smiley face
    Stationary
    Resets maze
    Rat
    Traverses maze
    Has no effect
    Start button
    Spawns near camera
    Has no effect

    View full-size slide

  72. Enumerate all positions in maze
    Shuffle array to randomize positions

    View full-size slide

  73. Pop a position off the array for
    each entity to prevent collisions

    View full-size slide

  74. In-browser recreation

    View full-size slide

  75. Notice how the start button faces you, no
    matter which way you face
    Windows 95 original

    View full-size slide

  76. aframe-look-at-component

    View full-size slide

  77. In-browser recreation

    View full-size slide

  78. Generate the maze
    Depth-first search
    Traverse the maze
    Depth-first search
    Dynamic entities
    A-frame look-at
    Dissolve and reset
    Animation params

    View full-size slide

  79. Scale walls, start button, and smiley face
    up/down at the start/end
    Windows 95 original

    View full-size slide

  80. Source: aframe.io/examples/showcase/animation/

    View full-size slide

  81. 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”

    View full-size slide

  82. Wrapper for entire maze

    View full-size slide

  83. Wrapper for thing that need to
    scale up/down
    Walls, smiley face, start button

    View full-size slide

  84. Scale up wallWrapper along
    the y-axis

    View full-size slide

  85. Scale down wallWrapper along
    the y-axis

    View full-size slide

  86. In-browser recreation

    View full-size slide

  87. Q: How might we make this more fun?
    A:

    View full-size slide

  88. 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.”

    View full-size slide

  89. Q: How might we make this more fun?
    A:

    View full-size slide

  90. (Irrational?)

    View full-size slide

  91. Reject the notion that
    must be bound to .

    View full-size slide