Skip to content

Instantly share code, notes, and snippets.

@erohinaelena
Last active August 29, 2015 14:04
  • Star 0 You must be signed in to star a gist
  • Fork 0 You must be signed in to fork a gist
Star You must be signed in to star a gist
Save erohinaelena/9819c297a3ce7a2e9145 to your computer and use it in GitHub Desktop.
From sunset to sunrise
<html>
<head>
<meta charset="utf-8">
<link href="stars.css" rel="stylesheet">
</head>
<body>
<script src="http://d3js.org/d3.v3.min.js"></script>
<script src="stars.js"></script>
<script>d3.select(self.frameElement).style("height", "680px")</script>
</body>
</html>
.handle {
fill: white;
stroke: white;
}
.axis {
fill: white;
shape-rendering: crispEdges;
}
.axis path, .axis line {
fill: none;
stroke: white;
}
body {
margin: auto;
position: relative;
}
label {
font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
font-size: 14px;
color: #fff;
display: block;
}
form {
position: absolute;
left: 10px;
top: 70px;
}
svg {
position: absolute;
top: 0;
left: 0;
}
var width = 960,
height = 680
var bgColor = "#ffdcdc"
var projection = d3.geo.azimuthalEquidistant()
.scale(width / 4)
.translate([0, 0])
.rotate([180, 270]) // полярная звезда в центре
var center = [width / 2, height / 4]
//canvas
var canvas = d3.select("body").append("canvas")
var ctx = canvas.node().getContext("2d")
var offScreenCanvas = document.createElement('canvas')
var offCtx = offScreenCanvas.getContext('2d')
function getRetinaRatio() {
var devicePixelRatio = window.devicePixelRatio || 1
var backingStoreRatio = [
ctx.webkitBackingStorePixelRatio,
ctx.mozBackingStorePixelRatio,
ctx.msBackingStorePixelRatio,
ctx.oBackingStorePixelRatio,
ctx.backingStorePixelRatio,
1
].reduce(function(a, b) { return a || b })
return devicePixelRatio / backingStoreRatio
}
var ratio = getRetinaRatio()
var scaledWidth = width * ratio
var scaledHeight = height * ratio
canvas.node().width = scaledWidth
canvas.node().height = scaledHeight
canvas
.style("width", width + 'px')
.style("height", height + 'px')
offScreenCanvas.width = scaledWidth
offScreenCanvas.height = scaledHeight
offCtx.scale(ratio, ratio)
offCtx.translate(center[0], center[1])
//svg
var sliderWidth = width - 2 * 20
var x = d3.scale.linear()
.domain([-1, 1])
.range([0, sliderWidth])
.clamp(true);
var topColor = d3.scale.linear()
.domain([-1, -0.9, 0, 0.9, 1])
.range(["#6767c8", "#6767c8","#000313", "#6890B1", "#6890B1"]);
var bottomColor = d3.scale.linear()
.domain([-1, -0.9, 0, 0.9, 1])
.range(["#F39217", "#6767c8","#000313", "#6890B1", "#D49A83"]);
var sliderSvg = d3.select('body').append('svg')
.attr('width', width)
.attr('height', 30)
.append('g')
.attr('transform', 'translate(20,10)')
var sliderG = sliderSvg.append('g');
sliderG
.attr('transform', 'translate(0,5)')
.attr('class', 'axis')
.call(d3.svg.axis()
.scale(x)
.orient('bottom')
.tickSize(20, 20)
.tickValues('')
);
var brush = d3.svg.brush()
.x(x)
.extent([0, 0])
.on('brush', brushed);
var slider = sliderSvg.append('g')
.call(brush);
var handle = slider
.append('circle')
.attr('class', 'handle')
.attr('transform', 'translate(0,10)')
.attr('r', 9)
.attr('cy', -5)
.attr('cx', 0);
slider
.select('.background')
.attr('height', 40);
function brushed() {
if (d3.event.sourceEvent) { // not a programmatic event
targetValue = x.invert(d3.mouse(this)[0]);
move();
} else {
var v = brush.extent()[0];
handle.attr('cx', x(v));
update(v);
}
}
function move() {
if (move.moving) return;
move.moving = true;
d3.timer(function () {
currentValue = targetValue;
slider.call(brush.extent([currentValue, currentValue]))
.call(brush.event);
return !(move.moving = currentValue !== targetValue);
});
}
move.moving = false;
function update(val) {
bgColor = ctx.createLinearGradient(0, 0, 0, height);
bgColor.addColorStop(0, topColor(val))
bgColor.addColorStop(1, bottomColor(val))
stars = constellationStars.map(function(projections){
var s = []
projections.map(function (star) {
var opacity = star.currentOpacity(1 - Math.abs(val))
star.rgba = 'rgba(' + star.rgb.r + ',' + star.rgb.g + ',' + star.rgb.b + ',' + opacity + ')'
if (opacity) s.push(star)
})
return s
})
}
function clearCtx(){
offCtx.clearRect(-center[0], -center[1], width, height)
ctx.clearRect(0, 0, scaledWidth, scaledHeight)
}
function drawSquareStar(star){
offCtx.fillStyle = star.rgba
offCtx.fillRect(star.projection[0], star.projection[1], 1, 1)
}
var constellationStars = []
var stars = []
d3.json("/erohinaelena/raw/ec635d68e8bf55586d40/starData.json", function(error, data) {
var starsMag = []
data.map(function(c){
c.stars.map(function(star){
starsMag.push(star.mag)
})
})
var minMaxMag = d3.extent(starsMag)
console.log(minMaxMag)
var opacityScale = d3.scale.linear()
.domain([minMaxMag[0], 6, minMaxMag[1]])
.range([1, 0.4, 0.2])
data.forEach(function (constellation) {
var projections = constellation.stars.map(function (star) {
var opacity = opacityScale(star.mag)
var D = .1
var Y = (d3.scale.linear()
.domain([minMaxMag[0], 6, minMaxMag[1]])
.range([D, 0.8, 1 - D]))(star.mag)
var currentOpacity = d3.scale.linear()
.domain([0, Y - D, Y + D, 1])
.range([0, 0, opacity, opacity])
var p = projection([-star.ra, star.dec])
if (star.mag < 0) console.log(star.mag, constellation.name, ' opacity: ' + opacity)
return {
rgb: d3.rgb(star.color),
opacity: opacity,
currentOpacity: currentOpacity,
projection: [Math.round(p[0]), Math.round(p[1])]
}
})
constellationStars.push(projections)
})
var angle = 0
var fps = 0
var frames = 0
update(-1)
function draw () {
begin = performance.now()
frames++
clearCtx()
offCtx.fillStyle = bgColor
offCtx.fillRect(-center[0], -center[1], width, height)
offCtx.fillStyle = '#fff'
offCtx.fillText(fps + ' fps', -center[0] + 10, -center[1] + 50)
angle += 0.0001
offCtx.save()
offCtx.rotate(angle)
stars.forEach(function(projections){
projections.forEach(drawSquareStar)
})
offCtx.restore()
ctx.drawImage(offScreenCanvas, 0, 0);
}
function animate(){
window.requestAnimationFrame(animate)
draw()
}
animate()
setInterval(function () {
fps = frames / 10
console.log(fps + ' fps')
frames = 0
}, 10000)
setTimeout(function () {console.log(performance.now() - begin,'ms') })
})
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment