IM2490 Interactive Motion Scripting
Monday, October 4th, 2010
IM2490 Interactive Motion Scripting
An advanced course that applies motion graphics as an integrated interactive solution; students will script interaction, sequencing, and motion for interactive projects. Optimization is a critical consideration in the creation of the user-centered experience.
Instructor: John Keston
Meeting Times and Location:
Monday / Wednesday
Room 10, LaSalle Building, 5:00pm - 8:00pm
Syllabus: ...
Posted in IM2490 Interactive Motion Scripting | No Comments »
Monday, October 4th, 2010
Session 1: Today we will be covering the syllabus as well as reviewing the curriculum for the class. We will also introduce ourselves and establish the background and skill level of the class members. As the course description states in the the syllabus this class is "An advanced course that ...
Posted in IM2490 Interactive Motion Scripting | No Comments »
Thursday, October 7th, 2010
Session 1: Wikipedia describes HTML5 as "...a standard for structuring and presenting content on the World Wide Web. The new standard incorporates features like video playback and drag-and-drop that have been previously dependent on third-party browser plug-ins such as Adobe Flash and Microsoft Silverlight." Although HTML5 is not considered "ready ...
Posted in IM2490 Interactive Motion Scripting | 1 Comment »
Thursday, October 14th, 2010
Session 1: As we have seen, creating animation with pure JavaScript is promising, but can also be time consuming and cumbersome. Another way to unlock the animation potential of the HTML5 Canvas tag is by using a JS framework. Much less code is necessary when you have pre-written classes and ...
Posted in IM2490 Interactive Motion Scripting | No Comments »
Thursday, October 21st, 2010
Session 1: Based on the HTML5 and JavaScript Animated Circle exercise, we have seen that in order to make multiple instances of shapes on the canvas we need to duplicate many lines of code creating redundancies that make the code long and difficult to manage. This "brute force" technique might ...
Posted in IM2490 Interactive Motion Scripting | No Comments »
Thursday, October 28th, 2010
Session 1: Today we will review your HTML5 and Processing.js OOP exercise. Here's the example I presented in class last week.
Primary Squares
Here's a second example that we will look at as a precursor to experimenting with particle systems. In this example the particles are expanding rings that grow and ...
Posted in IM2490 Interactive Motion Scripting | 2 Comments »
Thursday, November 4th, 2010
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: ...
Posted in IM2490 Interactive Motion Scripting | 2 Comments »
Monday, November 15th, 2010
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/
http://aim.johnkeston.com/im2490/p5jsDemo/
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 ...
Posted in IM2490 Interactive Motion Scripting | No Comments »
Tuesday, November 23rd, 2010
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.
Session 2: Demonstrations that relate to topics that you have indicated you are researching for your final projects.
Posted in IM2490 Interactive Motion Scripting | No Comments »
Sunday, November 28th, 2010
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. Currently there are a couple of possibilities for getting data from an audio stream to ...
Posted in IM2490 Interactive Motion Scripting | 1 Comment »
Tuesday, December 7th, 2010
Session 1: Demonstrations
Session 2: Project milestone
Final Project Milestone #2
1. Demonstrate a minimum of two distinct, interactive features in your project
2. Explain how you intend to apply interactivity beyond the features currently enabled
3. If your project uses a data set be prepared to show some of the data Involved
4. If ...
Posted in IM2490 Interactive Motion Scripting | No Comments »
Tuesday, December 7th, 2010
Session 1: Final presentations
Session 2: Final presentations
Posted in IM2490 Interactive Motion Scripting | No Comments »