Assignment 1: Music Visualization with Particle System

Objectives

Implement a particle system for music visualization to gain a basic understanding of object oriented programming in Javascript and the major visual/audio features of P5.js.

Description

A particle system is a set of geometries (e.g. circles, triangles, squares, etc) that have the same initial position but are typically emitted at different times with a random force and lifetime. They are useful in Computer Graphics to model natural phenomena like fire, rain, snow, etc. In this assignment, your particle system has to react to audio attributes (e.g. volume, ) extracted from a piece of music of your choice. In other words,  when the particles get emitted, the force applied to them is defined based on the current attributes of the piece. 

1. Create a new Processing (P5.js) sketch in a directory called "asg1" with at least four files: "index.html",  "sketch.js", "particle.js" and "particle-system.js".
2. Write (in "particle.js")  a "Particle" class with the necessary properties and methods to instantiate a particle at a given position and to emit a created particle given a force and lifetime as parameters. 
   • When created, a particle should be set to "dead" and when emitted it should be set to "alive". 
   • When "alive", a particle should be moving according to the given force and should "die" (disappear) after it's lifetime is passed. 
   • Dead particles always go back to the position it was originally created.
3. Write (in "particle-system.js")  a "Particle System" class with the necessary  properties and methods to instantiate a list of N particles starting at the same position and to emit particles.
   • To emit a particle, the particle system first look for an available "dead" one in the list of particles and then call the proper function on that particle given a force and a lifetime as parameters.
4. Instantiate (in "asg1.js") a particle system with N particles starting at a given position.
5. Using the "p5.sound.js" addon library, extract audio features from a piece of music stored as digital audio format (.wav, .ogg, .mp3, etc) and map these features to the attributes of particles such as initial position, force, lifetime, color, etc. You will define which features  and attributes to use as well as how this mapping is done.

Resources

• Links to an external site.The Nature of Code - Chapter 4: Particle Systems Links to an external site..
• Visualizing Music with p5.js. Links to an external site.
• p5.sound Library Links to an external site..

Submission

Host your source code on Github and upload the following on Canvas:

1. A zip file with the final version of your code.
2. A link (as a comment to your submission) to this assignment's github page. This page should have examples (.png or .gif) of outputs of your particle system with a brief explanation (1 paragraph) of what (and how) music features you used to move the particles.