Assignment 1: Music Visualization with Particle System
DueJul 4, 2019 by
Submittinga file upload
Jun 27, 2019 at 4:30pm - Jul 11, 2019 at 12:30pm
This assignment was locked Jul 11, 2019 at 12:30pm.
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.
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".
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.
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.
Instantiate (in "asg1.js") a particle system with N particles starting at a given position.
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.
Host your source code on Github and upload the following on Canvas:
A zip file with the final version of your code.
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.
Can't change a rubric once you've started using it.
This criterion is linked to a Learning OutcomeYour code is object-oriented and follows the proposed file organization._9151
In your project, you should have at least the files:
(a) index.html, (b) sketch.js, (c) particle.js and (d) particle-system.js. The "Particle" class should be defined in particle.js and ParticleSystem class should be defined in particle-system.js.