This is an example to use A-Frame and D3 together to create a scene, in this case a sunpath.
Next Steps
- Add location drop down.
- Add weather data overlay.
- Add import epw to generate the sun path from an epw weather file.
Built with blockbuilder.org
license: mit |
This is an example to use A-Frame and D3 together to create a scene, in this case a sunpath.
Next Steps
Built with blockbuilder.org
<head> | |
<title>Sunpath using D3 and A-Frame</title> | |
<script src="https://aframe.io/releases/1.0.4/aframe.min.js"></script> | |
<script src="https://raw.githack.com/andreasplesch/aframe-meshline-component/master/dist/aframe-meshline-component.min.js"></script> | |
<script src="https://d3js.org/d3.v4.min.js"></script> | |
<script src="suncalc.js"></script> | |
</head> | |
<body> | |
<a-scene> | |
<a-entity id="line" meshline="lineWidth: 4; color: black"></a-entity> | |
<a-entity id="analemma" meshline="lineWidth: 1; color: gray"></a-entity> | |
<a-sky color="cyan"></a-sky> | |
</a-scene> | |
</body> | |
<script> | |
Date.prototype.stdTimezoneOffset = function() { | |
var jan = new Date(this.getFullYear(), 0, 1); | |
var jul = new Date(this.getFullYear(), 6, 1); | |
return Math.max(jan.getTimezoneOffset(), jul.getTimezoneOffset()); | |
} | |
Date.prototype.isDaylightSaving = function() { | |
return this.getTimezoneOffset() < this.stdTimezoneOffset(); | |
} | |
var radius = 10, | |
lat = 39.95, | |
lon = -75.16; | |
// will be used later to color the suns | |
var color = d3.scaleLinear() | |
.range(["#3182bd", "#f33"]); | |
// create the base plane | |
var scene = d3.select("a-scene"); | |
scene.append('a-circle') | |
.attr("radius", radius) | |
.attr("position", "0 0 0") | |
.attr("rotation", "-90 0 0") | |
.attr("color", "gray"); | |
// draw daily sun curves | |
for (var m = 0; m <= 11; m++){ | |
var points = []; | |
for (var h = 0; h <= 24; h++){ | |
// add a point to curve for every 15 minutes to get a smoother curve | |
for (var i=0; i <= 3; i++){ | |
var dt = new Date(2017, m, 21, h + i / 4); | |
var p = getSunPositionXYZ(radius, dt, lat, lon); | |
points.push(p.join(" ")); | |
// add sun sphere for each hour | |
if (i == 0){ | |
scene.append('a-sphere') | |
.attr("position", p.join(" ")) | |
.attr("radius", radius / 100) | |
.attr("color", "yellow"); | |
} | |
} | |
} | |
// append first point once more | |
var dt = new Date(2017, 1, 21, 0); | |
var p = getSunPositionXYZ(radius, dt, lat, lon); | |
points.push(p.join(" ")); | |
// add a curve for each day | |
scene.append('a-entity') | |
.attr("meshline", "lineWidth: 2; path: " + points.join(",")); | |
} | |
// get analemma positions | |
for (var h = 0; h <= 24; h++){ | |
var points = []; | |
var hour = h; | |
for (var m = 0; m <= 12; m++){ | |
for (var d = 1; d <= 3; d++){ | |
var dt = new Date(2017, m, d * 7, hour); | |
if ( dt.isDaylightSaving() ){ | |
dt = new Date(2017, m, d * 7, hour + 1); | |
} | |
var p = getSunPositionXYZ(radius, dt, lat, lon); | |
points.push(p.join(" ")); | |
} | |
} | |
// add a curve for each hour | |
scene.append('a-entity') | |
.attr("meshline", "lineWidth: 2; path: " + points.join(",")); | |
} | |
function getSunPositionXYZ( radius, time, latitude, longitude ) { | |
/* from https://github.com/ladybug-tools/ladybug-web/blob/gh-pages/analemma-3d/analemma-3d-r18.html */ | |
var sunPosition, x, y, z; | |
var d2r = Math.PI / 180; | |
var r2d = 180 / Math.PI; | |
sunPosition = SunCalc.getPosition( time, latitude, longitude); | |
x = radius * Math.cos( sunPosition.altitude ) * Math.sin( sunPosition.azimuth + Math.PI ); | |
y = radius * Math.cos( sunPosition.altitude ) * Math.cos( sunPosition.azimuth + Math.PI ); | |
z = radius * Math.sin( sunPosition.altitude ); | |
return [x, z, y]; | |
} | |
</script> |
/* | |
(c) 2011-2015, Vladimir Agafonkin | |
SunCalc is a JavaScript library for calculating sun/moon position and light phases. | |
https://github.com/mourner/suncalc | |
*/ | |
(function () { 'use strict'; | |
// shortcuts for easier to read formulas | |
var PI = Math.PI, | |
sin = Math.sin, | |
cos = Math.cos, | |
tan = Math.tan, | |
asin = Math.asin, | |
atan = Math.atan2, | |
acos = Math.acos, | |
rad = PI / 180; | |
// sun calculations are based on http://aa.quae.nl/en/reken/zonpositie.html formulas | |
// date/time constants and conversions | |
var dayMs = 1000 * 60 * 60 * 24, | |
J1970 = 2440588, | |
J2000 = 2451545; | |
function toJulian(date) { return date.valueOf() / dayMs - 0.5 + J1970; } | |
function fromJulian(j) { return new Date((j + 0.5 - J1970) * dayMs); } | |
function toDays(date) { return toJulian(date) - J2000; } | |
// general calculations for position | |
var e = rad * 23.4397; // obliquity of the Earth | |
function rightAscension(l, b) { return atan(sin(l) * cos(e) - tan(b) * sin(e), cos(l)); } | |
function declination(l, b) { return asin(sin(b) * cos(e) + cos(b) * sin(e) * sin(l)); } | |
function azimuth(H, phi, dec) { return atan(sin(H), cos(H) * sin(phi) - tan(dec) * cos(phi)); } | |
function altitude(H, phi, dec) { return asin(sin(phi) * sin(dec) + cos(phi) * cos(dec) * cos(H)); } | |
function siderealTime(d, lw) { return rad * (280.16 + 360.9856235 * d) - lw; } | |
function astroRefraction(h) { | |
if (h < 0) // the following formula works for positive altitudes only. | |
h = 0; // if h = -0.08901179 a div/0 would occur. | |
// formula 16.4 of "Astronomical Algorithms" 2nd edition by Jean Meeus (Willmann-Bell, Richmond) 1998. | |
// 1.02 / tan(h + 10.26 / (h + 5.10)) h in degrees, result in arc minutes -> converted to rad: | |
return 0.0002967 / Math.tan(h + 0.00312536 / (h + 0.08901179)); | |
} | |
// general sun calculations | |
function solarMeanAnomaly(d) { return rad * (357.5291 + 0.98560028 * d); } | |
function eclipticLongitude(M) { | |
var C = rad * (1.9148 * sin(M) + 0.02 * sin(2 * M) + 0.0003 * sin(3 * M)), // equation of center | |
P = rad * 102.9372; // perihelion of the Earth | |
return M + C + P + PI; | |
} | |
function sunCoords(d) { | |
var M = solarMeanAnomaly(d), | |
L = eclipticLongitude(M); | |
return { | |
dec: declination(L, 0), | |
ra: rightAscension(L, 0) | |
}; | |
} | |
var SunCalc = {}; | |
// calculates sun position for a given date and latitude/longitude | |
SunCalc.getPosition = function (date, lat, lng) { | |
var lw = rad * -lng, | |
phi = rad * lat, | |
d = toDays(date), | |
c = sunCoords(d), | |
H = siderealTime(d, lw) - c.ra; | |
return { | |
azimuth: azimuth(H, phi, c.dec), | |
altitude: altitude(H, phi, c.dec) | |
}; | |
}; | |
// sun times configuration (angle, morning name, evening name) | |
var times = SunCalc.times = [ | |
[-0.833, 'sunrise', 'sunset' ], | |
[ -0.3, 'sunriseEnd', 'sunsetStart' ], | |
[ -6, 'dawn', 'dusk' ], | |
[ -12, 'nauticalDawn', 'nauticalDusk'], | |
[ -18, 'nightEnd', 'night' ], | |
[ 6, 'goldenHourEnd', 'goldenHour' ] | |
]; | |
// adds a custom time to the times config | |
SunCalc.addTime = function (angle, riseName, setName) { | |
times.push([angle, riseName, setName]); | |
}; | |
// calculations for sun times | |
var J0 = 0.0009; | |
function julianCycle(d, lw) { return Math.round(d - J0 - lw / (2 * PI)); } | |
function approxTransit(Ht, lw, n) { return J0 + (Ht + lw) / (2 * PI) + n; } | |
function solarTransitJ(ds, M, L) { return J2000 + ds + 0.0053 * sin(M) - 0.0069 * sin(2 * L); } | |
function hourAngle(h, phi, d) { return acos((sin(h) - sin(phi) * sin(d)) / (cos(phi) * cos(d))); } | |
// returns set time for the given sun altitude | |
function getSetJ(h, lw, phi, dec, n, M, L) { | |
var w = hourAngle(h, phi, dec), | |
a = approxTransit(w, lw, n); | |
return solarTransitJ(a, M, L); | |
} | |
// calculates sun times for a given date and latitude/longitude | |
SunCalc.getTimes = function (date, lat, lng) { | |
var lw = rad * -lng, | |
phi = rad * lat, | |
d = toDays(date), | |
n = julianCycle(d, lw), | |
ds = approxTransit(0, lw, n), | |
M = solarMeanAnomaly(ds), | |
L = eclipticLongitude(M), | |
dec = declination(L, 0), | |
Jnoon = solarTransitJ(ds, M, L), | |
i, len, time, Jset, Jrise; | |
var result = { | |
solarNoon: fromJulian(Jnoon), | |
nadir: fromJulian(Jnoon - 0.5) | |
}; | |
for (i = 0, len = times.length; i < len; i += 1) { | |
time = times[i]; | |
Jset = getSetJ(time[0] * rad, lw, phi, dec, n, M, L); | |
Jrise = Jnoon - (Jset - Jnoon); | |
result[time[1]] = fromJulian(Jrise); | |
result[time[2]] = fromJulian(Jset); | |
} | |
return result; | |
}; | |
// moon calculations, based on http://aa.quae.nl/en/reken/hemelpositie.html formulas | |
function moonCoords(d) { // geocentric ecliptic coordinates of the moon | |
var L = rad * (218.316 + 13.176396 * d), // ecliptic longitude | |
M = rad * (134.963 + 13.064993 * d), // mean anomaly | |
F = rad * (93.272 + 13.229350 * d), // mean distance | |
l = L + rad * 6.289 * sin(M), // longitude | |
b = rad * 5.128 * sin(F), // latitude | |
dt = 385001 - 20905 * cos(M); // distance to the moon in km | |
return { | |
ra: rightAscension(l, b), | |
dec: declination(l, b), | |
dist: dt | |
}; | |
} | |
SunCalc.getMoonPosition = function (date, lat, lng) { | |
var lw = rad * -lng, | |
phi = rad * lat, | |
d = toDays(date), | |
c = moonCoords(d), | |
H = siderealTime(d, lw) - c.ra, | |
h = altitude(H, phi, c.dec), | |
// formula 14.1 of "Astronomical Algorithms" 2nd edition by Jean Meeus (Willmann-Bell, Richmond) 1998. | |
pa = atan(sin(H), tan(phi) * cos(c.dec) - sin(c.dec) * cos(H)); | |
h = h + astroRefraction(h); // altitude correction for refraction | |
return { | |
azimuth: azimuth(H, phi, c.dec), | |
altitude: h, | |
distance: c.dist, | |
parallacticAngle: pa | |
}; | |
}; | |
// calculations for illumination parameters of the moon, | |
// based on http://idlastro.gsfc.nasa.gov/ftp/pro/astro/mphase.pro formulas and | |
// Chapter 48 of "Astronomical Algorithms" 2nd edition by Jean Meeus (Willmann-Bell, Richmond) 1998. | |
SunCalc.getMoonIllumination = function (date) { | |
var d = toDays(date), | |
s = sunCoords(d), | |
m = moonCoords(d), | |
sdist = 149598000, // distance from Earth to Sun in km | |
phi = acos(sin(s.dec) * sin(m.dec) + cos(s.dec) * cos(m.dec) * cos(s.ra - m.ra)), | |
inc = atan(sdist * sin(phi), m.dist - sdist * cos(phi)), | |
angle = atan(cos(s.dec) * sin(s.ra - m.ra), sin(s.dec) * cos(m.dec) - | |
cos(s.dec) * sin(m.dec) * cos(s.ra - m.ra)); | |
return { | |
fraction: (1 + cos(inc)) / 2, | |
phase: 0.5 + 0.5 * inc * (angle < 0 ? -1 : 1) / Math.PI, | |
angle: angle | |
}; | |
}; | |
function hoursLater(date, h) { | |
return new Date(date.valueOf() + h * dayMs / 24); | |
} | |
// calculations for moon rise/set times are based on http://www.stargazing.net/kepler/moonrise.html article | |
SunCalc.getMoonTimes = function (date, lat, lng, inUTC) { | |
var t = new Date(date); | |
if (inUTC) t.setUTCHours(0, 0, 0, 0); | |
else t.setHours(0, 0, 0, 0); | |
var hc = 0.133 * rad, | |
h0 = SunCalc.getMoonPosition(t, lat, lng).altitude - hc, | |
h1, h2, rise, set, a, b, xe, ye, d, roots, x1, x2, dx; | |
// go in 2-hour chunks, each time seeing if a 3-point quadratic curve crosses zero (which means rise or set) | |
for (var i = 1; i <= 24; i += 2) { | |
h1 = SunCalc.getMoonPosition(hoursLater(t, i), lat, lng).altitude - hc; | |
h2 = SunCalc.getMoonPosition(hoursLater(t, i + 1), lat, lng).altitude - hc; | |
a = (h0 + h2) / 2 - h1; | |
b = (h2 - h0) / 2; | |
xe = -b / (2 * a); | |
ye = (a * xe + b) * xe + h1; | |
d = b * b - 4 * a * h1; | |
roots = 0; | |
if (d >= 0) { | |
dx = Math.sqrt(d) / (Math.abs(a) * 2); | |
x1 = xe - dx; | |
x2 = xe + dx; | |
if (Math.abs(x1) <= 1) roots++; | |
if (Math.abs(x2) <= 1) roots++; | |
if (x1 < -1) x1 = x2; | |
} | |
if (roots === 1) { | |
if (h0 < 0) rise = i + x1; | |
else set = i + x1; | |
} else if (roots === 2) { | |
rise = i + (ye < 0 ? x2 : x1); | |
set = i + (ye < 0 ? x1 : x2); | |
} | |
if (rise && set) break; | |
h0 = h2; | |
} | |
var result = {}; | |
if (rise) result.rise = hoursLater(t, rise); | |
if (set) result.set = hoursLater(t, set); | |
if (!rise && !set) result[ye > 0 ? 'alwaysUp' : 'alwaysDown'] = true; | |
return result; | |
}; | |
// export as AMD module / Node module / browser variable | |
if (typeof define === 'function' && define.amd) define(SunCalc); | |
else if (typeof module !== 'undefined') module.exports = SunCalc; | |
else window.SunCalc = SunCalc; | |
}()); |