<html>
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
</head>
<body onclick='javascript:startRecording()')>
<div style='font:20vw Arial;text-align:center;background-color:rgba(200,200,200,0.1);color:white;-moz-border-radius:2vw;-webkit-border-radius:2vw;border-radius:2vw;position:fixed;left:50%;top:50%;transform:translate(-50%,-50%);padding:5vh 5vh;'>START</div>
<canvas id='grid' style='width:90vw;height:80vh;position:fixed;left:50%;top:50%;transform:translate(-50%,-50%);'>
</canvas>
<div style='font:10vw Arial;text-align:center;color:black;position:fixed;left:50%;top:5%;transform:translate(-50%,-5%);padding:5vh 5vh;' id='time'></div>
</body>
<script>
var context;
var graphWidth=0;
var graphHeight=0;
var xAxisYCoordinate=0;
var currentMicXCoordinate=0;
var currentMicYCoordinate=0;
var currentAccelerometerYXCoordinate=0;
var currentAccelerometerYYCoordinate=0;
var hitTimeXCoordinate=0;
var hitTimeYCoordinate=0;
var timeInMilliSeconds=0;
window.AudioContext = window.AudioContext || window.webkitAudioContext;
var audioContext= new AudioContext();
var microphoneStream;
var analyser;
var dataLength=0;
var dataArray=[];
var pcm;
var error='';
var duration=60000;
dataArray=new Uint8Array(duration/16);
navigator.mediaDevices.getUserMedia({audio: true}).then(function (stream) {error='nav supported';
microphoneStream=audioContext.createMediaStreamSource(stream);
analyser=audioContext.createAnalyser();
microphoneStream.connect(analyser);
//microphoneStream.connect(audioContext.destination);
//run();
});
function run(){
setInterval(function(){
//analyser.getByteTimeDomainData(dataArray);
plot(0,0);
},3000);
}
window.addEventListener('devicemotion',print,true);
function startRecording(){
error='aboutToresume';
audioContext.resume();
error='starting';
console.log('recording');
makeGrid();
}
function print(event){
if(event.accelerationIncludingGravity.y!=null){
plot(event.accelerationIncludingGravity.z,16);
}
}
function makeGrid(){
context=document.getElementById('grid').getContext('2d');
document.getElementById('grid').width=document.getElementById('grid').offsetWidth;
document.getElementById('grid').height=document.getElementById('grid').offsetHeight;
var divWidth=document.getElementById('grid').width/12;
var divHeight=document.getElementById('grid').height/12;
graphWidth=document.getElementById('grid').width-2*divWidth;
graphHeight=document.getElementById('grid').height;
//y axis
for(var i=0;i<13;i++){
if(i==6){
//context.lineWidth=3;
xAxisYCoordinate=divHeight*i;}else{
context.lineWidth=1;}
context.beginPath();
context.moveTo(divWidth,divHeight*i);
context.lineTo(divWidth*11,divHeight*i);
context.stroke();
context.font='10px Arial';
if(i>0&&i<12){
context.fillText(((6-i)/20).toFixed(1),divWidth-20,divHeight*i+3);
}
if(i==0){
context.fillText('m/s²',divWidth-25,divHeight*i+12);
}
}
//x axis
for(var i=1;i<12;i++){
if(i==0){
//context.lineWidth=3;
}else{
context.lineWidth=1;}
context.beginPath();
context.moveTo(divWidth*i,0);
context.lineTo(divWidth*i,divHeight*6);
context.stroke();
context.beginPath();
context.moveTo(divWidth*i,divHeight*6+20);
context.lineTo(divWidth*i,divHeight*12);
context.stroke();
context.font='10px Arial';
if(i>0){
context.fillText(((i-1)/1*6).toFixed(0),divWidth*i-3,divHeight*6+15);}
if(i==6){
context.fillText('s',divWidth*11+17,divHeight*i+15);
}
}
currentMicXCoordinate=divWidth;
currentMicYCoordinate=xAxisYCoordinate;
currentAccelerometerYXCoordinate=divWidth;
hitTimeXCoordinate=0;
hitTimeYCoordinate=0
timeInMilliSeconds=0;
}
function plot(accelerometerYCoordinate,intervalInMilliSeconds){
analyser.getByteTimeDomainData(dataArray);
var max=0;
for(var i=0;i<125;i++){
max=Math.max(max,Math.pow(Math.pow((128-dataArray[i]),2),0.5));
}
if(timeInMilliSeconds<duration){
context.beginPath();
context.moveTo(currentMicXCoordinate,currentMicYCoordinate);
currentMicYCoordinate=xAxisYCoordinate-Math.pow(Math.pow(max/128.0,2),0.5)*graphHeight/2;
currentMicXCoordinate=currentMicXCoordinate+graphWidth/(duration/intervalInMilliSeconds);
context.lineTo(currentMicXCoordinate,currentMicYCoordinate);
context.strokeStyle='rgba(40, 99, 40, .5)';
context.lineWidth=2;
context.stroke();
context.beginPath();
context.moveTo(currentAccelerometerYXCoordinate,currentAccelerometerYYCoordinate);
currentAccelerometerYYCoordinate=xAxisYCoordinate+(accelerometerYCoordinate-9.4)/0.1*graphHeight/12;
currentAccelerometerYXCoordinate=currentAccelerometerYXCoordinate+graphWidth/(duration/intervalInMilliSeconds);
context.lineTo(currentAccelerometerYXCoordinate,currentAccelerometerYYCoordinate);
context.strokeStyle='red';
context.lineWidth=2;
context.stroke();
timeInMilliSeconds=timeInMilliSeconds+16;
if(max>hitTimeYCoordinate){
hitTimeYCoordinate=max;
hitTimeXCoordinate=currentAccelerometerYXCoordinate;
}
if(timeInMilliSeconds==(duration-16)){
context.beginPath();
context.moveTo(hitTimeXCoordinate,0);
context.lineTo(hitTimeXCoordinate,graphHeight);
context.strokeStyle='blue';
context.lineWidth=4;
context.stroke();
}
//document.getElementById('time').innerHTML=accelerometerYCoordinate.toFixed(1);
}
}
</script>
</html>