You will need to download this zip file and extract its contents to a convenient folder.  We will be working with Processing.js, which uses a language very similar to Java that later gets converted to JavaScript.  The advantages here are that you’ll be working with a familiar language and be able to create browser-ready projects.  Today I just want you playing around with a provided example (gogo.html in the zip file) and hopefully looking at the API.  Processing.js is an extremely powerful framework — check out a Tower Defense game to convince yourself of this.  Here’s another cool example which visualizes tweets about JavaScript.

Today can be a fairly free-form exploration day, but if you’re unable to stay on task that way, here’s what I recommend you do to tweak gogo.html and get familiar with Processing.js:

- Change the canvas background to green when the animation starts.
- Make the circle twice as big
- Change the frame rate and see what happens
- Change the delay and see what happens
- Make the animation twice as big (800 x 800)
- Make the white ring around the circle flash green when the circle is clicked
- Make the circle follow your cursor as you click (like in this example)

More complex things you may want to try:

- Write a Snake game!

(No Ratings Yet)

 Loading ...