Animation on the Web

Look at http://processingjs.org/. 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 think you're on the right track looking at Flash, or if you want a more open solution, canvas or inline SVG, with the logic written in JavaScript. With canvas, you have a drawing surface that you draw onto; with http://srufaculty.sru.edu/david.dailey/svg/intro/dynamic.html, you have a display-list-style object model (lines, shapes, etc) that you manipulate. 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?

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.

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?

hattifattener: simple vector graphics, but preferably very responsive. I currently have no plans for sound but it would be a nice extra.

Canvas has terrible performance on the iPhone for animation. The only option on the iPhone is a native app.

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 https://developer.mozilla.org/en/JavaScript/A_re-introduction_to_JavaScript running in the page has access to a data structure called the document object model, or https://developer.mozilla.org/en/Gecko_DOM_Reference. 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 https://developer.mozilla.org/en/Canvas_tutorial, 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 (http://jquery.com/ 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.

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?

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.