rm_atmo

This is a js-canvas driven atmospheric visualization with interaction.

Demo page

https://renmuell.github.io/rm_atmo/

Features:

• 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

Getting started

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>

Simple usage

This will attach everything to the Body and run.

rM_AtMo.create();

Advanced usage

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'
});

Methods of global rM_AtMo-object

Attach and create new rM_AtMo instance.

create(options)

Arguments:

• options - configuration objects has:
  • domElement - root element
  • songSrc - song url

Return:

new rm_AtMo instance

Example:

var rm = rM_AtMo.create({
    domElement: document.getElementsByClassName("background")[0]
});

Methods of created rA_AtMo-instance:

onTab(callback)

Attach eventhandler for user touch event. The eventhandler will get the position of in percentage to the root element (x and y).

Arguments:

• callback - a callback function which will fire on user touch

Returns:

nothing

Exampel:

var rm = rM_AtMo.create();

rm.onTap(function (data) {
  console.log('Position X Percent:', data.x);
  console.log('Position Y Percent:', data.y);
});

Development

Dependencies

• node
• browserify

  $ npm install browserify -g

• uglify-es

  $ npm install uglify-es -g

Set up

$ npm install

Build

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