I Feel... (2017 redux)
An interactive digital artwork by Jonathan Hogg, originally commissioned by The Resilience Space
Copyright 2017 Jonathan Hogg. This work is licensed under the Creative Commons Attribution-NonCommercial-ShareAlike 4.0 International License.
In short, you're welcome to use, share and remix this artwork provided that: you do not do so commercially; you acknowledge me as the original artist; you mark clearly any derivative version and you apply the same license to any such work. Note that my summary here is not a substitute for the full license text.
If you wish to use this work outside of these terms, then please contact me to discuss; you'll find contact details on my website.
- There are no external code dependencies. This code should work in a good modern browser as-is. You should be able to preview it right from raw Github.
- Click anywhere to bring up the
MoodWheelradial menu. If touch events are available, then the mood wheel will respond to these and will alter its display to better support a finger by pushing the mood names out of the way so that they can be clearly read and selected.
background-colorof the canvas container element is used to fade-out the particle display while the mood wheel is active – this is done by drawing an alpha-faded rectangle in this colour over the top of the particles before the mood wheel is drawn. Firefox hates this and will slow the animation to a ridiculous degree (seconds-per-frame). Avoid having a
background-coloron the container if you want this to work in Firefox; see my own website for a hacky example of browser-specific CSS for this.
- Each spot is a
Particle; a group of these particles is a
Firework, the behaviour and look of which is controlled by a
FireworkTraitsobject - these can be (and are) switched on-the-fly to cause a firework to transition to a different type; the
FireworksDisplaycontrols all of the fireworks; a mood defines the different traits that will be chosen from at random and how often the fireworks will change.
- The notional frame rate for animation is 20fps; however, a ratio is applied
to all calculated movements to support a variable animation rate. The code
actually attempts to target at least 40fps for the animation part of the
cycle, draw frames will be dropped if necessary to achieve this. If the draw
rate falls below 25fps then fireworks will be successively dropped from the
display. These values are constants at the top of
- Add the
#statslocation hash to the URL to turn on display of animation and draw rates, and firework and particle counts. Add the
#testlocation hash to switch to a special debugging mood that contains all of the different firework types.
module syntax. In the absence of a browser that supports ES modules one can
flatten the code with Rollup or a similar tool. I'd include a rolled-up
version with a
nomodulescript tag, but browser support for this seems to be a bit patchy.
- Do say hi - contact details on my website.