Session 1: Here’s an example of particle behavior to get you started on the Dynamic Particle System project (20 points) that was assigned in session 2 of week 5. This is example (linked below) was adapted from Daniel Shiffman’s Simple Particle example on Processing.org for use with Processing.js

Shiffman Particles

Session 2: Today we will continue looking at ways to manipulate our particle system through form fields, keyboard, and mouse interaction. We will add modes, color choices, and other student suggested features during the class demo.

Let’s also take a look at the Web Audio API. This system provides methods to allow sound to be played, recorded, analyzed, processed, and synthesized.

Session 1: Today we will look at a few more techniques for manipulating particles. New features include random colors, cycling colors, black with a white stroke (used to produce the image below), and bounce on/off.

Dynamic Particle System

Session 2: Let’s present your particle system projects today.

TUTORIALS:
http://www.w3schools.com/html5/
https://developer.mozilla.org/en/Canvas_tutorial
http://tutorialzine.com/2010/09/html5-canvas-slideshow-jquery/
http://www.elated.com/articles/snazzy-animated-pie-chart-html5-jquery/

VIDEO:
http://vimeo.com/corbanbrook
http://vimeo.com/hapticdata

EXAMPLES:
http://9elements.com/io/?p=153
http://www.chromeexperiments.com/
http://www.chromeexperiments.com/detail/canvas-cycle/

FRAMEWORKS:
http://raphaeljs.com/
http://jquery.com

PROCESSING.JS:
http://processingjs.org/
http://sketch.processing.org/
http://annasob.wordpress.com/2010/05/04/sketch-processing-org/
https://aim.johnkeston.com/im2490/p5jsDemo/
http://hascanvas.com/

PROCESSING.ORG
http://processing.org/
http://www.shiffman.net/projects/
http://openprocessing.org/

WebGL:
http://learningwebgl.com/blog/
http://www.chromium.org/developers/demos-gpu-acceleration-and-webgl
http://en.wikipedia.org/wiki/WebGL

Please be prepared to describe your ideas for the final project on session 1, week 8.

Final Motion Scripting Application (30 Points)
Due: Week 11 (Beginning of Class)
Use HTML5, CSS, JavaScript, and one of the frameworks we have either used or discussed in class to create a motion based, interactive, front-end application. Your application must interact via user input, or an external data set such as audio, RSS feed, the Twitter API, etc. You may start by using a pre-existing tutorial, however, your project must differ from the tutorial significantly by changing and adding features to the application.

Requirements:
1. Use a combination of HTML5, CSS, and JavaScript to create a motion based, interactive application
2. Include interaction with users (forms, mouse, keyboard) and/or data sets like audio, or data feeds
3. If you start with a tutorial, make significant changes by including new features and changing others
4. Upload your project and environment to a web server and indicate the browser requirements
5. Place a link to your project and your source code on the drop off drive before class on the day it is due

Session 1: Today we will discuss your ideas for the final as well as examine some more techniques and examples that apply to the course materials. Specifically today let’s take a look at using P5.js. One of the main advantages of this new interpretation (in constrast to the processingjs.org port of Processing) is the inclusion of libraries that extend the functionality of the framework. One of these libraries handles sound by integrating the Web Audio API. It is also important to note that P5.js does not allow you to use the same syntax as the Processing language. P5.js syntax is much more similar to JavaScript and can be easily combined with standard JavaScript code.

Relevant Resources:
P5.js
Web Audio API
Working with Object in JavaScript

Session 2: Demonstrations that relate to topics that you have indicated you are researching for your final projects.

Session 1: For the next two weeks of class we will continue demonstrations that relate to topics that you have indicated you are researching for your final projects. One of these topics is sound visualizations. The Web Audio API finally works well across most modern browsers and support for it is built into P5.js. Below is a sound visualization that I created using P5.js and the Web Audio API. Today will review the resources and techniques necessary to create a project of this sort.

Ostraka Visualization

Session 2:

Final Project Milestone #1
1. Illustrate that you are able to setup a JavaScript environment that includes the framework code necessary.
2. Show me an example of using the console log to display a value from your script.