https://earthquakemusic.netlify.app/js/main.js

1// Leaflet map
2// initialize map
3let map = L.map('map').setView([30, -98], 4);
4
5// add the OpenStreetMap tiles
6L.tileLayer('https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png', {
7    maxZoom: 19,
8    attribution: '&copy; <a href="https://openstreetmap.org/copyright">OpenStreetMap contributors</a>'
9    }).addTo(map);
10
11// show the scale bar on the lower left corner
12L.control.scale({imperial: true, metric: true}).addTo(map);
13
14// stop everything
15function stop() {
16    window.location.reload();
17}
18
19// use an async function to minimize nesting
20async function start() {
21    // request the earthquakes 
22    const url =
23        'https://earthquake.usgs.gov/earthquakes/feed/v1.0/summary/all_day.geojson';
24    
25    // use destructuring assignment to get the features property
26    const { features } = await fetch(url).then((res) => res.json()); // parse response as JSON
27
28    // reverse the features array to get them in chronological order
29    features.reverse();
30    console.log(features);
31
32    // Create a synth using tone.js and connect it to the main output (computer speakers)
33    const synth = new Tone.Synth().toDestination();
34
35    // loop over the array
36    for (const feature of features) {
37        // calculate the time since the first earthquake
38        const diffFromStart = feature.properties.time - features[0].properties.time;
39        // calculate where in our timeline of one minute to play each earthquake
40        feature.playtime = diffFromStart / (24 * 60 * 1000)
41        console.log(feature.playtime);
42
43        // scale data function (we're converting earthquake magnitudes (~0-10) into a musical range of pitches (~40-900hz))
44        // thanks to https://writingjavascript.com/scaling-values-between-two-ranges
45        const scaleData = function scale(value, inMin, inMax, outMin, outMax) {
46            const result = (value - inMin) * (outMax - outMin) / (inMax - inMin) + outMin;
47          
48            if (result < outMin) {
49              return outMin;
50            } else if (result > outMax) {
51              return outMax;
52            }
53          
54            return result;
55          }
56        // add this property to our object
57        feature.scaledTone = scaleData(feature.properties.mag, 0, 10, 40, 900)
58        console.log(feature.scaledTone)
59        
60        // create a timer for playing the notes
61        setTimeout(
62            () => {
63                // create geoJSON layer
64                var myLayer = L.geoJSON(feature).addTo(map);
65                // add the coordinates of the earthquake to the map
66                myLayer.addData(feature.geometry.coordinates);
67                console.log(feature);
68                // play a note
69                synth.triggerAttackRelease(feature.scaledTone, '32n');
70            },
71            feature.playtime * 1000,
72        );
73    }
74}
75
76
77/* to do
78map magnitude to the font size
79map the magnitude to change volume
80think about a different synth
81think about different notes
82think about effects
83display the earthquakes on the map
84map pitch to data
85
86
872.5 or less 	Usually not felt, but can be recorded by seismograph. 	Millions
882.5 to 5.4 	Often felt, but only causes minor damage. 	500,000
895.5 to 6.0 	Slight damage to buildings and other structures. 	350
906.1 to 6.9 	May cause a lot of damage in very populated areas. 	100
917.0 to 7.9 	Major earthquake. Serious damage. 	10-15
928.0 or greater 	Great earthquake. Can totally destroy communities near the epicenter. 	One every year or two
93
94
95
96take numbers between 0 and
97*/