This is a js-canvas driven atmospheric visualization with interaction.
https://renmuell.github.io/rm_atmo/
- background-color reflects daytime, in four stages which blend into one another. (morning, day, afternoon, night)
- user-interaction: creates a music note on touch.
- volume is depended on y-position (top:low to bottom:loud)
- pitch on x-position (left:low to right:high)
- notes: 11-notes from g-major-scale start form G4
- a background song can be looped
- background-animation: circle outlines appear and hide in random places and sizes. They blink and fill in random speeds.
- with the use of the cEngine-Framework, the framerate is locked at 10FPS for performance reason. Also, the canvas is run at a lower resolution and scaled up. The canvas will fill any given root element from edges to edges. See more about these features here: https://github.com/renmuell/cEngine
Choose and copy one build script from /dist/ folder:
- rm_atmo.js
- rm_atmo.min.js
Include on your website:
<script src=".../dist/rm_atmo.min.js"></script>
This will attach everything to the Body and run.
rM_AtMo.create();
If you want to control the root element or loop an backgroung song, the create-method also accepts options:
<div class="background"></div>
var rm = rM_AtMo.create({
domElement: document.getElementsByClassName("background")[0],
songSrc: 'www.some.url.com/path/to/song.mp3'
});
Attach and create new rM_AtMo instance.
- options - configuration objects has:
- domElement - root element
- songSrc - song url
new rm_AtMo instance
var rm = rM_AtMo.create({
domElement: document.getElementsByClassName("background")[0]
});
Attach eventhandler for user touch event. The eventhandler will get the position of in percentage to the root element (x and y).
- callback - a callback function which will fire on user touch
nothing
var rm = rM_AtMo.create();
rm.onTap(function (data) {
console.log('Position X Percent:', data.x);
console.log('Position Y Percent:', data.y);
});
- node
-
browserify
$ npm install browserify -g
-
uglify-es
$ npm install uglify-es -g
$ npm install
This will:
- create the final script rm_atmo.js to /dist/ folder
- minify script rm_atmo.min.js to /dist/ folder
- update demo with new script in /docs/js/ folder
$ npm run build