D3.jsの勉強がてらに作ったSTARWARS風な六甲おろしを元にして、ズンドコキヨシバージョンを作ってみました。
-
パソコン用デモとソース → bl.ocks.org
-
モバイル用デモ → bl.ocks.org
-
Qiitaでの紹介ページ → Qiita
-
ズンドコキヨシまとめ → Qiita
-
以前作ったSTARWARS風六甲おろし → bl.ocks.org
-
STARWARS風六甲おろしの解説 → Qiita
D3.jsの勉強がてらに作ったSTARWARS風な六甲おろしを元にして、ズンドコキヨシバージョンを作ってみました。
パソコン用デモとソース → bl.ocks.org
モバイル用デモ → bl.ocks.org
Qiitaでの紹介ページ → Qiita
ズンドコキヨシまとめ → Qiita
以前作ったSTARWARS風六甲おろし → bl.ocks.org
STARWARS風六甲おろしの解説 → Qiita
<!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> |
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; | |
} |