-
- mugen Museum
- 16F D3 アート
- 秋日偶成
秋日偶成
中国北宋時代の儒学者「程明道」のの七言律詩「秋日偶成（しゅうじつぐうせい）」をアニメーションで表現してみました。
作品を見る
https://etext-music.com/sjgs/
Click/Tap BGM（秋月春風）再生
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>秋日偶成</title>
<script src="d3.min.js"></script>
<link rel="stylesheet" type="text/css" href="style.css">
</head>
<body style="background:black url('paper_00.jpg');">
<center>
<div id="svg"></div>
</center>
<audio id="player"></audio>
<script>
audio = document.getElementById("player");
url="bgm.mp3";
audio.setAttribute("src", url);
audio.volume = 0.5;
document.onclick=function(){audio.play();}
document.ondblclick=function(){audio.pause();}
window.onload = function() {
data=Array.from("閑来無事不従容睡覚東窓日巳紅萬物静見皆自得四時佳興與人同道通天地有形外思入風雲変態中富貴不淫貧賤楽男児到此是豪雄");
対句=[
0,0,0,0,0,0,0,
0,0,0,0,0,0,0,
1,1,1,1,1,1,1,
1,1,1,1,1,1,1,
2,2,2,2,2,2,2,
2,2,2,2,2,2,2,
0,0,0,0,0,0,0,
0,0,0,0,0,0,0
];
押韻=[
0,0,0,0,0,0,0,
0,0,0,0,0,0,3,
0,0,0,0,0,0,0,
0,0,0,0,0,0,3,
0,0,0,0,0,0,0,
0,0,0,0,0,0,3,
0,0,0,0,0,0,0,
0,0,0,0,0,0,3
];
color=["black","orange","green","crimson"]
//color=["silver","orange","green","crimson"]
width=window.innerWidth-60; height=window.innerHeight-60;
w=height/12;
yp=(height-w*4)/2; xp=(width-w*8)/2
gr=d3.select("#svg").append("svg")
.attr("width", width)
.attr("height", height)
.selectAll("text")
.data(data)
.enter()
.append("text")
gr.text(function(d){return(d)})
.attr("y", function(d,i){return(i%7*w)+yp}) //縦
.attr("x", function(d,i){return((7-(parseInt(i/7)))*w)+xp})
.attr("font-size", w+"px")
.attr("font-family", "青柳隷書SIMO2_T")
.attr("opacity",0)
repeat();
function repeat() {
gr.transition()
.delay(function(d,i) {return i * 10;})
.duration(5000)
.attr("fill", "red")
.attr("opacity",1)
.transition()
.delay(function(d,i) {return i * 10;})
.duration(5000)
.attr("fill", function(d,i){return(color[対句[i]])})
.attr("opacity",1)
.transition()
.delay(function(d,i) {return i * 10;})
.duration(5000)
.attr("fill", function(d,i){return(color[押韻[i]])})
.attr("opacity",1)
.on("end",repeat)
}
}
</script>
</body>
</html>
秋日偶成
https://crd.ndl.go.jp/reference/modules/d3ndlcrdentry/index.php?page=ref_view&id=1000066711
程明道（程顥）
https://kotobank.jp/word/%E7%A8%8B%E9%A1%A5-100008
七言律詩
https://kotobank.jp/word/%E4%B8%83%E8%A8%80%E5%BE%8B%E8%A9%A9-520794?fbclid=IwAR2LBC5FJETaofy2uJKcBMY4j-Nh57zI8R9fGQtfKFtscSLAF5wRCukd4T8
BGM（秋月春風）
https://yamazawa.bandcamp.com/track/--109
