First HTML5/Canvas Project
I finally got to work on picking up some more JavaScript stuff.
The previous attempt at learning JavaScript was learning d3, but then I found out that canvas is possibly a better alternative because it’s more flexible and the syntax is more normal-ish. I don’t have a lot of experience with d3, but while I was able to do things, I agree that there really wasn’t a lot there in terms of resources. Canvas is something that appears to used fairly widely, and there seem to be quite a few resources for it. It also seems to behave more or less how I might expect it to work, which was something I struggled with when I was using d3. Eventually, I’m probably going to need to get familiar with some type of library and not build everything from the ground up, but for now I’m content to just start learning some basics and playing around with stuff.
(As a side note, I believe that there are libraries with both R and Python that can generate web-ready output, but I haven’t really looked into that.)
My project is a simple graphical visualization of adding one-digit numbers. There’s not a whole lot going on here. Just drawing some boxes and moving things around on a timer. I did have a version where you had to press a button to make it go to the next animation, but I decided that I wanted it to just loop around. Here is the link: Mental Addition by Completing Groupings.
I’ll try to do larger examples later, perhaps.