Skip to content

Instantly share code, notes, and snippets.

@nobuhito

nobuhito/README.md

Last active March 18, 2016 01:27
Show Gist options
  • Star 0 You must be signed in to star a gist
  • Fork 0 You must be signed in to fork a gist
  • Save nobuhito/b892f6bf29bbf5978f9d to your computer and use it in GitHub Desktop.
Save nobuhito/b892f6bf29bbf5978f9d to your computer and use it in GitHub Desktop.
Download ZIP
D3.jsを使ってスターウォーズっぽくズンドコキヨシ
Raw
README.md

R2D3_ZUNDOKO

D3.jsの勉強がてらに作ったSTARWARS風な六甲おろしを元にして、ズンドコキヨシバージョンを作ってみました。

  • パソコン用デモとソース → bl.ocks.org

  • モバイル用デモ → bl.ocks.org

  • Qiitaでの紹介ページ → Qiita

  • ズンドコキヨシまとめ → Qiita

  • 以前作ったSTARWARS風六甲おろし → bl.ocks.org

  • STARWARS風六甲おろしの解説 → Qiita

Raw
index.html
<!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>
Raw
r2d3zundoko.js
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