プログラミングの楽しさ
プログラミングは一筋縄ではいきませんが、何度も挑戦して納得のいく結果が得られたときは天にも昇る気持ちです。
ローカル環境で動作しても、公開サーバー上で問題なく動作するとは限りません。それだけ、プログラミングは奥深いといえます。最後はきれいどころの登場で幕引きとなります。
動きを制御するJavaScriptの妙味
動く紋章
サンプルコードについて
一応、納得のいく結果に至りましたのでソースコードを公開します。
<html>
<body onLoad="timer=setInterval(change, 50)">
<audio id="bgm" src="https://aidesign.lolipop.jp/wp-content/uploads/2016/04/casualgirls.mp3" autoplay controls controlsList="nodownload"></audio><span id="hd1" style="font-size:20px; color:navy;">動く紋章</span><BR>
<DIV style="float:left; width:200; height:200; border:0px orange solid;">
<svg width="200" height="200" version="2.0" viewBox="0 0 200 200" style="border:0px solid pink;">
<ellipse id="d0" cx="100" cy="100" transform="rotate(0, 100, 100)" rx="88" ry="25" style="fill:none;stroke:purple;stroke-width:2"></ellipse> <!-- cx=中心のx座標 cy=中心のy座標 rx=半径x方向 ry=半径y方向 -->
<ellipse id="d1" cx="100" cy="100" transform="rotate(30, 100, 100)" rx="88" ry="25" style="fill:none;stroke:blue;stroke-width:2"></ellipse>
<ellipse id="d2" cx="100" cy="100" transform="rotate(60, 100, 100)" rx="88" ry="25" style="fill:none;stroke:green;stroke-width:2"></ellipse>
<ellipse id="d3" cx="100" cy="100" transform="rotate(90, 100, 100)" rx="88" ry="25" style="fill:none;stroke:red;stroke-width:2"></ellipse>
<ellipse id="d4" cx="100" cy="100" transform="rotate(120, 100, 100)" rx="88" ry="25" style="fill:none;stroke:magenta;stroke-width:2"></ellipse>
<ellipse id="d5" cx="100" cy="100" transform="rotate(150, 100, 100)" rx="88" ry="25" style="fill:none;stroke:gold;stroke-width:2"></ellipse>
<text id="lang" x="80" y="105" font-family="sans-serif" font-size="10px" FontWeight="Bold" fill="navy">JavaScript</text>
<text id="copy" x="0" y="8" font-family="sans-serif" font-size="9" FontWeight="Bold" fill="navy">©TacM,2017 Ver0.06</text>
<text id="ref1" x="0" y="198" font-size="9" FontWeight="Bold">参照:フリー音楽素材,甘茶の音楽工房casualgirls</text>
</svg>
</DIV>
<Div id="bj1" style="float:left; width:200; height:200; margin-left:59px;">
<img id="bj2" src="https://aidesign.lolipop.jp/wp-content/uploads/2015/05/miko-1.png" width="81" height="200" alt="The View">
</Div>
<div style="clear:both;"></div>
<p></p>
<script type="text/javascript" charset="Shift_JIS">
const gazo = [ ["https://aidesign.lolipop.jp/wp-content/uploads/2016/05/A-KomachiOno.jpg", 136, 200],
["https://aidesign.lolipop.jp/wp-content/uploads/2016/08/8aed980c1e45aa90bbb2063112b837a3.png", 147, 200],
["https://aidesign.lolipop.jp/wp-content/uploads/2016/05/C-nukada.jpg", 200, 200],
["https://aidesign.lolipop.jp/wp-content/uploads/2016/04/fashion.jpg", 98 , 200],
["https://aidesign.lolipop.jp/wp-content/uploads/2016/05/E-Mannyou.jpg", 156, 200],
["https://aidesign.lolipop.jp/wp-content/uploads/2016/05/F-kimono.png", 87 , 200],
["https://aidesign.lolipop.jp/wp-content/uploads/2016/05/G-yukata1.png", 160, 200],
["https://aidesign.lolipop.jp/wp-content/uploads/2015/05/miko-1.png", 81 , 200] ];
const lady = ["\u24ff小野小町", "\u2776見返り美人", "\u2777額田王", "\u2778カジュアルガール", "\u2779万葉美人", "\u277a浴衣とうちわ", "\u277b花火と夕涼み", "\u277c三月の鮠ヒロイン葉津"];
var timer = 0;
var count = -1; //2400*300 -> 1600*200
document.getElementById("bgm").addEventListener("ended", function(){clearInterval(timer);}, false); //再生完了
function change(){ //楕円（ellips）描画
var second = Math.floor(++count / 20);//秒単位, 0~55
var k = count % 250 * 0.2; //0 1 2 .... 248 249 //0~49, 拡大・縮小
var ry = Math.floor(count / 250) % 2 ? 75 - k : 25 + k; //console.log("COUNT="+count+" "+k+" "+ry);
var left=Math.floor(second / 6) % 8; //0~7
var deg = (count % 6) * 30; //console.log("DEG="+deg+" "+count);
document.getElementById("lang").setAttribute("x", 105-ry);
document.getElementById("lang").setAttribute("font-size", (ry*0.4-2)+"px"); //25~75, 20~70, (8~28)
for(var i=0; i<6; ++i){
document.getElementById("d"+i).setAttribute("ry", ry);
document.getElementById("d"+i).setAttribute("transform", "rotate("+(deg+i*30)+", 100, 100)");
}
//-----------------------------------------------------------------------------------------------------
if(count%120 == 0){ //6秒ごとに8枚の画像を描画する。演奏時間が55秒だからもとに戻る。
document.getElementById("bj1").style = "float:left; width:200; height:200; margin-left:" + (200 - gazo[left][1]) / 2; //マージン左
document.getElementById("bj2").src = gazo[left][0]; //画像ファイル名
document.getElementById("bj2").width = gazo[left][1]; //横幅
document.getElementById("bj2").height = gazo[left][2]; //高さ
document.getElementById("hd1").innerHTML = lady[left]; //タイトル console.log("R="+left+" "+lady[left]+" "+count);
}
}
</script>
</body>
</html>
おわりに
多くの人々がプログラミングの楽しさを発見できますように！