almost done
parent
2fa12b73dd
commit
53447f382c
Binary file not shown.
After Width: | Height: | Size: 315 B |
File diff suppressed because it is too large
Load Diff
|
@ -1,47 +1,85 @@
|
|||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<meta charset='UTF-8'>
|
||||
<title>Paul Walko - MUS 3064 Midterm Project</title>
|
||||
<script type='text/javascript' src='js/distanceFunction.js'></script>
|
||||
<script type='text/javascript' src='https://tonejs.github.io/build/Tone.min.js'></script>
|
||||
</head>
|
||||
<body>
|
||||
<input type="checkbox" id="pineswamp_at"> <br />
|
||||
<input type="checkbox" id="pilotmtn"> <br />
|
||||
<input type="checkbox" id="huck_roundabouts_bridge"> <br />
|
||||
Select 1 or more tracks to play, then press 'Play':<br />
|
||||
<br />
|
||||
<input onclick="toggle_music()" value="Play"></input> <br />
|
||||
<input type='checkbox' id='pineswamp_at'>Appalachain Trail</input> <br />
|
||||
<input type='checkbox' id='pilotmtn'>Pilot Mountain</input> <br />
|
||||
<input type='checkbox' id='huck_roundabouts_bridge'>Huckleberry Trail</input> <br />
|
||||
<br />
|
||||
<button id='PlayPause'/>Play/Pause</button> <br />
|
||||
|
||||
<script>
|
||||
let gpx = ['pineswamp_at', 'pilotmtn', 'huck_roundabouts_bridge'];
|
||||
let gpx_content = [];
|
||||
let tracks = {'pineswamp_at': {'counter': 0, 'bpm': 0, 'content': []},
|
||||
'pilotmtn': {'counter': 0, 'bpm': 0, 'content': []},
|
||||
'huck_roundabouts_bridge': {'counter': 0, 'bpm': 0, 'content': []}};
|
||||
let bassSynth;
|
||||
|
||||
function setup() {
|
||||
// Create tones for all tunes
|
||||
for (let i = 0; i < gpx.length; i++) {
|
||||
function mySetup() {
|
||||
// Process track data
|
||||
for (track in tracks) {
|
||||
// Load tracks
|
||||
let xmlhttp = new XMLHttpRequest();
|
||||
xmlhttp.open('GET', 'gpx/' + gpx[i] + '.gpx', false);
|
||||
xmlhttp.open('GET', 'gpx/' + track + '.xml', false);
|
||||
xmlhttp.send();
|
||||
gpx_content.push(xmlhttp.responseText);
|
||||
// Parse tracks
|
||||
let points = xmlhttp.responseXML.getElementsByTagName('trkpt');
|
||||
for (let j = 1; j < points.length; j++) {
|
||||
// Get distance since last point
|
||||
let prevlat = points[j - 1].attributes.lat.value;
|
||||
let prevlon = points[j - 1].attributes.lon.value;
|
||||
let lat = points[j].attributes.lat.value;
|
||||
let lon = points[j].attributes.lon.value;
|
||||
let distance = getDistance(prevlat, prevlon, lat, lon, 'M');
|
||||
// Time since last track
|
||||
let prevtime = (new Date(points[j - 1]
|
||||
.children[1].textContent)).getTime() / 3600000;
|
||||
let time = (new Date(points[j].children[1]
|
||||
.textContent)).getTime() / 3600000;
|
||||
time = time - prevtime;
|
||||
// Get speed & elevation then add to dict
|
||||
//// Avg speed is about 10 MPH, so to make this usable
|
||||
//// everything is scaled by x10, which is used as the
|
||||
//// BPM
|
||||
let speed = (distance / time) * 10;
|
||||
let elevation = points[j].children[0].textContent;
|
||||
// TODO calculate direction
|
||||
tracks[track]['content'].push({/*'direction': direction, */
|
||||
'speed': speed, 'elevation': elevation});
|
||||
}
|
||||
// This should always be true but it doesn't hurt to make sure
|
||||
if (tracks[track]['content'].length > 0) {
|
||||
tracks[track]['bpm'] = tracks[track]['speed']
|
||||
}
|
||||
}
|
||||
console.log(gpx_content[0]);
|
||||
|
||||
// Overall BPM is 200, but the actual tracks don't always play on
|
||||
// every beat.
|
||||
// For example with a 150 BPM tune, the counter for that tune
|
||||
// plays a beat every 200 / 150 beats.
|
||||
Tone.Transport.bpm.value = 140;
|
||||
loopBeat = new Tone.Loop(beats, '16n');
|
||||
loopBeat.start(0);
|
||||
|
||||
bassSynth = new Tone.MembraneSynth().toMaster();
|
||||
//Tone.Transport.start();
|
||||
|
||||
document.querySelector("#PlayPause").addEventListener("click", function(){
|
||||
Tone.Transport.toggle();
|
||||
});
|
||||
}
|
||||
|
||||
function beats(time) {
|
||||
bassSynth.triggerAttackRelease('c1', '8n', time);
|
||||
}
|
||||
|
||||
function toggle_music() {
|
||||
if document.getElementById("pineswamp_at").checked === true) {
|
||||
// Play pineswamp (or restart)
|
||||
}
|
||||
if document.getElementById("pilotmtn").checked === true
|
||||
|
||||
}
|
||||
|
||||
function play() {
|
||||
|
||||
}
|
||||
|
||||
function stop() {
|
||||
|
||||
}
|
||||
|
||||
setup();
|
||||
window.addEventListener('load', mySetup);
|
||||
</script>
|
||||
</body>
|
||||
</html>
|
||||
|
|
|
@ -0,0 +1,44 @@
|
|||
//:::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::
|
||||
//::: :::
|
||||
//::: This routine calculates the distance between two points (given the :::
|
||||
//::: latitude/longitude of those points). It is being used to calculate :::
|
||||
//::: the distance between two locations using GeoDataSource (TM) prodducts :::
|
||||
//::: :::
|
||||
//::: Definitions: :::
|
||||
//::: South latitudes are negative, east longitudes are positive :::
|
||||
//::: :::
|
||||
//::: Passed to function: :::
|
||||
//::: lat1, lon1 = Latitude and Longitude of point 1 (in decimal degrees) :::
|
||||
//::: lat2, lon2 = Latitude and Longitude of point 2 (in decimal degrees) :::
|
||||
//::: unit = the unit you desire for results :::
|
||||
//::: where: 'M' is statute miles (default) :::
|
||||
//::: 'K' is kilometers :::
|
||||
//::: 'N' is nautical miles :::
|
||||
//::: :::
|
||||
//::: Worldwide cities and other features databases with latitude longitude :::
|
||||
//::: are available at https://www.geodatasource.com :::
|
||||
//::: :::
|
||||
//::: For enquiries, please contact sales@geodatasource.com :::
|
||||
//::: :::
|
||||
//::: Official Web site: https://www.geodatasource.com :::
|
||||
//::: :::
|
||||
//::: GeoDataSource.com (C) All Rights Reserved 2017 :::
|
||||
//::: :::
|
||||
//:::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::
|
||||
|
||||
function getDistance(lat1, lon1, lat2, lon2, unit) {
|
||||
var radlat1 = Math.PI * lat1/180
|
||||
var radlat2 = Math.PI * lat2/180
|
||||
var theta = lon1-lon2
|
||||
var radtheta = Math.PI * theta/180
|
||||
var dist = Math.sin(radlat1) * Math.sin(radlat2) + Math.cos(radlat1) * Math.cos(radlat2) * Math.cos(radtheta);
|
||||
if (dist > 1) {
|
||||
dist = 1;
|
||||
}
|
||||
dist = Math.acos(dist)
|
||||
dist = dist * 180/Math.PI
|
||||
dist = dist * 60 * 1.1515
|
||||
if (unit=="K") { dist = dist * 1.609344 }
|
||||
if (unit=="N") { dist = dist * 0.8684 }
|
||||
return dist
|
||||
}
|
Loading…
Reference in New Issue