日別アーカイブ: 2021-08-09

夏休みの宿題2

ものづくり筆耕ブログ

動作の概要

動作についてはすでに描画概要の目標において述べましたが再掲します。「万華鏡を楽しむ」を起動すると太平洋の西端に位置する日本列島とクジラが現れます。

この開始画面に作品の主旨をまとめ表現します。右下に万華鏡の使い方を記し、左下にBGMの制御インターフェース、曲名と作曲者名を表示しています。

前2回は3枚の鏡を丸筒に入れ、中に色とりどりの紙片を入れて回転させて表示される情景を模した電子的表現の万華鏡でした。

今回はそれを発展させ小動物や県の形、五輪マークに象（かたど）られた描画を可能にしています。

BGMの再生ボタンにて史上最大のヒット曲ともいわれている『乙女の祈り』を流すことができます。

 

Result

音楽再生ボタン（▶）をクリックして開始です。16種の輪郭枠で万華鏡が象られます。１シーンは4秒間で4×16=64秒で一巡しますが表示とBGMは繰り返されます。ブラウザの終了により動作は終わります。

サンプルコード

<!DOCTYPE html>					<!-- HeavenCreatures.html -->
<html>
<head>
<meta charset="utf-8">
<style>
body {max-width:640px; margin:0 auto;}
#box{
    top: 0;
    left: 50%;
    transform: translateX(-50%);
    z-index:4000;
    overflow: hidden;
}
canvas {						//sketch2.jsで参照するので削除できない。
  display:block;
  position:absolute; top:0; right:0; bottom:10; left:0; margin:auto;
}
</style>
</head>
<body>
<Div id="box" style="position:relative; width:600px; height:640px; border:0px green solid;">
<div id="up0" style="position:absolute; left:0px; top:0px;   widhth:600px; height:75px;  z-index:115; background:white; visibility:hidden; padding-left:600px;"></div>
<img id="siz" style="position:absolute; left:0px; top:0px;   widhth:600px; height:600px; z-index:110;" src="https://aidesign.lolipop.jp/wp-content/uploads/2021/08/earth2021.png" alt="filter">
<div id="up9" style="position:absolute; left:0px; top:525px; widhth:600px; height:75px;  z-index:115; background:white; visibility:hidden; padding-left:600px;">  </div>
<div style="position:absolute; left:0px; top:0px; z-index:2000;">
 <div style="width:450px; height:30px; padding-left:190px; font-size:24px; line-height:2.0em; border:0px solid pink;" id="ttl1">万華鏡を楽しむ<span style="padding-left:110px; font-size:12px;">&copy;2021 TacM,Ver001</span></div>
 <div style="position:absolute; left:435px; top:515px; color:mediumvioletred; font-size:16px; border:0px solid;" id="ttl0">万華鏡描画変化<BR>R:背景色を反転<BR><span style="font-size:11px">△</span>:残像・ぼやけ変化<BR>H:回転を制御</div>
 <div style="position:absolute; left:8px; top:570px; color:maroon;" id="ttl2"><span style="transform:rotate(180deg); display:inline-block;">⬏</span>描画＆BGMスタート</div>
 <div style="position:absolute; left:2px; top:590px; width:310px; height:50px; border:0px solid blue;"><audio id='bgm' src="https://aidesign.lolipop.jp/wp-content/uploads/2018/07/BADARZEWSKA-TheMaidens-Prayer.mp3" style="outline:none;" loop controls controlslist="nodownload"></audio></div>
 <div style="position:absolute; left:310px; top:610px; ">バダジェフスカ作曲,『乙女の祈り』</div>
 <div id="num" style="position:absolute; left:574px; top:605px; width:30px; height:30px; font-size:24px; border:0px solid cyan;">&#x1F10B;</div>
</div>
</Div>
<script src="https://infosmith.biz/scripts/035-kaleidoscope/libraries/p5.min.js"></script>
<script src="https://aidesign.lolipop.jp/wp-content/uploads/2018/07/sketch2.js"></script>	<!-- createCanvas(600, 600) -->
<script type="text/javascript">
const SUJI01_16="①②③④⑤⑥⑦⑧⑨⑩⑪⑫⑬⑭⑮⑯";			//①～⑯
var ct=0;
var evnt = document.getElementById("bgm");                  //BGMのイベントオブジェクト
	evnt.addEventListener('play', function(){               //プレイイベント//console.log("PLAY/PAUSE", j);
		document.getElementById('ttl0').style.visibility=document.getElementById('ttl1').style.visibility=document.getElementById('ttl2').style.visibility="hidden";
		document.getElementById('up0').style.visibility=document.getElementById('up9').style.visibility="visible";
		document.getElementById('siz').width="600";
		document.getElementById('siz').height="450";
		document.getElementById('siz').style="position:absolute; left:0px; top:75px; widhth:600px; height:450px; z-index:110;";
		start();											//かたどり関数を起動
    }, true);												//trueで本来のイベント処理を続行させる
function start(){											//一定間隔でかたどり画像を切り替える関数
var t = ct++ % SUJI01_16.length;							//カウンターのカウントアップ & 画像枚数 Programming/moviePic/IMG
	document.getElementById('siz').src = "https://aidesign.lolipop.jp/wp-content/uploads/2017/04/beta-" + "0123456789ABCDEF".substr(t, 1) + ".png?ver=001";	//フィルタリングする画像情報を設定する
	//console.log(t, document.getElementById('siz').src);
	document.getElementById('num').innerHTML = SUJI01_16[t];//番号を切り替える
	setTimeout("start();", 4000);							//ゆったりとした描画を実現
}
</script>
</body>
</html>

 

サンプルコードの説明

  1. 14～17行で定義したcanvasは35行で組み込まれるsketch2.jsの中で参照する
  2. 40～47行はaudio再生ボタンを操作した時のイベント関数を定義している
  3. 46行でかたどり関数を呼び出す
  4. 48～54行はかたどり関数の本体であり変数tにより処理される
  5. 49行のモジュロ演算子（％）により用意した輪郭画像で象（かたど）りが元に戻り繰り返される

動作上の注意

上記のサンプルコードはローカル環境で動作します。前述しましたがサーバー上で動作させる場合は上記サンプルコードを次のようなiframeタグを用いて埋め込みます。

<div style="text-align:center">
  <iframe src="https://aidesign.lolipop.jp/wp-content/uploads/2021/08/HeavenlyCreatures.html" width="630" height="740" frameborder="0"></iframe>
</div>


ブログで記事を書く時、文中に動作するHTMLプログラミングコードを直接、埋め込むことができます。紙による表現では到底、無理な話ですが電子メディアならではの特長です。一方、ブログを主催している部分でもHTMLで記述されており、ブログ内で定義したコードがその部分まで波及して動作不良になることがあります。iframeはその影響を限定的に扱ってくれます。

さいごに

冒頭において昔ならではの万華鏡が通販で格安（400円～）で入手できることを挙げました。楽しみ方が多面的でありうれしい限りです。

お子様が二人いる場合、一方でクラシック版万華鏡、他方で電子万華鏡を研究対象にしてその結果を交換し合い、考察欄に載せることをアドバイスされてはいかがでしょう。

おまけ

取り上げたサンプルコードは動作が確認されています。画像の切り替えを遅くするには53行の4000を8000にすれば2倍ゆっくりになります。また、象り画像をツル、ひょうたん、簡略化した学校の校章などにするには画像を切り替えてください。一つのひな型からオリジナル作品に発展されますように！