Bouncing Canvas Balls with Gravity and Friction

Your primitive, sucky browser does not support canvas.

Must be a number. Try 1-20

Must be a number. Try 0 – 360

Okay, so what’s is this thing?

I went a little crazy with this one. I know it doesn’t look like much, but there’s a lot going on inside that canvas thingy. If you click on the button or on the canvas, a bunch of black circles will bounce around with their own vectors, speeds, elasticity, and with a shared bit of gravity. (Eventually they’ll stop.) If you want to change somethings, just put numbers into the input boxes. If there’s nothing, then default values will be used. If you enter a letter instead of a number, you’ll get an error.

Lighter Version Available

I made a separate HTML page for this so I could see how it performs without all the extra stuff that WordPress might throw in. I wrote a post about it, but you can also just check out the HTML example. It’s the same as this one, but on a lighter page. If your phone does better on that one, please post a comment on one of the two posts. I’d love to find the best way to make canvas stuff for the most devices.  🙂

What was I trying to do?

The idea was to play around with some physics and have a go at some form validation, while using all the wonderful fanciness of requestAnimationFrame. I also wanted to use a prototype class instead of just regular objects. It turned out well, but I did catch a bad case of Shiny Object Syndrome before the end.

Javascript classes aren’t quite the same as Flash classes, but they’re pretty close. You can have public variables, private variables, methods… all the good stuff. It’s supposed to keep your code tidy, but I have to admit that I started going crazy with the methods I was building. How much friction should the floor have? How bouncy should these things be? What kind of gravity should I use? It’s pretty easy to get excited and build bunches of things you won’t actually use. It lost a big chunk of free time just watching things bounce. Sad, really.

Input Fields and Type Coercion

Javascript lets you play fast and loose with variable types, so I wanted to play with that a bit as well. If the user is going to enter values, how do I prevent them from putting letters instead of numbers? Will the input see the “1” as a string or a number? What to do? I wanted to run some tests but I didn’t really need an actual form, so I just tossed some inputs into a styled div tag and targeted them with JavaScript.

For validation, I wound up using the minus-zero trick to kind of force the input into a number. If this checks out, we’re okay. If it blows up and yields NaN (not a number) then we need to toss out an alert and refuse to bounce.

Finally, I decided to make the canvas itself a button. It might help with mobile devices, just in case the submit button winds up below the fold. (You shouldn’t have to hit the button and then scroll up quickly in order to see the action.)

WordPress can be upsetting

One final word on this test. WordPress really doesn’t like to leave a person’s code alone. If you put a snippet inside that content area, it’s basically a war to keep the back-end from adding line breaks, filtering things, and just generally making your life difficult. Oh, and heaven help you if you switch from visual mode to HTML mode. That’s when the evil happens most!

One solution is to dive into functions.php to disable some things, and to stop using visual mode entirely. I was hoping that I wouldn’t have to do that since I do more than just code snippets on this site… but after the trouble I’ve had with this page and the previous Tips entry, I’m strongly considering it.

  • Pingback: Brian Cribb | Showing the Frame Rate on Canvas Animations - Brian Cribb()

  • Very cool. Thanks for the post. I never use visual mode (it’s disabled on my blog).

  • Thanks! I have mixed feelings about visual mode, depending upon what I’m doing. If there are no code snippets on a site, it’s nice to have a mini word processor. But for guys like us it’s also easy to just type the stuff in, tags and all. It’s no longer a problem here, though. I’ve started using the Syntax Highlighter Evolved plugin, so my snippets are inside a couple of shortcode tags. It keeps the WordPress gremlins out.

  • Exactly. I think in code, so it’s easy to write and mentally parse. I, too, have a plugin for code snippets that I use when I post about technical subject. Which, unfortunately, hasn’t been often enough lately. Thanks again for the tips and inspiration.

  • Pingback: The Mighty Cribb | Showing the Frame Rate on Canvas Animations - The Mighty Cribb()