SIGGRAPH ASIA 2009 Course Notes (complete, good intro, gets to details) http://dx.doi.org/10.1145/1665817.1722963

SIGGRAPH 2012 Course Notes (brief, teaser for the book)http://dx.doi.org/10.1145/2343483.2343500

I have made a simple “tutorial” to walk you through getting started with Javascript, Canvas (what you’ll use for drawing), and even showing off the basics of flocking. The program more than meets the requirements for the first phase of Project 1. We’ll walk through it in the lab session on Friday, September 7. But you can try it yourself.

The tutorial is a simple program where I saved a version (using the Mercurial version control system) for each step of the way. That way you can flip between versions and see how the code progressed. It’s less of a tutorial, than a simple piece of example code that you can try to understand and see how it was developed.

You can see the final results (Phase 13) here. To see the code (and step through the versions), clone the repository:

http://graphics.cs.wisc.edu/Courses/Games12/Tutorial1/Phase13/

If you don’t understand the idea of “cloning a repository”, you should learn more about Mercurial (or distributed source control). We’ll talk about it in class. If you prefer GIT to Mercurial, you can clone:

https://github.com/mdee/CS-679-Tutorial-1

I started assembling this post, but then I realized that it is much better done as a discussion in the forum. So after reading the post, go to the discussion board for programming resources – and comment and contribute more!

There are tons of things around the web. Here are a few that may help you get started. The only ones I am really endorsing are “Javascript: The Good Parts” and “Javascript: the definitive guide.”

General Javascript Books

There are a lot of books out there – here are some I find particularly useful. And, many are available online through the UW library! In fact, if you do a search on madcat for Javascript and limit yourself to only online things, you’ll find about 150 books!

Learning from books might seem old-fashioned. I see the attraction to learning by reading tutorials (on the web). However, these often don’t give you the bigger picture.

Two Essentials (both O’Reilly Books):

• Javascript, The Good Parts. by Douglas Crockford.(O’Reilly) (Amazon)

This is an amazing book. It explains why Javascript is they way it is, which lets you understand what it does. For places where Javascript is weird, at least this book helps it make sense – and provide you with ideas how to avoid the weirdness. I think this is a critical resource for learning Javascript. I will try to find ways to make at least portions of this book available to you.

• JavaScript the definitive guide. by David Flanagan. (proxy via library) (permalink)  – be sure to look at the most current edition.

An incredibly comprehensive reference book that has the details of everything. Not necessarily useful for learning, or for understand why certain things are weird (or what to do about them). But an important reference.

• Learning Javascript, by Shelley Powers. (permalink) (direct weblink)

OK, not essential – but this is the book I used (in an earlier edition). There are a lot of other “learn Javascript” books, so this one might not be the best, and its really focused on generic web page programming.

Other Javascript Books

I used to keep a list of books available online through the library, but the availability keeps changing. Best just to search.

Getting Started with Javascript Graphics (Canvas, WebGL)

There are tons of tutorials and whatnot out there. Of the few I’ve looked at, these are some that seem noteworthy.

• Programming with JavaScript: Algorithms and Applications for Desktop and Mobile Browsers by Dionisio and Toal, Chapter 9: Graphics and Animation
  http://samples.jbpub.com/9780763780609/80609_CH09_Dionisio.pdf

The overall book is a “CS101 text” style intro to Javascript, but this chapter is available online and seems useful. This is a chapter from an intro CS book on Javascript programming. It is about “Graphics and Animation” – it starts with a (less relevant to us) discussion of html animation (which includes some basics of CSS), but moves on to introduce Canvas, SVG, and WebGL.I like this chapter since it gives you a brief introduction to all of these different ways to do things.

• Foundation HTML5 Canvas for games and entertainment. by Rob Hawkes. (madcat, direct)

The benefit of this book is it was easily available in the library. It seems really basic, and simplistic, but it does have some examples to use canvas.

JQuery

It is unclear that you need to learn about JQuery for what you do in this class. However, people who use JQuery (and understand its model) are much more likely to get the “way of thinking” that comes up elsewhere. Once you get used to jQuery, you start to assume its part of Javascript and use it all of the time. It’s so common that there are lots of resources out there.

• jQuery novice to ninja, 2nd edition. by Castledine et al. (madcat)

I mention this one this I used it (because I found it on the shelf at the library). I am not sure it’s the greatest, since I haven’t seen others, but it seems OK. And its available online through the library.