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.
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
Here is a demo to a dat.gui where there is a field for text input. I thought this was a lot of fun and a different use for this controller.
http://davidwalsh.name/demo/dat-gui.php
This was a site with some cool effects and patterns you can use to create some different shapes. I liked this article because it was fun to see another example of what you can do. It also seems to tie in with the node.js and processing IDE. I really liked the snark 56 example.
http://www.delimited.io/blog/2014/6/17/force-directed-graphs-in-d3
This is a website that has several examples of dat.gui in use for things other than particles. The flight stream example was really cool because it shows flight patters and allows you flip the globe to see more flights. There are also some nice features that integrate nicely with your trackpad, such as swiping.
http://callumprentice.github.io/