青と赤の風景 II

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

・全画面モード（F11）がおすすめ。

<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>青と赤の風景 II</title>
<script src="my.js"></script>
<script src="d3.js"></script>
</head>
<body style="margin:0; background-color:black;">
<script>
wx=1920; wy=1080; px=16; py=3;
svg=d3.select("body").append("svg").attr("width",wx-8).attr("height",wy-8)
svg.selectAll()
.data(d3.range(px*py))
.enter()
.append("rect").attr("width",wx/px).attr("height",wy/py).attr("stroke","black").attr("stroke-width",1)
.attr("x",function(d){return (d+px)%px*wx/px})
.attr("y",function(d){return Math.floor(d/px)*wy/py})
.attr("transform",function(){return "skewX(" + Random(-90,90) + ")"})
.attr("transform",function(){return "skewY(" + Random(-90,90) + ")"})
.attr("fill",function(){return RandomSelect("Teal","Deepskyblue","Seagreen","Royalblue","red")})
.attr("opacity",function(){return Random(1,8)/10})
.each(loop)
function loop(){
var c=d3.select(this);
(function repeat(){
t=Random(1000,20000)
c=c
.transition().duration(t)
.attr("transform",function(){return "skewX(" + Random(-90,90) + ")"})
.attr("transform",function(){return "skewY(" + Random(-90,90) + ")"})
.attr("opacity",function(){return Random(1,8)/10})
.each("end",repeat)
})();
}
</script>
</body>
</html>