作り方は既報
かつて万華鏡といえば、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>
Result
下左の音楽再生ボタンを押してBGMを流すと和らいだ雰囲気になります。また、R、△（スペース）、Hキーを操作して背景色を反転したり、ぼやけの程度を変えることができます。
次回の予定
次回には万華鏡の描画を動物の絵などで縁取って表現する例を取り上げてみたいと考えています。
おまけ
当ブログにおける夏休みの宿題へのお手伝いは難関かもしれません。初心から事を進めるには時間が少ない場合には、気に入った作品、注目した作品へのリンク先をまとめて発表するのも立派な宿題への回答といえるでしょう。よけいなお世話ですが頑張ってください。