Asymmetric WebGL Holographic tribute to Breakout Game
Switch branches/tags
Nothing to show
Clone or download
Fetching latest commit…
Cannot retrieve the latest commit at this time.
Failed to load latest commit information.

Trapezoid Box 360

Trapezoid Box 360 is a holographic game originally designed for UCLA Game Lab's Cocktail Cabinet. It is an asymmetric multiplayer tribute to the classic breakout with a hint of color theory. Three player (red, green, and blue) works together to fill the world with all colors (through additive color combinations / white), against one player (opacity / grey), whose goal is to make everything disappear.

hero set up happy group intense



  • Colored paddles (red, green, blue) work together to try and make every brick white by adding their own color to each brick.
  • Opacity paddle (grey) tries to make every brick disappear by reducing each bricks opacity.
  • Game ends when all bricks have disappeared, or all bricks are white (meaning all paddles have added their color to each brick).


  • Each player controls a paddle (keyboard keys, in the demo: hgft, awsd, ilkj, (%&\ -- default on cocktail cabinet arduino input)
  • When a ball bounces on a paddle, it takes the color/opacity of that paddle.
  • If a ball has taken a color/opacity, when it hits the bricks in the ceiling, it will add to it.
  • A ball will continue to be a color/opacity until it hits the floor or is hit by another paddle.

How to use

  • Refer to images for construction of hologram viewer (we created a trapezoid in clear acryllic and placed it on top of a 24" monitor).
  • Run the file on any webserver that can serve javascript and open index.html. TB360 uses WebGL and so you need a relatively new browser to run it.
  • To edit keys used to move the paddles, edit the bottom of js/main.js.


Special Thanks