下のピンク枠内をクリックして音声付き本文を世に出してください。
冒頭の文言は朱熹（朱子）の「偶成」の漢詩とされています。
作者については異説もありますが、歳はかない若者の句でないことは確かです。古い時代の漢詩であることは間違いありません。
ほとんどの学校で夏休みが終わります。古今東西、年寄りは若者に対してお節介を焼きたがります。
「自分の若いころの振る舞いを棚上げしてよくいうよ」と世のそしりを受けそうです。
それを超越してものを言うならば『若い時の苦労は買ってでもせよ』ということです。罪滅ぼしに動くメッセージにしました。
冒頭の句の後には「一寸の光陰軽んずべからず…」と続きます。詳しくははなむけの言葉2020を参照ください。漢詩（偶成）が朗読されます。
数回にわたり、日本地図上をクリックしてヒットした都道府県に紐づけられた情報を扱う例を取り上げてきました。今回、地図上のピンポイント位置情報の代わりに、動的に変動する位置情報が多角形の閉空間の内にあるか外にあるかを判定する状況を図示化しました。
指定されたポイントが領域の中に存在するかどうかを判定するのは簡単ではありません。主要なアルゴリズムが2つあります。
今までCrossing Number Algorithmを追いかけてきました。点から正の方向に伸ばしたx軸（半直線）が多角形境界線と交差する回数を数える方式(crossing Number Algorithm)は、この回数が奇数ならば、その点は多角形の内側にあり、偶数ならば外側にあると判定するアルゴリズムです。
これまで、画面上に映し出された地図上を指定した点について内外判定してましたが、今回は福岡県に見立てた8角形の周りを一周するとき、その位置により内に存在するか外に存在するか何回か状態変化します。その状況を図示化しています。
動作は8多角形の周りを半時計方向に円状に移動する点がエリア内にあるか外にあるかを随時表示するものです。外にあると判断されたら白色ではずれと、内にあると判断されたらマゼンタ色でヒットと表示されます。はじめボタンを押下して開始です。
const poly=[130,44, 432,44, 432,343, 232,343, 232,400, 40,400, 40,190, 130,190]; //Array
function pointInPolygon(px, py, Array){ // <<<<< 点の多角形に対する内外判定関数 >>>>> Array:poly 県の形：4 6 8角形 11 15 19
var l=Array.length; // console.log("L", l);//stop20();
var cN=0; // cNが奇数ならば点Pは多角形Tの内側に、偶数ならば外側にあると判定
for(var i=l-2,j=0,yi,yj,cW; i>=0; j=i,i-=2){// Arrayテーブルの大きさ:i:14
yi=Array[i+1]-py; // role-1:上向きの辺。点Pがy軸方向について、始点と終点の間にある。15
yj=Array[j+1]-py; // role-2:下向きの辺。点Pがy軸方向について、始点と終点の間にある。1
if((yi>0)!=(yj>0)&&(cW=sign(yj,yi)) == sign(yj*(Array[i]-px), yi*(Array[j]-px))) cN+=cW; // 判定
} // role-3:ルール1,ルール2を確認することで、ルール3も確認できる。
var r = (Math.abs(cN) % 2) == 1; // role-4:辺は点pよりも右側にある。
return r; // true false
} // ray casting algorithm, cN:crossingNumber, cW:counterClockwise
function sign(a, b){return (a > b) ? 1 : (a < b) ? -1 : 0;} // 両者を比較して、-1 0 1を返す
内外判定は北緯35度上に位置する県名をすべてあげるのに応用することができそうです。
このような例は静的な利用で既に簡単に解決する方法が他にありますが、次のような動的な使い方は貴重です。
自分がこれまでに住んだ県を順に選択する情報をパスワードにすることに応用することができます。
夏休みの終わりが近づいていますがコロナが爆発的な感染を見せ、夏休みの延長・二学期のリモート授業が検討されています。そんな世の流れに対応すべく、HTMLプログラミング上級者向けに都道府県データの取り扱い方を取り上げました。
これまで都道府県の位置や名前、県庁所在地名や場所を覚えるツールとして小学生低学年から義務教育を終えた世代まで参考になる記事を残しています。
その中で47都道府県の位置情報は重宝です。参照させていただいた方々には感謝申し上げます。
これまで日本地図の所定の箇所をクリックして都道府県にまつわるデータを扱う処理はcanvas（グラフィックキャンバス）要素 と CanvasスクリプティングAPIを使用してきましたが、今回はdocument.getElementByIdを使って動的に描画情報を設定するオーソドッ クスな方法を採用しています。
canvasは精巧な図を描くことができますが漢字の書体などに改善の余地がありそうです。ここでは県 名付き日本地図と県名なし日本地図を作り直してくっきりした表現を実現しています。
日本地図の中の対象となる都道府県をクリックしてスポットを当ててクローズアップさせてみましょう。最後に選ばれた県名は記憶され、拡張メニューで参照することができます。
わざわざのプログラミングコードは今回ありませんが、CTRL+Uキーを押下して入手することができます。少し力が付いたらさまざまなコードを参照して芸域を広げてください。
固有データに紐づいた情報を扱うにはそれをコード化することが大切です。今回、都道府県を0～46に引き当てコード別に県の位置、名前、ホームページのURLアドレスなどを定義します。
それらのデータは当ブログも含めてすでに先人によって作られていることが多いです。努力の結晶であるデータを参照してさらに有益な使い方を発見したときには公開して間接的にお礼すると喜ばれることでしょう。
地図データをゼロから作り上げることは並大抵の努力ではなかったと思われます。アナログの地図データをスキャンしてデジタルデータを作ったのではないかと想像します。
最近、県境のデータに若干の誤差があることがわかりました。誤差とは県境の真上をクリックしたとき、ブブーとエラー音が鳴りどの県にも該当せずになることです。
この原因は県境付近に僅かな隙間があるためです。滋賀と岐阜の県境で起きることが見つかっています。時間をかけて調査し隙間をなくせば解決します。
余談ですが四方を海に囲まれた北海道と沖縄を別格として県境を考えるとき、長崎県だけが隣県１で他県は２～８県と隣り合っています。
ここでは教育的なプログラム例を示しました。業務として利用される場合はこれらの誤差を調査し修正して精度の高いプログラミングを目指してください。
これまで筆記体でサインするかのような表現を追求してきました。
Inkscapeでパスデータを作り、出力されたsvgデータをLazyLinePainter に入力して時間差表示用のHTMLプログラムコードを生成してアニメーションを実装していました。
紙媒体と異なり、音楽と同期させることができ多彩な表現が可能になります。
それぞれの専門集団が作成したツールにより作成されるので手順を踏めば難解な部分は多くありませんが、パスデータを含むプログラムコードが大きくなることが難点です。
今回のネオンサイン風表示はLazyLinePainter のようなカッコよい表現はできませんが、アピールするデータはコンパクトでありちょっとしたJavaScriptコードを追加すれば特定イベントに呼応して動的メッセージを出力し、見る人の注意を引き付けることができます。
図やメッセージを一気に表示しないで時間差表示する仕組みを説明します。
原理は紙芝居の本画像の前にフィルター紙を置いてそれを少しずつ横に移動して隠された画像を見せる方法にたとえることができます。
右の図において、フィルターを右方向に移動させると隠れている画像が左部分に現れます。
プログラミングとして一定間隔で動作する関数（setTimeout, setInterval）を使いながらフィルターの幅を随時小さくしフィルターがいつも右寄せになるように設定します。
左の図のように右端は不動のままで幅が小さくなったぶん、左端が右に寄り移動したかのように見せかけます。
幅が０になればフィルターが無いことと同じになり、すべて表示されます。表示方向が右から左の場合、基準になる設定は逆になります。また、表示方向が上から下の場合は幅が高さに変わります。
基本的な処理は以上のとおりですが、俳句や和歌のように表示方向が両移動する場合は、幅と高さを同時に制御します。
ブラウザの再ロードボタン
を押下することによって何度でも動作させることができます。
今回はホームページやブログを表現するとき、表現する文書のデザインを指定するCssにおけるanimation機能を使って揺れる短冊の作成法を取り上げます。
要素をアニメーションさせるCssの機能にTransitionとAnimationがあります。今回、Animationを使用します。animationではtransform rotateとrotateYを使って2種類の回転を制御します。
重ね合わせをするにはdiv要素において、position relative/absoluteとmargin-left/topを指定する方法がありますが、ここでは後者を採用しました。
動的な表現はCssにより制御され、その属性パラメーターを設定しなおすことにより図や文字の表示を変更します。メッセージを切り替えるにはJavaScriptの中でinnerHTML要素の中身を根こそぎ変更します。
音楽の再生とイベントの利用音楽を再生するにはaudio要素にてcontrols指定し、表示されたユーザー・インターフェースの再生ボタンを押下します。
連続再生をするために、addEventListenerにendedを指定して終了イベントを起動して次のBGMと短冊に記すメッセージを切り替えます。
上記で説明したイベント関数のなかで再生する音声オブジェクトのsrc属性を設定し、異なる録音レベルを調整すべく適切なボリューム値を設定します。
<!DOCTYPE html> <!-- 課題7 揺れる短冊にメッセージ -->
<html> <!-- 令和三年 盛夏 summerVacation -->
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width,initial-scale=1.0"> <!-- スマホ対策 -->
</head>
<style type="text/css">
#sticknote { /* 吊り点の回りを回転：風鈴を揺らす */
animation: swing0 linear 10s infinite;
animation-play-state: running; /* running, paused */
transform-origin: center top; /** 中央 上 **/
}
@keyframes swing0 { /* アニメーション揺れの詳細を指定 */
0% { transform: rotate(0deg); }
25% { transform: rotate(5deg); }
50% { transform: rotate(0deg); }
75% { transform: rotate(-5deg); }
100% { transform: rotate(0deg); }
}
#oblongcrd { /* Y軸の回りを回転：短冊のひらひら感を出す */
animation: swing1 linear 7s infinite;
animation-play-state: running; /* running, paused */
}
@keyframes swing1 { /* アニメーション回転の詳細を指定 */
0% { transform: rotateY( 0deg); } /* 0 */
25% { transform: rotateY( 75deg); } /* 90 */
50% { transform: rotateY( 0deg); } /* 180 */
75% { transform: rotateY( -75deg); } /* 270 */
100% { transform: rotateY( 0deg); } /* 360 */
}
</style>
<body>
<DIV id="top" style="width:320px; height:580px; margin:0 auto; background:cyan; border:0px solid pink;">
<Div id="sticknote" style="text-align:center; padding-top:20px; width:320px; height:500px; border:0px solid darkgreen; overflow:hidden;">
<img id="windchime" width="180" height="200" src="https://aidesign.lolipop.jp/wp-content/uploads/2021/08/furin2a.png" style="margin-top:5px; opacity:0.7;">
<div id="oblongcrd" width="180" height="326" style="font-weight:bold;">
<img width="180" height="326" src="https://aidesign.lolipop.jp/wp-content/uploads/2021/08/furin2c.png" style="margin-top:-32px; opacity:0.5;">
<div id="c9" style="margin-left:2px; margin-top:-244px; font-size:24px">🍨</div>
<div id="c0" style="margin-left:1px; margin-top: 6px; font-size:24px">か</div>
<div id="c1" style="margin-left:-9px; margin-top: 7px; font-size:24px">き</div>
<div id="c2" style="margin-left:-22px; margin-top: 2px; font-size:24px">氷</div>
<div id="c3" style="margin-left:-45px; margin-top: 5px; font-size:24px"></div>
</div>
</Div>
<div style="width:300px; height:20px; text-align:center; margin-top:-500px; font-size:22px; color:darkred; font-weight:normal; border:0px solid blue;" id="topmsg">揺れる短冊にメッセージ</div>
<div style="width:300px; margin-left:10px; margin-top:483px; font-size:14px; font-weight:normal; border:0px solid red;">開始↴<span style="padding-left:162px;">TacM, Ver0.02</span></div>
<div style="text-align:center; margin-top:0px; border:0px solid pink;"><audio id="windbell" src="https://aidesign.lolipop.jp/wp-content/uploads/2021/07/furin_19.mp3" controls controlsList="nodownload" style="width:300px"></audio></div>
</DIV>
</body>
<script type="text/javascript"> //ここから < /script > まで動的なプログラミング本体
const events = ["かき氷", "花火大会", "夏まつり", "麦藁帽子", "ひまわり"]; //イベント名称
const emoji5 = ["🍨", "🎆", "🎊", "👒", "🌻"]; //短冊に載せる絵文字
const topColor = ["cyan", "beige"]; //BackGround color
const topMusic = ["07/furin_19.mp3", "08/135.mp3", 1, 0.5]; //BackGround Music, Volume調整用
var i=0; //繰り返しカウンター
console.log("W=", window.screen.width, " H=", window.screen.height, events.length); //画面サイズをデバッグのため表示
var musicObj = document.getElementById("windbell"); //何度も利用するオブジェクトを置き換えておく
musicObj.addEventListener('ended', function(){ //音楽の再生完了を知らせる
if(++i < events.length){ //繰り返す回数
document.getElementById("top").style.background = topColor[i % 2];
document.getElementById("c9").innerHTML = emoji5[i]; //短冊に載せる絵文字
//document.getElementById("c3").innerHTML = ""; //短いメッセージの補正 （拡張時、要）
for(var j=0; j<events[i].length; j++){ //短冊に記すメッセージ
//console.log("c"+j, i, j, events[i][j]);
document.getElementById("c"+j).innerHTML = events[i][j]; //メッセージを切り替える
}
musicObj.src = "https://aidesign.lolipop.jp/wp-content/uploads/2021/"+topMusic[i%2];
musicObj.play(); //風鈴を再鳴動
musicObj.volume = topMusic[i%2+2]; //音量制御
//console.log(i, events[i], events[i].length, musicObj.src, topColor[i % 2], topMusic[i%2+2]);
}
else{document.getElementById("topmsg").innerHTML="終了";} //終わりの処理
}); //イベント関数を閉じる
</script>
</html>
動作の始まりは風鈴（ふうりん）の音の再生ボタン（▶）を押すことです。
動作するひな型があってもオリジナル作品を作成するのは容易ではありません。プログラミングコードには冗長度を許しており、見やすく後で改訂しやすいコードが望まれます。そのため、スペースや改行コードがやたら挿入されています。これらはなくても問題ありませんが、価値の低いコードになります。
理想的なコードにするには経験を積まなくてはなりません。
それはおいおい力が付いて可能になるのでとりあえずは思うような結果の動作になることが大切です。
また、基本的な動作不良は論外ですが、表示位置などはブラウザごとに僅かに異なることがあります。また、クッキーやキャッシュは動作スピードを向上してくれますがプログラムコードや画像を修正したのにすぐに反映されないことがありとまどうばかりです。まずはローカル環境での動作を目指しましょう。
風水害の被災報道が後を絶ちません。豪雨による増水で土砂崩れや家屋倒壊のニュースがひっきりなしです。
「数年に一度、過去に体験したことのない大雨が降る可能性…」の用語が多用されます。
昨年は50年に一度という言葉も聞きましたが、今年も似たような言葉を目にします。記録的の言葉もいやになるほど聞こえてきます。
思った以上に気候変動が激しく言葉の使い方の正否を論じても始まりません。
温暖化は徐々にやってきますが災害は急激に表に現れます。
温暖化の是正は最低100年かかると言われています。このままでは北海道でバナナ栽培が可能になるかも知れません。
土石流による被害はその土地に長年、住んでいたのに初めての体験と語る被災者が多くなっています。
そして、これまでの被害は地域限定であったが、最近は沖縄から北海道まで広範囲に同じ時期に起きることが特徴です。
大雨の被害は温暖化が原因の一端と考えられ、地球規模の対策が必要とされています。
人間の行動はとてつもなく大きくなり、感染症や災害の対策は一国だけでは、もはや手の打ちようがありません。
国のリーダーから特定業種の代弁者のような発言も見られましたが、エビデンスなどという怪しげな言葉でなく、正しい科学的な根拠に基づいて対策を考えてもらいたいものです。
地震への備えは受け身になるのはやむを得ません。一方、地球温暖化への対策は即効薬はありませんが地道な行動を長きにわたって愚直に継続していくことになるでしょう。
強大な科学をもってしても自然に勝つことはできません。
対策できるものは対策を施し、そのほかは避難、共生するなど生き方を考え直すことが必要になるのではないだろうか。機微に富む日本の文化は無くなってしまいそうです。
最近、SDGs、ジェンダーなどの用語が飛び交っています。女性を慮って（おもんぱかって）やさしく接するとそれは余計な気遣い、差別ですと言われそうです。記事のタイトルは宝井其角（たからいきかく）の俳句の一節です。
以下に其角の俳句を筆記体風に挙げましたが、おじいさんが風呂上り、縁台に寝そべって団扇で扇いでいる様が浮かびます。これが女性だとなかなか難しく、男性に生まれてよかったと感心している情景と思われます。
幕末、ペリーに随行した宣教師のサミュエル・ウェルズ・ウィリアムズは、成人男女が人前で大っぴらに裸をさらす行為を「野蛮」と評価していました。
国力の高い欧米に追いつくには欧米文化の吸収が急務と考えた明治政府は明治4年に「裸体禁止令」を出しました。それ後、徐々に男がふんどし一丁で街を闊歩することはなくなったようです。
江戸時代前期に活躍した其角は芭蕉の弟子であり、その句は当時を詠んだものです。女性がやたらふしだらな振る舞いであったわけでなく女性本来の慎み深さが読み取れます。
このような話はどこにでもあり、かな～り前のオリンピックではある国の女性アスリートが腋毛を処理していないことが話題になりました。
突然、音が出るのはよくないです。そのため、ブラウザは記事のロード後に音楽が自動で再生することを禁じています。よって再生ボタンを押下することにより南部風鈴の音色が流れ、宝井其角の俳句が描画されます。
俳句がすべて表示されると風鈴の音は止まります。再びボタンを押すと音の再生だけが継続します。
スマホで「自動回転off」に設定しておくと画面が切れて表示が乱れます。「自動回転on」に設定し画面を横型にして、適宜スクロールしてお楽しみください。
動作についてはすでに描画概要の目標において述べましたが再掲します。「万華鏡を楽しむ」を起動すると太平洋の西端に位置する日本列島とクジラが現れます。
この開始画面に作品の主旨をまとめ表現します。右下に万華鏡の使い方を記し、左下にBGMの制御インターフェース、曲名と作曲者名を表示しています。
前2回は3枚の鏡を丸筒に入れ、中に色とりどりの紙片を入れて回転させて表示される情景を模した電子的表現の万華鏡でした。
今回はそれを発展させ小動物や県の形、五輪マークに象（かたど）られた描画を可能にしています。
BGMの再生ボタンにて史上最大のヒット曲ともいわれている『乙女の祈り』を流すことができます。
音楽再生ボタン（▶）をクリックして開始です。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;">©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;">🄋</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>
上記のサンプルコードはローカル環境で動作します。前述しましたがサーバー上で動作させる場合は上記サンプルコードを次のような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倍ゆっくりになります。また、象り画像をツル、ひょうたん、簡略化した学校の校章などにするには画像を切り替えてください。一つのひな型からオリジナル作品に発展されますように！
かつて万華鏡といえば、3枚のプラ板を使って自作するのが定番でした。いまや電子的な万華鏡作りが一般化しています。
万華鏡の核となる機能を受け持つライブラリーにp5.jsがあり利用者に開放されています。そのライブラリーを使った万華鏡の作り方は当ブログの以下のページで発表済みです。
➊プログラミングの初歩5
❷プログラミングの初歩6
❸万華鏡と万葉を彩る恋歌
p5.jsはクレジット（出版物，新聞記事，テレビ番組などに使用された著作物等の出所を明示する行為）すれば非商業目的で再利用することができます。
著作権のある作品を参照することにおいて、夏休み自由研究の題材に利用することは問題ないと思われます。それを使いやすくした当ブログでまとめたsketch2.jsも自由にお使いください。
今回は、万華鏡を丸円ではなく、愛くるしいパンダ、リス、うさぎなどの小動物やハート形、雲、県の形でかたどった描画を試みています。
このため、paint.net, ペイントなど画像を加工するフリーソフトの使い方を習得すると深みのある作品作りに役立つでしょう。電子的万華鏡では、画像同士や画像の上にメッセージを重ね合わせています。このような表現をすることによって豊かな表現を可能にしてくれます。重ね書きの手法を理解することは必須です。
「万華鏡を楽しむ」を起動すると太平洋の左に位置する日本列島とクジラが現れます。この開始画面に作品の主旨をまとめ表現します。右下に万華鏡の使い方を記し、左下にBGMの制御インターフェース、曲名と作曲者名を表示しています。
<!DOCTYPE html> <!-- KaleidoScopeTiny.html --> <html> <body> <audio style="float:left;" src="https://aidesign.lolipop.jp/wp-content/uploads/2018/07/BADARZEWSKA-TheMaidens-Prayer.mp3" loop controls controlslist="nodownload"></audio> <div style='float:left; width:280px; height:50px; color:darkgreen; font-size:14px; padding-bottom:10px; border:0px solid blue;'> バダジェフスカ作曲『乙女の祈り』 <span style="font-size:12px; color:navy; vertical-align:top; line-height:1.5em;"><BR> R:背景色反転 △:ぼやけ変化 H:回転制御</span> <span style="font-size:8px; color:navy; vertical-align:top; line-height:0.6em;"><BR> ©2021 TacM,Ver001</span> </div> <Div style="position:relative; clear:both;"><img style="position:absolute; left:0px; top:0px;" src="https://aidesign.lolipop.jp/wp-content/uploads/2018/07/poly-99.png"></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> </body> </html>
上記サンプルコードを実装するには、コピー＆ペーストにて例えばKaleidoScopeTiny.htmlファイルに取り込み、このHTMLファイルをローカル環境で実行します。次の実行例は当ブログサーバーにアップロードして次のようなiframeタグにて参照した例です。
<div style="text-align:center"> <iframe src="https://aidesign.lolipop.jp/wp-content/uploads/2021/08/KaleidoScopeTiny.html" width="640" height="690" frameborder="0"></iframe> </div>
下左の音楽再生ボタンを押してBGMを流すと和らいだ雰囲気になります。また、R、△（スペース）、Hキーを操作して背景色を反転したり、ぼやけの程度を変えることができます。
次回には万華鏡の描画を動物の絵などで縁取って表現する例を取り上げてみたいと考えています。
当ブログにおける夏休みの宿題へのお手伝いは難関かもしれません。初心から事を進めるには時間が少ない場合には、気に入った作品、注目した作品へのリンク先をまとめて発表するのも立派な宿題への回答といえるでしょう。よけいなお世話ですが頑張ってください。
この頃、スポーツ、勉学、芸術などの分野において個人の努力というより一家をあげての総力戦のような様相を受けます。
このことを自分が事をなし遂げられなかった言い訳には使いたくありませんが、当たらずとも遠からずでしょう。
詳しい実情はわかりませんが、義務教育の長期休みの宿題は家庭の援護が当たり前のような気がします。
そこで他山の石、路傍の石でしょうが、宿題の完成の一助になればとブログで取り上げます。
料理についてもいえることですが、完成品の寿司、天丼、ピザなどを出前することができます。次に半完成品の冷凍食品、そうざい半製品などが考えられます。最後に様々な食材や調味料を取り揃えて腕を振るう個別料理があります。
PC、タブレットなどで実現可能な宿題を完成させるには、その人の技量にもよりますが、完成品、半完成品、個別作品になります。このブログでは半完成品形式の食事の用意に相当する作品完成を目指します。
万華鏡を作るに当たり、一から手作りする方法は時代にそぐわないことです。多くの基本技や開発ツールは先人が用意しています。後を継いだ者は本質的な点に力を注げるようになっています。
以下の図は今まで作り上げた作品の一部です。
万華鏡を描画する機能はp5.jsライブラリーを使います。万華鏡を描くライブラリーは丸型ではなく下の1図のように四角に描かれるので丸型に描くには2や3のように加工します。総合力と言ってはおこがましいですが、いいものに仕上げるには様々な知識が必要です。
上の図は以下のようなコードで描画されます。
<div style="width:340px; height:24px; border:0px solid red; padding-left:20px;"><b>注:</b>万華鏡を作る準備をしています。</div> <span style="float:left; margin-left:70px;">1</span><span style="padding-left:110px">2</span><span style="padding-left:110px">3</span> <div style="float:left; margin-left:20px; width:100px; height:100px; background:pink; clear:both;"></div> <!--①--> <div style="float:left; margin-left:20px; width:100px; height:100px; background:cyan; border-radius:52px; border:2px solid darkkhaki;"></div> <!--②--> <div style="float:left; margin-left:20px; width:103px; height:103px; background:cyan;"> <!--③--> <img style="width:104px; height:104px;" src="https://aidesign.lolipop.jp/wp-content/uploads/2018/07/poly-99.png"> </div>
他人のものをコピー＆ペーストしていい作品を作ることは難しいです。当ブログでは根本に立ち返って基本をマスターしていただけるような内容になっています。地道な挑戦をご期待申し上げます。
万華鏡を描く部分は次回以降になります。