変更する夢

作品を見る
http://etext-music.com/works/svg/D3_6.html

・タイルをタップすると色を変更できます。
・全画面モード（F11）がおすすめ。

<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>変更する夢</title>
<script src="my.js"></script>
<script src="d3.js"></script>
</head>
<body style="margin:0; background-color:black;">
<script>
svg=d3.select("body").append("svg").attr("width",1920-8).attr("height",1080-8)
svg.selectAll()
.data(d3.range(16*9))
.enter()
.append("rect").attr("width",120).attr("height",120).attr("stroke","black").attr("stroke-width",1)
.attr("x",function(d){return ((d+16)%16)*120})
.attr("y",function(d){return Math.floor(d/16)*120})
.attr("fill","snow")
.attr("opacity",function(){return Random(1,8)/10})
.each(loop)
.on("click",function(){d3.select(this).attr("fill",RandomSelect("red","green","blue","gold"))})
.on("dblclick",function(){d3.select(this).attr("fill","snow")})
function loop(){
var c=d3.select(this);
(function repeat(){
t=Random(1000,20000)
c=c
.transition().duration(t)
.attr("opacity",function(){return Random(1,8)/10})
.each("end",repeat)
})();
}
</script>
</body>
</html>