サマーウォーズのアレです。
Last active
October 23, 2019 22:25
-
-
Save shimizu/fde15aa8cf734f1219f8 to your computer and use it in GitHub Desktop.
Summer Wars - World Clock -
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| <!DOCTYPE html> | |
| <meta charset="utf-8"> | |
| <style> | |
| html, body { | |
| margin: 0px; | |
| padding: 0px; | |
| width: 100%; | |
| height: 100%; | |
| } | |
| svg { | |
| width: 960px; | |
| height: 500px; | |
| } | |
| </style> | |
| <body> | |
| <svg></svg> | |
| <script src="https://cdnjs.cloudflare.com/ajax/libs/d3/3.5.3/d3.js"></script> | |
| <script src="https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.10.3/moment-with-locales.min.js"></script> | |
| <script> | |
| (function(){ | |
| "use strict"; | |
| var windowWidht = 960; | |
| var windowHeight = 500; | |
| var svg = d3.select("svg"); | |
| var projection90 = d3.geo.orthographic() | |
| .scale(windowWidht/4) | |
| .rotate([0,0,0]) | |
| .translate([windowWidht / 2, windowHeight / 2]) | |
| .clipAngle(90); | |
| var projection180 = d3.geo.orthographic() | |
| .scale(windowWidht/4) | |
| .rotate([0,0,0]) | |
| .translate([windowWidht / 2, windowHeight / 2]) | |
| .clipAngle(180); | |
| var frontPath = d3.geo.path().projection(projection90); | |
| var backPath = d3.geo.path().projection(projection180); | |
| d3.json("https://gist.githubusercontent.com/shimizu/97c156f7f9137586f784/raw/4be1053346fa88d448c2290c49689634c8102b0a/Landmasses.geojson", function(geojson){ | |
| /************************************************************* | |
| * 地球儀表示 | |
| *************************************************************/ | |
| var stage = svg.append("svg:g"); | |
| //ステージを右23.4度傾ける | |
| stage.attr("transform", "rotate(23.4, "+windowWidht/2+", "+windowHeight/2+")") ; | |
| //地形(裏) | |
| var backMap = stage.append("svg:path") | |
| .attr({ | |
| "d":function(){ return backPath(geojson)}, | |
| "fill-opacity":1, | |
| "fill":"#EDE9F1", | |
| "stroke":"none", | |
| }); | |
| //地形(表) | |
| var frontMap = stage.append("svg:path") | |
| .attr({ | |
| "d":function(){ return frontPath(geojson)}, | |
| "fill-opacity":1, | |
| "fill":"#FD81DB", | |
| "stroke":"none", | |
| }); | |
| //地形を回転させる | |
| var update = function(){ | |
| var i = 0; | |
| return function(){ | |
| i = i+0.2; | |
| projection90.rotate([i,0,0]); | |
| projection180.rotate([i,0,0]); | |
| frontPath = d3.geo.path().projection(projection90); | |
| backPath = d3.geo.path().projection(projection180); | |
| backMap.attr("d", backPath(geojson)); | |
| frontMap.attr("d", frontPath(geojson)); | |
| } | |
| } | |
| setInterval(update(), 100); | |
| /************************************************************* | |
| * 時計表示 | |
| *************************************************************/ | |
| var marginLeft = windowWidht/8; | |
| var marginTop = windowHeight/3 + windowHeight/6; | |
| var textY = 10; | |
| var clockGroup = svg.append("g") | |
| .attr("transform", "translate("+[marginLeft, marginTop]+")") ; | |
| //テキスト背景描画 | |
| var clockRect = clockGroup.append("rect") | |
| .attr({ | |
| "width":"70%", | |
| "height":windowWidht/10, | |
| "fill":"EDE9F1", | |
| "fill-opacity": 0.2 | |
| }) | |
| //テキスト描画 | |
| var clockText = clockGroup.append("text") | |
| .attr({ | |
| "x":"10", | |
| "y":windowWidht/11, | |
| "font-size": 110, | |
| "font-weight":"bold", | |
| "font-family":"arial", | |
| "line-height": 1.5, | |
| "letter-spacing": 5, | |
| "word-spacing": 5 | |
| }); | |
| //テキスト更新 | |
| setInterval(function(){ | |
| clockText.text(moment().format('H:mm:ss:SS')); | |
| }, 1) | |
| }); | |
| })(); | |
| </script> | |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment