Animation on the Web
January 17, 2011 7:24 PM Subscribe
I want to make a web app(let) that features interactive animation. What tools and knowledge do I need?
I have a specific idea in mind--it's not quite a game, but it's like a game in that I need moving graphics that respond to the user's input. The website part is simple though: probably only one page (or a few pages at most), and no stored user information.
Please explain what I need to learn and read in order to make this, starting from the very beginning. Pretend I don't know anything about websites, which is pretty much true except for basic HTML (completely static, 1990's style). However, I'm a good programmer in several languages (C, Java, Python, and a few others—not Javascript or PHP, but I could pick them up). I'm also familiar with OpenGL, if that helps at all.
I'd prefer not to use Flash, for reasons that are probably obvious. I also think I don't like Java applets, but it might just be that many of them are poorly designed. Would Processing be a good way to make this? Would the HTML5 Canvas be involved somehow? Or something else entirely?
As you can see, I don't even know where to start! Thanks in advance for your help.
I have a specific idea in mind--it's not quite a game, but it's like a game in that I need moving graphics that respond to the user's input. The website part is simple though: probably only one page (or a few pages at most), and no stored user information.
Please explain what I need to learn and read in order to make this, starting from the very beginning. Pretend I don't know anything about websites, which is pretty much true except for basic HTML (completely static, 1990's style). However, I'm a good programmer in several languages (C, Java, Python, and a few others—not Javascript or PHP, but I could pick them up). I'm also familiar with OpenGL, if that helps at all.
I'd prefer not to use Flash, for reasons that are probably obvious. I also think I don't like Java applets, but it might just be that many of them are poorly designed. Would Processing be a good way to make this? Would the HTML5 Canvas be involved somehow? Or something else entirely?
As you can see, I don't even know where to start! Thanks in advance for your help.
Depending on platform, you have the choices of:
* HTML5 Canvas (warning, IE not yet supported, probably best on IPhone)
* Flash (warning, IPhone not supported)
* JavaApplets (warning: programmers not supported. Seriously, this is probably not the way to go)
* Processing.js implements many of the same Processing things.
Were it me, I would go with HTML5 Canvas, which is only going to grow.
posted by gregglind at 7:54 PM on January 17, 2011
* HTML5 Canvas (warning, IE not yet supported, probably best on IPhone)
* Flash (warning, IPhone not supported)
* JavaApplets (warning: programmers not supported. Seriously, this is probably not the way to go)
* Processing.js implements many of the same Processing things.
Were it me, I would go with HTML5 Canvas, which is only going to grow.
posted by gregglind at 7:54 PM on January 17, 2011
Response by poster: You're overestimating my knowledge. As shocking as it may be, I've never really made any kind of website. How do I get JavaScript--or something else--to dynamically change the contents of a webpage in response to events?
posted by Chicken Boolean at 8:00 PM on January 17, 2011
posted by Chicken Boolean at 8:00 PM on January 17, 2011
Response by poster: hattifattener: simple vector graphics, but preferably very responsive. I currently have no plans for sound but it would be a nice extra.
posted by Chicken Boolean at 8:04 PM on January 17, 2011
posted by Chicken Boolean at 8:04 PM on January 17, 2011
Canvas has terrible performance on the iPhone for animation. The only option on the iPhone is a native app.
posted by zixyer at 8:05 PM on January 17, 2011
posted by zixyer at 8:05 PM on January 17, 2011
Flash. Flash has an option to publish for iPhone. The user won't be able to go to a website and view the app (because the iPhone doesn't support the Flash browser plug-in), but they will be able to download the app and run it directly.
posted by january at 8:11 PM on January 17, 2011 [1 favorite]
posted by january at 8:11 PM on January 17, 2011 [1 favorite]
The link in my post has the source code to its own example. You can probably find more learning materials on dynamic HTML; dynamic SVG is the same except instead of manipulating HTML, you're manipulating SVG (an XML-based vector graphics language):
In either case, the JavaScript running in the page has access to a data structure called the document object model, or DOM. This is a tree of objects whose structure roughly mirrors the structure of the HTML (or SVG) that the page originally came from. You can look at this structure and modify it (e.g., you can find the object corresponding to the contents of a <i>foo</i> tag, and assign new values to it; you can create and delete elements; etc.) and the browser will display that change in real time. You can also attach functions to bits of the page so that the functions will be called when various events occur, such as mouse clicks, or someone typing into a form field, etc.
If you use canvas, then you're also writing JavaScript code, but instead of manipulating a set of objects corresponding to visible things, you're calling methods like "clear this rectangle, now draw a line from here to here, now draw a rectangle...". If you want to change something, you erase and redraw.
Unless you're going with Flash or Java, I'd start out just getting the hang of JavaScript in a webpage doing non-graphics stuff (jQuery is a very handy javascript library for doing dynamic html-y things) and then decide whether your application is better suited to canvas or SVG.
posted by hattifattener at 8:26 PM on January 17, 2011
In either case, the JavaScript running in the page has access to a data structure called the document object model, or DOM. This is a tree of objects whose structure roughly mirrors the structure of the HTML (or SVG) that the page originally came from. You can look at this structure and modify it (e.g., you can find the object corresponding to the contents of a <i>foo</i> tag, and assign new values to it; you can create and delete elements; etc.) and the browser will display that change in real time. You can also attach functions to bits of the page so that the functions will be called when various events occur, such as mouse clicks, or someone typing into a form field, etc.
If you use canvas, then you're also writing JavaScript code, but instead of manipulating a set of objects corresponding to visible things, you're calling methods like "clear this rectangle, now draw a line from here to here, now draw a rectangle...". If you want to change something, you erase and redraw.
Unless you're going with Flash or Java, I'd start out just getting the hang of JavaScript in a webpage doing non-graphics stuff (jQuery is a very handy javascript library for doing dynamic html-y things) and then decide whether your application is better suited to canvas or SVG.
posted by hattifattener at 8:26 PM on January 17, 2011
Response by poster: That makes sense, hattifattener. Reading the SVG example code, it doesn't seem that complicated. I like the display-list part, since I'll have moving shapes (it seems like I'd have to implement that myself if I were using Canvas). Are there any disadvantages to SVG?
posted by Chicken Boolean at 8:42 PM on January 17, 2011
posted by Chicken Boolean at 8:42 PM on January 17, 2011
Look at processing.js. It is processing ported to JavaScript by resig, the jquery founder. It abstracts everything hattifattener mentions in simple and in your case familiar java. Mmmm it's easy.
posted by Raff at 9:31 PM on January 17, 2011 [1 favorite]
posted by Raff at 9:31 PM on January 17, 2011 [1 favorite]
Are there any disadvantages to SVG?
I like SVG a lot, but I don't know if it's as widely supported as canvas is becoming. It works in Firefox and in the WebKit browsers, but I don't know about MSIE, Opera, whatever.
posted by hattifattener at 10:46 PM on January 17, 2011
I like SVG a lot, but I don't know if it's as widely supported as canvas is becoming. It works in Firefox and in the WebKit browsers, but I don't know about MSIE, Opera, whatever.
posted by hattifattener at 10:46 PM on January 17, 2011
If you know a little HTML, O'Reilly has a great website (that they also released as a book) called Dive Into HTML5. Here's the page about the canvas element.
posted by wayland at 11:24 PM on January 17, 2011
posted by wayland at 11:24 PM on January 17, 2011
Response by poster: Look at processing.js. It is processing ported to JavaScript by resig, the jquery founder. It abstracts everything hattifattener mentions in simple and in your case familiar java. Mmmm it's easy.
I experimented a little with Processing.js. The language and API are very easy, but as far as I can tell, it doesn't have persistent objects that can be moved around after they're created (like SVG does). I have to define my own classes for each shape and manually re-draw the whole frame whenever anything changes or moves.
posted by Chicken Boolean at 12:04 PM on January 18, 2011
I experimented a little with Processing.js. The language and API are very easy, but as far as I can tell, it doesn't have persistent objects that can be moved around after they're created (like SVG does). I have to define my own classes for each shape and manually re-draw the whole frame whenever anything changes or moves.
posted by Chicken Boolean at 12:04 PM on January 18, 2011
Not sure about processing.js, but Processing allows you to load svg files and animate them. If you download/install Processing there is a robot demo included that demonstrates this.
posted by kenliu at 12:33 PM on January 18, 2011
posted by kenliu at 12:33 PM on January 18, 2011
« Older Thermodynamics of a supercharged car, powered by... | What's the largest possible 'word block' in... Newer »
This thread is closed to new comments.
Java is supposed to be the right thing to use for this but not only are most Java applets kind of clunky, most browsers' Java support is kind of clunky as well. OTOH, if you're doing something complex, Java might still be the way to go.
How complex are the graphics, and how responsive do they need to be? Is there any sound involved?
posted by hattifattener at 7:52 PM on January 17, 2011