const SONAR_DURATION = 5; function fmod (x, y) { // discuss at: https://locutus.io/php/fmod/ // original by: Onno Marsman (https://twitter.com/onnomarsman) // input by: Brett Zamir (https://brett-zamir.me) // bugfixed by: Kevin van Zonneveld (https://kvz.io) // example 1: fmod(5.7, 1.3) // returns 1: 0.5 let tmp let tmp2 let p = 0 let pY = 0 let l = 0.0 let l2 = 0.0 tmp = x.toExponential().match(/^.\.?(.*)e(.+)$/) p = parseInt(tmp[2], 10) - (tmp[1] + '').length tmp = y.toExponential().match(/^.\.?(.*)e(.+)$/) pY = parseInt(tmp[2], 10) - (tmp[1] + '').length if (pY > p) { p = pY } tmp2 = (x % y) if (p < -100 || p > 20) { // toFixed will give an out of bound error so we fix it like this: l = Math.round(Math.log(tmp2) / Math.log(10)) l2 = Math.pow(10, l) return (tmp2 / l2).toFixed(l - p) * l2 } else { return parseFloat(tmp2.toFixed(-p)) } } function computeLatDistanceInKm (dest, orig) { // Approximation française return ((dest - orig) * 111); } function computeLonDistanceInKm (dest, orig) { // Approximation française return ((dest - orig) * 79); } function computeDelay (latDistanceKm, lonDistanceKm, sonarDuration) { let placeDirection = Math.atan(latDistanceKm / lonDistanceKm); let placeAngle = lonDistanceKm > 0 ? placeDirection : placeDirection + Math.PI; let unsignedAngle = placeAngle > 0 ? placeAngle : placeAngle + (2 * Math.PI); let animOrigAngle = 3 * Math.PI / 2; let animAngle_verbose = animOrigAngle + unsignedAngle; let animAngle_bounded = fmod(animAngle_verbose, (2 * Math.PI)); console.log('psa', placeAngle) // console.log('pua', unsignedAngle) // console.log('uab', fmod(unsignedAngle, (2 * Math.PI))) // console.log('aoa', animOrigAngle) // console.log('aav', animAngle_verbose) // console.log('aab', animAngle_bounded) let circleRatio = animAngle_bounded / (2 * Math.PI); let delay = circleRatio * sonarDuration; console.log(' ') return delay; } var places = document.getElementsByClassName('place'); var map = document.getElementById('map'); var origLat = map.getAttribute('data-orig-lat'); var origLon = map.getAttribute('data-orig-lon'); for (place of places) { var placeLat = place.getAttribute("data-place-lat"); var placeLon = place.getAttribute("data-place-lon"); if ( (placeLat == origLat) && (placeLon == origLon) ) { place.style.animationName = "none"; place.style.opacity = "1"; } else { console.log(place.getAttribute("data-place-name")) var latDistanceKm = computeLatDistanceInKm(placeLat, origLat); var lonDistanceKm = computeLonDistanceInKm(placeLon, origLon); var delay = computeDelay(latDistanceKm, lonDistanceKm, SONAR_DURATION); place.style.animationDelay = delay + 's'; } }