D3.jsの勉強がてらに作ったSTARWARS風な六甲おろしを元にして、ズンドコキヨシバージョンを作ってみました。
-
パソコン用デモとソース → bl.ocks.org
-
モバイル用デモ → bl.ocks.org
-
Qiitaでの紹介ページ → Qiita
-
ズンドコキヨシまとめ → Qiita
-
以前作ったSTARWARS風六甲おろし → bl.ocks.org
-
STARWARS風六甲おろしの解説 → Qiita
Last active
March 18, 2016 01:27
-
-
Save nobuhito/b892f6bf29bbf5978f9d to your computer and use it in GitHub Desktop.
D3.jsを使ってスターウォーズっぽくズンドコキヨシ
This file contains hidden or 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> | |
| <html lang="ja"> | |
| <head> | |
| <meta charset="utf-8"> | |
| <script src="https://cdnjs.cloudflare.com/ajax/libs/d3/3.5.5/d3.min.js"></script> | |
| </head> | |
| <body style="background-color: black"></body> | |
| <script src="r2d3zundoko.js"></script> |
This file contains hidden or 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
| var w = window.innerWidth; //800; | |
| var h = window.innerHeight; //200; | |
| var starCount = 100; | |
| var svg = d3.select("body") | |
| .append("svg") | |
| .attr("width", w - 32) | |
| .attr("height", h - 32); | |
| create_star(); | |
| create_wars(); | |
| function create_star() { | |
| var stars = d3.range(0, starCount, 1); | |
| stars.forEach(function(d) { | |
| svg.selectAll("star") | |
| .data(function() { | |
| return [{id: d}]; | |
| }) | |
| .enter() | |
| .append("svg:circle") | |
| .attr("id", function(d) { | |
| return "star_" + d.id; | |
| }) | |
| .style("fill", "white") | |
| .attr("cx", function(d) { | |
| return Math.random() * w; | |
| }) | |
| .attr("cy", function(d) { | |
| return Math.random() * h; | |
| }) | |
| .attr("r", function(d) { | |
| return Math.random() * 1.5; | |
| }); | |
| }); | |
| setInterval(function() { | |
| var id = "#star_" + Math.floor(Math.random() * starCount); | |
| d3.select(id) | |
| .transition() | |
| .duration(500) | |
| .ease("exp") | |
| .attr("r", function() { | |
| return Math.random() * 1.5; | |
| }); | |
| }, 100); | |
| setInterval(function() { | |
| var id = "#star_" + Math.floor(Math.random() * starCount); | |
| d3.select(id) | |
| .transition() | |
| .duration(1000 * Math.random() * 3) | |
| .ease("circle") | |
| .attr("cx", function() { | |
| return (Math.floor(Math.random() * 10) %2 == 0)? 0: w; | |
| }) | |
| .attr("cy", function() { | |
| return Math.random() * h; | |
| }) | |
| .each("end", function() { | |
| d3.select(id).attr("cx",function() { | |
| return Math.random() * w; | |
| }); | |
| }); | |
| }, 3000); | |
| } | |
| function create_wars() { | |
| var lines = getLines(); | |
| for (var i in lines) { | |
| var data = [{"string": lines[i]}]; | |
| var line = svg.selectAll("line") | |
| .data(data) | |
| .enter() | |
| .append("g") | |
| .attr("transform", function(d) { | |
| return "translate(" + (w / 2) + ", " + (h + 200) + ")"; | |
| }); | |
| var text = line.append("svg:text") | |
| .attr("text-anchor", "middle") | |
| .style("font-size", "100px") | |
| .style("stroke", "#F8A21A") | |
| .style("fill", "#E6A946") | |
| .text(function(d) { | |
| return d.string; | |
| }); | |
| line.transition() | |
| .delay(i * 500) | |
| .duration(10000) | |
| .attr("transform", function() { | |
| return "translate(" + (w / 2) + ", 50)"; | |
| }) | |
| .style("opacity",0.8) | |
| .transition() | |
| .duration(1000) | |
| .attr("transform", function() { | |
| return "translate(" + (w / 2) + ", 0)"; | |
| }) | |
| .style("opacity",0) | |
| .each('end', function() { | |
| d3.select(this).remove(); | |
| }); | |
| text.transition() | |
| .delay(i * 500) | |
| .duration(10000) | |
| .style("font-size", "20px") | |
| .style("opacity", 0.8); | |
| } | |
| } | |
| function getLines() { | |
| var words = ["ズン", "ドコ"]; | |
| var zundoko = []; | |
| var history = []; | |
| for (var i = 0; i < 1000; i++) { | |
| zundoko.push(words[Math.trunc(Math.random() * 2)]); | |
| if (zundoko.length > 5) { | |
| zundoko.shift(); | |
| } | |
| history.push(zundoko.join("")); | |
| if (zundoko.join("") == "ズンズンズンズンドコ") { | |
| break; | |
| } | |
| } | |
| history.push("キ・ヨ・シ！"); | |
| return history; | |
| } |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment