(keyboard controls – Left: A=up, Z=down | Right: ↑=up : ↓=down | ESC = Quit )
The animated GIF above,”Pongdrian” by user “HappyToast”, circulated the Internet in March 2016 as part of the b3ta.com board’s “Video Game Art challenge.
The original joke combining Mondrian’s signature style with the classic arcade game “Pong” came from user “Custard” in March 2010 as part of the b3ta.com board’s Make Art More Awesome challenge
That original animated GIF saw a revival of social media sharing in January 2016, but surprisingly a Google search didn’t turn up a playable version, so now here it is! The second animated GIF also received a lot of social media attention and has now been added to Mondripong as an additional game mode.
The size and position of the elements is designed to reflect the size and positioning of the elements in the original animated GIF, even though they aren’t necessarily ideal for a playable game.
April 2016 – Since this post has received some attention, and I spent all of one afternoon coding the original game, I thought I’d put in a little more work and make it a lot better and more fun to play. One of the biggest changes is that you can now literally play four different actual, original Mondrian compositions!
You can access these on the Options screen under the Game Mode drop-down. While the default backdrops are vector recreations of Mondrian’s work, if you’re into seeing brushwork you can check “Use Paintings” and images of the real paintings will be used instead (however, they may look a little blurry on high density displays). The new game modes are based on the following works:
The “Play” link above is always to the latest version. If for some reason you want an earlier version all previous releases are available at GitHub.
- Fixed paddle line color error if you played a gray-bordered game mode followed by a black-bordered game mode
- Added a “stuck” tracker so if ball bounces between the paddles 7 times the last one ends with a “slam” that sends the ball in a new direction.
- Improved AI for computer player – now increases responsiveness each round of tournament (up to fourth round), checks the ball’s previous Y position against the current one so it better knows whether to move up or down or stay put.
- Fixed CSS positioning of on-screen controls
- Added orientation-aware player non-color player name adjust (switches between Left/Bottom and Right/Top now depending on game orientation)
- Added 4 new game modes based on actual Mondrian compositions
- Added option to use images of actual paintings as backgrounds, if available.
- Updated “About” screen to include information about the original compositions.
- Moved sound effects out of Game object
- Audio element(s) now written dynamically depending on if it is mobile or desktop
- Added audiosprite to accommodate single audio stream limit on mobile devices.
- Combined play/mute into single function that resolves for single/multiple audio streams.
- Changed Main Loop to do update and draw inside setTimeout (animates a bit better)
- Moved game option speed set to “Ready, Set, Go” function so game/round always begins at intended speed setting
- Improved function that automatically adds game mode names to drop-down Options list
- Fixed to clear round count if you hit “Quit” or “Play Again” in a Tournament
- No longer assumes players are “Red” and “Blue,” it uses paddle color name. If name is a hex or rgb code it uses “Left” and “Right.”
- Winbox on game/round over screen now uses paddle colors for game mode defined in stylesheet.
- Game mode classname moved to “gamebox” element, allowing modes to change the appearance of more elements.
- Added delay to game scale/fill to prevent wrong size being if browser is resized or orientation is changed quickly
- Added sound effects and an option to mute audio
- “Single Player” mode against a (really stupid) computer AI player
- “Tournament” mode where winner is whomever wins most of 3, 5, 7, or 9 rounds
- Single games and rounds will end when either player scores 11 points
- Now has two game modes, one based on the 2010 “custard” GIF and the other on the 2016 “HappyToast” GIF
- Additional game modes can be added by creating a new “modes” object with the game parameters
- Game can be started at three different speeds (Easy, Normal, and Expert)
- Difficulty can be added by increasing the speed as you play
- Added a “spin” to the ball to prevent it being infinitely trapped between the paddles (it will eventually shake loose)
- On-screen touch controls so it can be played on phones and tablets
- Responsive layout that adapts to mobile device screens
- Scale the game up/down to fit/fill the screen
- Fullscreen mode (does not work on iOS devices)
- Bookmark to Homescreen on iOS and Android to run like a native app
- Added app and tile icons for mobile devices
- Now uses a custom webfont for interface
- Added an “About” page on Mondrian and the animated GIFs
- Added background/bezel (which can be variably faded out if it’s too distracting)
- Redesigned game UI to accommodate new options, about, and game over screens
- Fixed collision detection on paddles
- Added believed source of original GIF to index and readme files
- Added vertical lines to paddles
- Objects now share draw function
- Fixed inconsistent code indentation
- Removed vertical centerline (which is not in original GIF)
- Initial public release, created over the course of an afternoon.
The starting point for this game was an HTML5 Canvas tutorial by Mailson and, of course, the creators of the animated GIFs, and contributors on GitHub.