Foo Fighters Celestial Navigator

Building a constellation viewer for the browser

Image for post
Image for post
sky.foofighters.com

The Celestial Sphere

Image for post
Image for post

Building the Celestial Sphere

$.getJSON("constellations.json", function(data) {
// Universe
});
celestial = wireframe(
topojson.mesh(astrims, astrims.objects.collection),
new THREE.LineBasicMaterial({ color: 0xFFFFFF })
)
scene.add(celestial);
function wireframe(multilinestring, material) {
var geometry = new THREE.Geometry;

multilinestring.coordinates.forEach(function(line) {
d3.pairs(line.map(vertex), function(a, b) {
geometry.vertices.push(a, b);
});
});

return new THREE.LineSegments(geometry, material);
}
camera.position.y = -200;
camera.position.z = 180 * Math.PI / 180;
camera.rotation.x = 90 * Math.PI / 180;
controls = new THREE.TrackballControls(camera);

Rotate the Celestial Sphere

if (navigator.geolocation) {
navigator.geolocation.getCurrentPosition(function(position) {
// position.coords.latitude
// position.coords.longitude
});
} else {
// Geolocation is not supported by this browser.
}
celestial.rotation.x = (latitude - 90) * Math.PI / 180;
var d       = new Date();
var percent = (d.getHours() / 24 + d.getMinutes() / (60 * 24));
var offset = 45;
var angle = (percent * 360) + offset;
var rotate = - angle * Math.PI / 180;
celestial.rotation.y = - angle * Math.PI / 180;

Stars

Device Orientation

controls = new THREE.DeviceOrientationControls(camera);

Facing North

window.addEventListener("deviceorientation", function(event) {
// event.webkitCompassHeading
});

Transparent Video

output.drawImage(video, 0, 0);
buffer.drawImage(video, 0, 0);
var image = buffer.getImageData(0, 0, 414, 233);imageData = image.data;
alphaData = buffer.getImageData(0, 233, 414, 233).data;
for (var i = 3; i < imageData.length; i += 4) {
imageData[i] = alphaData[i - 1];
}
output.putImageData(image, 0, 0, 0, 0, 414, 233);

Written by

I develop websites for rock 'n' roll bands and get paid in sex and drugs. Previously Silva Artist Management, SoundCloud, and Songkick. Currently: Available

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store