Implement site with actual library
This commit is contained in:
Brandon Tilley
parent
90cd2e1b19
commit
9d91e43cf3
2
dist/planetaryjs-noplugins.js
vendored
2
dist/planetaryjs-noplugins.js
vendored
@ -2,7 +2,7 @@
|
||||
* Copyright (c) 2013 Brandon Tilley
|
||||
*
|
||||
* Released under the MIT license
|
||||
* Date: 2013-12-21T19:00:54.881Z
|
||||
* Date: 2013-12-21T20:06:15.792Z
|
||||
*/
|
||||
(function (root, factory) {
|
||||
if (typeof define === 'function' && define.amd) {
|
||||
|
||||
10
dist/planetaryjs.js
vendored
10
dist/planetaryjs.js
vendored
@ -2,7 +2,7 @@
|
||||
* Copyright (c) 2013 Brandon Tilley
|
||||
*
|
||||
* Released under the MIT license
|
||||
* Date: 2013-12-21T19:00:54.985Z
|
||||
* Date: 2013-12-21T20:06:15.617Z
|
||||
*/
|
||||
(function (root, factory) {
|
||||
if (typeof define === 'function' && define.amd) {
|
||||
@ -249,7 +249,7 @@
|
||||
var options = options || {};
|
||||
options.color = options.color || 'white';
|
||||
options.ttl = options.ttl || 2000;
|
||||
options.size = options.size || 500;
|
||||
options.angle = options.angle || 5;
|
||||
pings.push({ lat: lat, lng: lng, time: new Date(), options: options });
|
||||
};
|
||||
|
||||
@ -267,13 +267,13 @@
|
||||
};
|
||||
|
||||
var drawPing = function(planet, context, now, ping) {
|
||||
var dT = now - ping.time;
|
||||
var alpha = 1 - (dT / ping.options.ttl);
|
||||
var alive = now - ping.time;
|
||||
var alpha = 1 - (alive / ping.options.ttl);
|
||||
var color = d3.rgb(ping.options.color);
|
||||
color = "rgba(" + color.r + "," + color.g + "," + color.b + "," + alpha + ")";
|
||||
context.strokeStyle = color;
|
||||
var circle = d3.geo.circle().origin([ping.lng, ping.lat])
|
||||
.angle(dT / ping.options.size)();
|
||||
.angle(alive / ping.options.ttl * ping.options.angle)();
|
||||
context.beginPath();
|
||||
planet.path.context(context)(circle);
|
||||
context.stroke();
|
||||
|
||||
2
dist/planetaryjs.min.js
vendored
2
dist/planetaryjs.min.js
vendored
@ -1,2 +1,2 @@
|
||||
/*! Planetary.js 0.0.0 | (c) 2013 Brandon Tilley | Released under MIT License */
|
||||
!function(n,t){"function"==typeof define&&define.amd?define(["d3","topojson"],t):"object"==typeof exports?module.exports=t(require("d3"),require("topojson")):n.planetaryjs=t(n.d3,n.topojson,n)}(this,function(n,t,o){"use strict";var e=null;o&&(e=o.planetaryjs);var i=[],r=function(t,o,e){n.timer(function(){t.context.clearRect(0,0,o.width,o.height);for(var n=0;n<e.onDraw.length;n++)e.onDraw[n]()})},l=function(n,t){for(var o=0;o<i.length;o++)t.unshift(i[o]);0==t.length&&(s.plugins.earth&&n.loadPlugin(s.plugins.earth()),s.plugins.pings&&n.loadPlugin(s.plugins.pings()));for(var o=0;o<t.length;o++)t[o](n)},u=function(n,t,o){if(o.onInit.length){var e=0,i=function(n){var t=o.onInit[e];t.length?t(function(){e++,n()}):(t(),e++,setTimeout(n,0))},l=function(){e>=o.onInit.length?r(n,t,o):i(l)};i(l)}else r(n,t,o)},a=function(n,t,o,e){l(n,o),n.canvas=t,n.context=t.getContext("2d"),u(n,t,e)},s={plugins:{},noConflict:function(){return o.planetaryjs=e,s},loadPlugin:function(n){i.push(n)},planet:function(){var t=[],o={onInit:[],onDraw:[]},e={draw:function(n){a(e,n,t,o)},onInit:function(n){o.onInit.push(n)},onDraw:function(n){o.onDraw.push(n)},loadPlugin:function(n){t.push(n)},withSavedContext:function(n){if(!this.context)throw new Error("No canvas to fetch context for");this.context.save(),n(this.context),this.context.restore()}};return e.projection=n.geo.orthographic().clipAngle(90).precision(0),e.path=n.geo.path().projection(e.projection),e}};return s.plugins.topojson=function(t){return function(o){o.onInit(function(e){if(t.world)o.world=t.world,setTimeout(e,0);else{var i=t.file||"world-110m.json";n.json(i,function(n,t){if(n)throw new Error("Could not load JSON "+i);o.world=t,e()})}})}},s.plugins.oceans=function(n){return function(t){t.onDraw(function(){t.withSavedContext(function(o){o.beginPath(),t.path.context(o)({type:"Sphere"}),o.fillStyle=n.fill||"black",o.fill(),0!=n.stroke&&(o.strokeStyle=n.stroke,o.stroke())})})}},s.plugins.land=function(n){return function(o){var e=null;o.onInit(function(){e=t.feature(o.world,o.world.objects.land)}),o.onDraw(function(){o.withSavedContext(function(t){t.beginPath(),o.path.context(t)(e),0!=n.fill&&(t.fillStyle=n.fill||"white",t.fill()),n.stroke&&(t.strokeStyle=n.stroke,t.stroke())})})}},s.plugins.borders=function(n){return function(o){var e=null;o.onInit(function(){var n=o.world.objects.countries;e=t.mesh(o.world,n,function(n,t){return n.id!==t.id})}),o.onDraw(function(){o.withSavedContext(function(t){t.beginPath(),o.path.context(t)(e),t.strokeStyle=n.stroke||"gray",t.stroke()})})}},s.plugins.earth=function(n){var n=n||{},t=n.topojson||{},o=n.oceans||{},e=n.land||{},i=n.borders||{};return function(n){s.plugins.topojson(t)(n),s.plugins.oceans(o)(n),s.plugins.land(e)(n),s.plugins.borders(i)(n)}},s.plugins.pings=function(){var t=[],o=function(n,o,e){var e=e||{};e.color=e.color||"white",e.ttl=e.ttl||2e3,e.size=e.size||500,t.push({lat:n,lng:o,time:new Date,options:e})},e=function(n,o,e){for(var r=[],l=0;l<t.length;l++){var u=t[l],a=e-u.time;a<=u.options.ttl&&(r.push(u),i(n,o,e,u))}t=r},i=function(t,o,e,i){var r=e-i.time,l=1-r/i.options.ttl,u=n.rgb(i.options.color);u="rgba("+u.r+","+u.g+","+u.b+","+l+")",o.strokeStyle=u;var a=n.geo.circle().origin([i.lng,i.lat]).angle(r/i.options.size)();o.beginPath(),t.path.context(o)(a),o.stroke()};return function(n){n.addPing=o,n.onDraw(function(){var t=new Date;n.withSavedContext(function(o){e(n,o,t)})})}},s});
|
||||
!function(n,t){"function"==typeof define&&define.amd?define(["d3","topojson"],t):"object"==typeof exports?module.exports=t(require("d3"),require("topojson")):n.planetaryjs=t(n.d3,n.topojson,n)}(this,function(n,t,o){"use strict";var e=null;o&&(e=o.planetaryjs);var i=[],r=function(t,o,e){n.timer(function(){t.context.clearRect(0,0,o.width,o.height);for(var n=0;n<e.onDraw.length;n++)e.onDraw[n]()})},l=function(n,t){for(var o=0;o<i.length;o++)t.unshift(i[o]);0==t.length&&(c.plugins.earth&&n.loadPlugin(c.plugins.earth()),c.plugins.pings&&n.loadPlugin(c.plugins.pings()));for(var o=0;o<t.length;o++)t[o](n)},u=function(n,t,o){if(o.onInit.length){var e=0,i=function(n){var t=o.onInit[e];t.length?t(function(){e++,n()}):(t(),e++,setTimeout(n,0))},l=function(){e>=o.onInit.length?r(n,t,o):i(l)};i(l)}else r(n,t,o)},a=function(n,t,o,e){l(n,o),n.canvas=t,n.context=t.getContext("2d"),u(n,t,e)},c={plugins:{},noConflict:function(){return o.planetaryjs=e,c},loadPlugin:function(n){i.push(n)},planet:function(){var t=[],o={onInit:[],onDraw:[]},e={draw:function(n){a(e,n,t,o)},onInit:function(n){o.onInit.push(n)},onDraw:function(n){o.onDraw.push(n)},loadPlugin:function(n){t.push(n)},withSavedContext:function(n){if(!this.context)throw new Error("No canvas to fetch context for");this.context.save(),n(this.context),this.context.restore()}};return e.projection=n.geo.orthographic().clipAngle(90).precision(0),e.path=n.geo.path().projection(e.projection),e}};return c.plugins.topojson=function(t){return function(o){o.onInit(function(e){if(t.world)o.world=t.world,setTimeout(e,0);else{var i=t.file||"world-110m.json";n.json(i,function(n,t){if(n)throw new Error("Could not load JSON "+i);o.world=t,e()})}})}},c.plugins.oceans=function(n){return function(t){t.onDraw(function(){t.withSavedContext(function(o){o.beginPath(),t.path.context(o)({type:"Sphere"}),o.fillStyle=n.fill||"black",o.fill(),0!=n.stroke&&(o.strokeStyle=n.stroke,o.stroke())})})}},c.plugins.land=function(n){return function(o){var e=null;o.onInit(function(){e=t.feature(o.world,o.world.objects.land)}),o.onDraw(function(){o.withSavedContext(function(t){t.beginPath(),o.path.context(t)(e),0!=n.fill&&(t.fillStyle=n.fill||"white",t.fill()),n.stroke&&(t.strokeStyle=n.stroke,t.stroke())})})}},c.plugins.borders=function(n){return function(o){var e=null;o.onInit(function(){var n=o.world.objects.countries;e=t.mesh(o.world,n,function(n,t){return n.id!==t.id})}),o.onDraw(function(){o.withSavedContext(function(t){t.beginPath(),o.path.context(t)(e),t.strokeStyle=n.stroke||"gray",t.stroke()})})}},c.plugins.earth=function(n){var n=n||{},t=n.topojson||{},o=n.oceans||{},e=n.land||{},i=n.borders||{};return function(n){c.plugins.topojson(t)(n),c.plugins.oceans(o)(n),c.plugins.land(e)(n),c.plugins.borders(i)(n)}},c.plugins.pings=function(){var t=[],o=function(n,o,e){var e=e||{};e.color=e.color||"white",e.ttl=e.ttl||2e3,e.angle=e.angle||5,t.push({lat:n,lng:o,time:new Date,options:e})},e=function(n,o,e){for(var r=[],l=0;l<t.length;l++){var u=t[l],a=e-u.time;a<=u.options.ttl&&(r.push(u),i(n,o,e,u))}t=r},i=function(t,o,e,i){var r=e-i.time,l=1-r/i.options.ttl,u=n.rgb(i.options.color);u="rgba("+u.r+","+u.g+","+u.b+","+l+")",o.strokeStyle=u;var a=n.geo.circle().origin([i.lng,i.lat]).angle(r/i.options.ttl*i.options.angle)();o.beginPath(),t.path.context(o)(a),o.stroke()};return function(n){n.addPing=o,n.onDraw(function(){var t=new Date;n.withSavedContext(function(o){e(n,o,t)})})}},c});
|
||||
@ -5,8 +5,6 @@
|
||||
<link href='http://fonts.googleapis.com/css?family=Source+Sans+Pro:400,700|Open+Sans:300italic,400,300,700' rel='stylesheet' type='text/css'>
|
||||
<link type="text/css" rel="stylesheet" href="semantic/css/semantic.min.css">
|
||||
<link type="text/css" rel="stylesheet" href="css/planetaryjs.css">
|
||||
<script type='text/javascript' src="js/d3.v3.min.js"></script>
|
||||
<script type='text/javascript' src="js/topojson.v1.min.js"></script>
|
||||
|
||||
<meta charset="utf-8" />
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
|
||||
@ -18,7 +16,7 @@
|
||||
<i class='globe icon'></i>Planetary.js
|
||||
</a>
|
||||
<span class='spacer hide-on-mobile'></span>
|
||||
<a class='item minor' href='download.html'>
|
||||
<a class='item minor' href='https://github.com/BinaryMuse/planetary.js/releases'>
|
||||
<i class='download icon'></i><span class='hide-on-mobile'>Download</span>
|
||||
</a>
|
||||
<a class='item minor' href='examples.html'>
|
||||
@ -35,6 +33,9 @@
|
||||
<div class='content container'>
|
||||
<%- yield %>
|
||||
</div>
|
||||
<script type="text/javascript" src="js/planetaryjs.js"></script>
|
||||
<script type='text/javascript' src="js/lib/d3.v3.min.js"></script>
|
||||
<script type='text/javascript' src="js/lib/topojson.v1.min.js"></script>
|
||||
<script type="text/javascript" src="js/lib/planetaryjs.min.js"></script>
|
||||
<script type="text/javascript" src="js/homepage.js"></script>
|
||||
</body>
|
||||
</html>
|
||||
|
||||
@ -100,3 +100,7 @@ canvas {
|
||||
text-align: center;
|
||||
}
|
||||
}
|
||||
|
||||
.no-underline {
|
||||
text-decoration: none;
|
||||
}
|
||||
|
||||
@ -27,7 +27,7 @@
|
||||
</div>
|
||||
|
||||
<div class='ui buttons'>
|
||||
<a class='ui green labeled icon button' href='download.html'><i class='icon download'></i>Download</a>
|
||||
<a class='ui green labeled icon button' href='https://github.com/BinaryMuse/planetary.js/releases'><i class='icon download'></i>Download</a>
|
||||
<div class='or'></div>
|
||||
<a class='ui labeled button' href='https://github.com/BinaryMuse/planetary.js'>View Source</a>
|
||||
</div>
|
||||
@ -35,18 +35,18 @@
|
||||
|
||||
<div class='eight wide column left floated'>
|
||||
<div class='ui panel homepage-globe-canvas'>
|
||||
<canvas height='350' width='350' style="width: 350px; height: 350px;" id="homepage-globe-canvas"></canvas>
|
||||
<div style="width: 350px; text-align: center; display: inline-block;">
|
||||
<div class='ui pointing label'>
|
||||
<a href='https://github.com/BinaryMuse/planetary.js/blob/master/site/public/js/homepage.js'
|
||||
class='detail no-underline'><i class='icon code'></i> View the source for this example</a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
|
||||
<!-- <div class='ui page grid center aligned'> -->
|
||||
<!-- <div class='sixteen wide column center aligned'> -->
|
||||
<!-- <h1>Explore Further</h1> -->
|
||||
<!-- </div> -->
|
||||
<!-- </div> -->
|
||||
|
||||
|
||||
<div class='ui page grid'>
|
||||
<div class='sixteen wide column'>
|
||||
<div class='ui horizontal divider'>
|
||||
|
||||
64
site/public/js/homepage.js
Normal file
64
site/public/js/homepage.js
Normal file
@ -0,0 +1,64 @@
|
||||
(function() {
|
||||
var earth = planetaryjs.planet();
|
||||
// The `earth` plugin draws the oceans and the land; it's actually
|
||||
// a combination of several separate built-in plugins.
|
||||
earth.loadPlugin(planetaryjs.plugins.earth({
|
||||
topojson: { file: 'world-110m.json' },
|
||||
oceans: { fill: '#000080' },
|
||||
land: { fill: '#339966' },
|
||||
borders: { stroke: '#008000' }
|
||||
}));
|
||||
// The `pings` plugin draws animated pings on the globe.
|
||||
earth.loadPlugin(planetaryjs.plugins.pings());
|
||||
// Load our custom `autorotate` plugin; see below.
|
||||
earth.loadPlugin(autorotate(10));
|
||||
// Set up the globe's initial scale, offset, and rotation.
|
||||
earth.projection.scale(175).translate([175, 175]).rotate([0, -10, 0]);
|
||||
|
||||
// Every few hundred milliseconds, we'll draw another random ping.
|
||||
var colors = ['red', 'yellow', 'white', 'orange', 'purple', 'cyan'];
|
||||
setInterval(function() {
|
||||
var lat = Math.random() * 170 - 85;
|
||||
var lng = Math.random() * 360 - 180;
|
||||
var color = colors[Math.floor(Math.random() * colors.length)];
|
||||
earth.addPing(lat, lng, { color: color, ttl: 2000, angle: Math.random() * 10 });
|
||||
}, 250);
|
||||
|
||||
var canvas = document.getElementById('homepage-globe-canvas');
|
||||
// Special code to handle high-density displays (e.g. retina, some phones)
|
||||
// In the future, Planetary.js will handle this by itself (or via a plugin).
|
||||
if (window.devicePixelRatio == 2) {
|
||||
canvas.width = 700;
|
||||
canvas.height = 700;
|
||||
context = canvas.getContext('2d');
|
||||
context.scale(2, 2);
|
||||
}
|
||||
// Draw that globe!
|
||||
earth.draw(canvas);
|
||||
|
||||
// This plugin will automatically rotate the globe around its vertical
|
||||
// axis a configured number of degrees every second.
|
||||
function autorotate(degPerSec) {
|
||||
// Planetary.js plugins are functions that take a `planet` instance
|
||||
// as an argument...
|
||||
return function(planet) {
|
||||
var lastTick = null;
|
||||
// ...and configure hooks into certain pieces of its lifecycle.
|
||||
planet.onDraw(function() {
|
||||
if (!lastTick) {
|
||||
lastTick = new Date();
|
||||
} else {
|
||||
var now = new Date();
|
||||
var delta = now - lastTick;
|
||||
// This plugin uses the built-in projection (provided by D3)
|
||||
// to rotate the globe each time we draw it.
|
||||
var rotation = planet.projection.rotate();
|
||||
rotation[0] += degPerSec * delta / 1000;
|
||||
if (rotation[0] >= 180) rotation[0] -= 360;
|
||||
planet.projection.rotate(rotation);
|
||||
lastTick = now;
|
||||
}
|
||||
});
|
||||
};
|
||||
};
|
||||
})();
|
||||
2
site/public/js/lib/planetaryjs.min.js
vendored
Normal file
2
site/public/js/lib/planetaryjs.min.js
vendored
Normal file
@ -0,0 +1,2 @@
|
||||
/*! Planetary.js 0.0.0 | (c) 2013 Brandon Tilley | Released under MIT License */
|
||||
!function(n,t){"function"==typeof define&&define.amd?define(["d3","topojson"],t):"object"==typeof exports?module.exports=t(require("d3"),require("topojson")):n.planetaryjs=t(n.d3,n.topojson,n)}(this,function(n,t,o){"use strict";var e=null;o&&(e=o.planetaryjs);var i=[],r=function(t,o,e){n.timer(function(){t.context.clearRect(0,0,o.width,o.height);for(var n=0;n<e.onDraw.length;n++)e.onDraw[n]()})},l=function(n,t){for(var o=0;o<i.length;o++)t.unshift(i[o]);0==t.length&&(c.plugins.earth&&n.loadPlugin(c.plugins.earth()),c.plugins.pings&&n.loadPlugin(c.plugins.pings()));for(var o=0;o<t.length;o++)t[o](n)},u=function(n,t,o){if(o.onInit.length){var e=0,i=function(n){var t=o.onInit[e];t.length?t(function(){e++,n()}):(t(),e++,setTimeout(n,0))},l=function(){e>=o.onInit.length?r(n,t,o):i(l)};i(l)}else r(n,t,o)},a=function(n,t,o,e){l(n,o),n.canvas=t,n.context=t.getContext("2d"),u(n,t,e)},c={plugins:{},noConflict:function(){return o.planetaryjs=e,c},loadPlugin:function(n){i.push(n)},planet:function(){var t=[],o={onInit:[],onDraw:[]},e={draw:function(n){a(e,n,t,o)},onInit:function(n){o.onInit.push(n)},onDraw:function(n){o.onDraw.push(n)},loadPlugin:function(n){t.push(n)},withSavedContext:function(n){if(!this.context)throw new Error("No canvas to fetch context for");this.context.save(),n(this.context),this.context.restore()}};return e.projection=n.geo.orthographic().clipAngle(90).precision(0),e.path=n.geo.path().projection(e.projection),e}};return c.plugins.topojson=function(t){return function(o){o.onInit(function(e){if(t.world)o.world=t.world,setTimeout(e,0);else{var i=t.file||"world-110m.json";n.json(i,function(n,t){if(n)throw new Error("Could not load JSON "+i);o.world=t,e()})}})}},c.plugins.oceans=function(n){return function(t){t.onDraw(function(){t.withSavedContext(function(o){o.beginPath(),t.path.context(o)({type:"Sphere"}),o.fillStyle=n.fill||"black",o.fill(),0!=n.stroke&&(o.strokeStyle=n.stroke,o.stroke())})})}},c.plugins.land=function(n){return function(o){var e=null;o.onInit(function(){e=t.feature(o.world,o.world.objects.land)}),o.onDraw(function(){o.withSavedContext(function(t){t.beginPath(),o.path.context(t)(e),0!=n.fill&&(t.fillStyle=n.fill||"white",t.fill()),n.stroke&&(t.strokeStyle=n.stroke,t.stroke())})})}},c.plugins.borders=function(n){return function(o){var e=null;o.onInit(function(){var n=o.world.objects.countries;e=t.mesh(o.world,n,function(n,t){return n.id!==t.id})}),o.onDraw(function(){o.withSavedContext(function(t){t.beginPath(),o.path.context(t)(e),t.strokeStyle=n.stroke||"gray",t.stroke()})})}},c.plugins.earth=function(n){var n=n||{},t=n.topojson||{},o=n.oceans||{},e=n.land||{},i=n.borders||{};return function(n){c.plugins.topojson(t)(n),c.plugins.oceans(o)(n),c.plugins.land(e)(n),c.plugins.borders(i)(n)}},c.plugins.pings=function(){var t=[],o=function(n,o,e){var e=e||{};e.color=e.color||"white",e.ttl=e.ttl||2e3,e.angle=e.angle||5,t.push({lat:n,lng:o,time:new Date,options:e})},e=function(n,o,e){for(var r=[],l=0;l<t.length;l++){var u=t[l],a=e-u.time;a<=u.options.ttl&&(r.push(u),i(n,o,e,u))}t=r},i=function(t,o,e,i){var r=e-i.time,l=1-r/i.options.ttl,u=n.rgb(i.options.color);u="rgba("+u.r+","+u.g+","+u.b+","+l+")",o.strokeStyle=u;var a=n.geo.circle().origin([i.lng,i.lat]).angle(r/i.options.ttl*i.options.angle)();o.beginPath(),t.path.context(o)(a),o.stroke()};return function(n){n.addPing=o,n.onDraw(function(){var t=new Date;n.withSavedContext(function(o){e(n,o,t)})})}},c});
|
||||
@ -1,87 +0,0 @@
|
||||
projection = d3.geo.orthographic()
|
||||
.scale(175)
|
||||
.translate([175, 175])
|
||||
.clipAngle(90)
|
||||
.precision(0)
|
||||
|
||||
zoom = d3.behavior.zoom()
|
||||
.scale(projection.scale())
|
||||
.scaleExtent([50, 500])
|
||||
.on 'zoom', ->
|
||||
projection.scale(d3.event.scale)
|
||||
|
||||
canvas = d3.select('.homepage-globe-canvas').selectAll('canvas')
|
||||
.data(d3.range(1))
|
||||
.enter().append('canvas')
|
||||
.attr('width', 350)
|
||||
.attr('height', 350)
|
||||
.call (canvas) ->
|
||||
if window.devicePixelRatio == 2
|
||||
canvas[0][0].width = 700
|
||||
canvas[0][0].height = 700
|
||||
context = canvas[0][0].getContext('2d')
|
||||
context.scale(2, 2)
|
||||
|
||||
path = d3.geo.path()
|
||||
.projection(projection)
|
||||
|
||||
pings = []
|
||||
addPing = (pos) ->
|
||||
pings.push { pos: pos, time: Date.now() }
|
||||
|
||||
setInterval (->
|
||||
lat = Math.random() * 180 - 90
|
||||
lng = Math.random() * 360 - 180
|
||||
|
||||
addPing([lat, lng])
|
||||
), 300
|
||||
|
||||
d3.json "world-110m.json", (error, world) ->
|
||||
land = topojson.feature(world, world.objects.land)
|
||||
borders = topojson.mesh world, world.objects.countries, (a, b) ->
|
||||
a.id != b.id
|
||||
globe = type: "Sphere"
|
||||
|
||||
lastRotation = Date.now()
|
||||
rotate = [0, -5, 0]
|
||||
|
||||
velocity = -0.50
|
||||
d3.timer ->
|
||||
canvas.each (i) ->
|
||||
now = Date.now()
|
||||
difference = now - lastRotation
|
||||
lastRotation = now
|
||||
rotate[i] -= velocity * difference / 100
|
||||
context = @getContext('2d')
|
||||
projection.rotate(rotate)
|
||||
|
||||
context.clearRect(0, 0, window.innerWidth, window.innerHeight)
|
||||
|
||||
context.beginPath()
|
||||
path(globe)
|
||||
context.fillStyle = '#000080'
|
||||
context.fill()
|
||||
|
||||
context.beginPath()
|
||||
context.fillStyle = '#339966'
|
||||
path.context(context)(land)
|
||||
context.fill()
|
||||
|
||||
context.strokeStyle = '#008000'
|
||||
context.beginPath()
|
||||
path.context(context)(borders)
|
||||
context.stroke()
|
||||
|
||||
context.strokeStyle = '#fff'
|
||||
context.lineWidth = 1
|
||||
currentTime = Date.now()
|
||||
for ping in pings
|
||||
difference = (currentTime - ping.time) # milliseconds
|
||||
alpha = 1 - (difference / 2000)
|
||||
context.strokeStyle = "rgba(255,255,255,#{alpha})"
|
||||
circle = d3.geo.circle().origin(ping.pos).angle(difference / 500)()
|
||||
context.beginPath()
|
||||
path.context(context)(circle)
|
||||
context.stroke()
|
||||
pings = (ping for ping in pings when currentTime - ping.time <= 2000)
|
||||
null
|
||||
@ -107,7 +107,7 @@
|
||||
var options = options || {};
|
||||
options.color = options.color || 'white';
|
||||
options.ttl = options.ttl || 2000;
|
||||
options.size = options.size || 500;
|
||||
options.angle = options.angle || 5;
|
||||
pings.push({ lat: lat, lng: lng, time: new Date(), options: options });
|
||||
};
|
||||
|
||||
@ -125,13 +125,13 @@
|
||||
};
|
||||
|
||||
var drawPing = function(planet, context, now, ping) {
|
||||
var dT = now - ping.time;
|
||||
var alpha = 1 - (dT / ping.options.ttl);
|
||||
var alive = now - ping.time;
|
||||
var alpha = 1 - (alive / ping.options.ttl);
|
||||
var color = d3.rgb(ping.options.color);
|
||||
color = "rgba(" + color.r + "," + color.g + "," + color.b + "," + alpha + ")";
|
||||
context.strokeStyle = color;
|
||||
var circle = d3.geo.circle().origin([ping.lng, ping.lat])
|
||||
.angle(dT / ping.options.size)();
|
||||
.angle(alive / ping.options.ttl * ping.options.angle)();
|
||||
context.beginPath();
|
||||
planet.path.context(context)(circle);
|
||||
context.stroke();
|
||||
|
||||
Loading…
Reference in New Issue
Block a user