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.
Input Fields and Type Coercion
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.