MondriPong!

pongdrian

web icon PLAY IT NOW!

(keyboard controls – Left: A=up, Z=down | Right: ↑=up : ↓=down | ESC = Quit )

These GIFs are both a joke combining the video game Pong with the artistic “neoplastic” style of Piet Mondrian.

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.

tumblr_nrte6qn2Wf1uajfq2o1_400

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.

Major Update!

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:

Version History

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.

Version 1.6

  • 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)

Version 1.5

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

Version 1.4

  • 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

Version 1.3

  • “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

Version 1.2

  • Fixed collision detection on paddles

Version 1.1

  • Added believed source of original GIF to index and readme files
  • Added vertical lines to paddles
  • Objects now share draw function
  • Added contributor section to header of javascript
  • Fixed inconsistent code indentation
  • Removed vertical centerline (which is not in original GIF)

Version 1.0

  • Initial public release, created over the course of an afternoon.

Thanks

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.

Or DOWNLOAD THE ZIP FILE to play it offline, or help improve it over at GitHub.

← Previous post

7 Comments

  1. salty-horse

    I was about to try and implement that :)

    I think this is the original author: http://www.b3ta.com/board/9971945

  2. salty-horse

    You forgot the vertical lines for the paddles :)

  3. kmhcreative

    I guess I was staring at it too long, I swore the vertical lines were there. Merged your pull request on GitHub and updated the live demo (may take a browser refresh to see the changes).

    It would be nice if the z-index didn’t cause the black lines to ever overlay the color blocks, but the only way I can think of around that is to detach the color blocks from the lines and make the script sync both a “lines” layer and a “color block” layer.

    • salty-horse

      Thanks! :)

      * I created a user on the b3ta forums to ask the poster of that image if they’re the creator, but since the user is new, I can’t post messages until a week or so from now.

      * Found this shader-based non-interactive animation based on the gif: https://www.shadertoy.com/view/Xdy3Wh

      * I haven’t even considered the overlay problem :). The solution itself is as you say (if I understand your appproach – not sure what “sync” means) – put the shapes in an array, and have the draw function first draw all the shapes, then all the lines. and call them in order for all shapes.
      That will produce what the GIF seems to show, unless you have a more Mondrian-ish way to visualize that :)

      * Not sure the vertical line in the middle fits the look (it’s not in the original gif). Perhaps the score should even be outside of the canvas to keep the image clean.

      * The ball sometimes starts at a straight angle, so it will keep going left and right forever until a paddle is moved. Maybe it should always start by moving in a diagonal.

      * Besides the collision that should be fixed, maybe the paddles should be a bit faster. They feel a bit too slow to play.

      * Maybe requestAnimationFrame should be used instead of setTimeout, but that requires more code to cap at 30 fps. I’m not even sure what the benefits are besides it being the recommended way to animate.

      * To draw the lines, maybe lineTo is faster than fillRect?

      * There’s some inconsistent indentation in Game() – didn’t touch that since I wanted to keep the patch specific.

      • kmhcreative

        That shader is set up like what I was talking about for z-index – the lines are on a lower layer and the color boxes are on the upper layer and their animations are synchronized.

        Debated whether to put the centerline in or not, since it wasn’t in the original. If the goal is to make it look EXACTLY like the animated GIF I suppose it should go. If the goal is a more playable game, not only should it probably stay but the entire canvas and the sizes of everything should be altered (i.e., larger playfield, smaller objects).

        You’re right that paddle reaction is too slow and the collisions are off (I particularly don’t like that the large top/bottom of the paddles doesn’t register as something the “ball” can collide with). I really haven’t done much with HTML5 Canvas before, so it’s entirely possible there are better methods than what was in the code I started with.

        I tried using “lineTo” but it wouldn’t move with the “fillRect” but adding more fillRect’s did. If the lines and rectangles were on different layers, though, it may be faster to draw. Though I’m not sure if synchronizing their animation would cancel out any gains or not.

        As I noted, I just adapted the code from a HTML5 Canvas “Pong” tutorial and only spent about 2 hours one afternoon on it – simply because a friend on Facebook posted the animated GIF and someone said “Too bad you can’t play” and I stupidly said “It wouldn’t be hard to make a playable one in HTML5” and someone said “Do it!” So I did. Given how quickly I slapped it together and that I didn’t write the original code on which it’s based I’m sure there are plenty of inconsistencies in it. 😉

        • salty-horse

          It’s a good approach to adapt existing code – I was looking at some pong implementations myself before thinking of specifically searching for “mondrian pong”.

          So at this point I can leave you to have fun with looking into some of the stuff you already mentioned and I suggested (if you’re interested!) – collision, paddle speed, initial ball direction, requestAnimationFrame – or I could try to implement some of it myself. Wouldn’t want to step on your toes.

          • kmhcreative

            No worries about stepping on my toes. If I didn’t want other people to play with the code and try to improve it, fork it, whatever, I wouldn’t have posted it to GitHub 😉

Leave a Reply


Menu




Search

Posts

About

Comment13

Contact

Share

Share this On:

Google+ Reddit Stumble It Digg this! LinkedIn Pinterest Del.icio.us RSS Feed E-mail Link!