Visual feedback

All of the three apps comes with some kind of visual feedback: a pink dot that moves in the same direction as the user tilts the phone. The code for this is made with a combination of html, css and javascript

The pink dot's id inn App 1 is "myAnimation". This element is declared as variable "elem" in the Javascript code:

let elem = document.getElementById("myAnimation"); 

This javascript snippet below shows how the accelerometerIncludingGravity values decides the position of the element. Read more about the handle motion events here.

    // multiplying with 5 to get values from 0-100
    let xDotValues = (((event.accelerationIncludingGravity.x * -1) + 10) * 5);
    // multiplying with 4 to get values from 0-80
    let yDotValues = ((event.accelerationIncludingGravity.y  + 10) * 4);

    elem.style.top = yDotValues + 'px'; 
    elem.style.left = xDotValues + 'px'; 

Note that the accelerationIncludingGravity values are scaled to values between 0-100 and 0-80. This is to make the dot only move inside the area that covers window of the microwave oven, to get the impression that the dot is locked inside the microwave oven.

In the html, the element (note, now it is called myAnimation) is placed in a container, that overlaps with the image of the micro wave oven:

<div id ="myContainer">
<div id ="myAnimation">
</div></div>
<img class='img' src="assets/micro2.png" width="250">

In the CSS, the width and height and position of the container has been matced with the width, height and position of the window of the micro wave oven, so that it will appear like the dot is inside the micro wave oven:

  #myContainer {

    width:130px; 
    height:105px;
    top: 25px;
    left: 25px;
    background: rgba(255, 255, 255, 0.486); 
    position:absolute; 
    border:4px solid black; 
    border-radius: 10px; 
    box-shadow: 0 5px 50px #3337
  }

  #myAnimation {
    width: 30px;
    height: 30px;
    position: absolute;
    border-radius: 50px;
    background-color: rgb(197, 95, 184);
    opacity: 0;

  }

  .img {
    position:absolute; 
    top: 0px;
    left: 0px;

}

Back to the javascript code. The opacity of the pink dot is decided by the amount of energy that is forced upon the phone. Just as the gain of the sound decreases the more the phone is moved, the visibility of the dot will decrease. The opposite effect will occur if the "inverse" button is activated.

    // and visual feedback indicated by the opacity of the element in GUI
    if (inverse == false)
    gainNode.gain.rampTo(newAcc2, 0.1),
    elem.style.opacity = newAcc2;
    else
    // more smooth change of volume:
    gainNode.gain.rampTo(newAcc, 0.1),
    elem.style.opacity = newAcc;