チャレンジ精神をもう一度
世界中の多くの国々では人口減少で悩んでいます。開発途上国を除けば、大抵の国で国力が落ちています。40～50年ほど前に作ったインフラも寿命が尽きて新規更新が迫られていますが財政難で思うように進んでいないのが現状です。
日本が元気だった頃、企業も個人も余裕ができたときには、将来への投資に回すという機運が充満していました。そして、誰もが新しいことにチャレンジする気概にあふれていたものです。いっときの豊かな生活に慣れもう我々はいっぱしの老舗（しにせ）であると思うようになり、なにもリスクを負って沈みゆくことはあるまいと殻に閉じ籠るようになりました。やむを得ないことでした。
元気を取り戻したい
創造性を育んで欲しいとの願いから、万華鏡を改造して《チャレンジ精神》を喚起する四つの標語を回転させながら表示してみました。バックグラウンドミュージック：「バダジェフスカ」作曲の『乙女の祈り』を聴きながら士気を高めましょう。
夏休みの自由研究に
もうすぐ夏休みです。夏休みの自由研究にHTMLをマスターしてみませんか。HTMLはホームページやブログなどネット上で表現するために用いる言語です。動画、音楽などを駆使して世界中の人々に情報を伝えるツールです。多くを望まなければ、とても簡単にマスターできます。
子供時代には純粋だった若者は労せず実を得ることを欲するようになります。このような大人には実に難解な言語ということになります。まずはモニタ画面に『Hello World！』を表示してみましょう。テキストエディタを使って12文字を打ち込んでファイルにセーブするだけです。これだけです！これがHTMLマスターの第一歩です。
創造性を育む言葉
動作の核たるソースコード
末尾に万華鏡を背景に彩ってメッセージを動的に回転させて表示するHTML(CSS, JavaScript）のコードを掲示しました。万華鏡描画関数は『p5.js』が提供するサイトを参照させていただきました。54と55行の部分です。ご自分の環境で画面が欠けたりした折にはソースコードを入手して改修してください。Windows11でブラウザChromeにて動作を確認していますがすべての環境で動作を保証するものではありません。ソースコードは夏休みの宿題のたたき台にしてもらって結構です。奮起を期待します。
※※※※※
<html>
<head>
<meta charset="UTF-8">
<title>創造性を育む</title>
<style>
canvas { //sketch2.jsで参照するので削除できない。
z-index:3000;
opacity:0.6;
position:absolute; top:1.8px; right:0px; bottom:0px; left:0px; margin:0 auto; //topなどが0より大きいのは中央寄せの誤差調整
overflow: hidden; // はみだし部分を非表示に
}
.swing0 {
animation: swingEfect0 linear infinite 20s; /* infinite 20s */
transform-origin: 300px 300px; /* 304px 304px / 302 320 338 356 */
border:0px solid green; border-radius:50%; z-index:4500;
}
@keyframes swingEfect0 {
0%{transform: rotate(0deg);} 25%{transform: rotate(90deg);} 50%{transform: rotate(180deg);} 75%{transform: rotate(270deg);} 100%{transform: rotate(360deg);}
}
.s9 {
animation: swingEfect0 linear infinite 20s reverse; /* infinite 20s */
transform-origin: 60px 60px; /* width/2 height/2 */
background: transparent; /* greenyellow */
-webkit-text-stroke:3px blue; /* navy */
-webkit-text-fill-color: aliceblue; /* transparent */
font-size:96px; line-height:1.25em; border:0px solid pink; border-radius:50%; text-align:center;
}
</style>
</head>
<body onLoad="polygon();" style="transform:scale(1.0, 1.0) translate(0px, 0px); overflow:hidden;">
<Div style="width:600px; height:640px; margin:0 auto; border:0px solid cyan; font-size:14px; font-weigt:500; z-index:5000;">
<Div class="swing0" style="position:absolute; top:0px; width:600px; height:600px; background:transparent; overflow:hidden;">
<div id="xaxis" style="position:absolute; left:1.5px; top:300px; width:600px; height:0.025px; opacity:0.2; border:0.025px solid lightgray;"></div>
<div id="yaxis" style="position:absolute; left:300px; top:1.5px; width:0.025px; height:600px; opacity:0.2; border:0.025px solid lightgray;"></div>
<div id="y0" class="s9" style="position:absolute; left:244.0px; top: 24.0px; width:120px; height:120px; border:0px solid cyan;">楽</div>
<div id="y1" class="s9" style="position:absolute; left:373.3px; top: 66.0px; width:120px; height:120px; border:0px solid cyan;">し</div>
<div id="y2" class="s9" style="position:absolute; left:453.2px; top:176.0px; width:120px; height:120px; border:0px solid cyan;">み</div>
<div id="y3" class="s9" style="position:absolute; left:453.2px; top:312.0px; width:120px; height:120px; border:0px solid cyan;">な</div>
<div id="y4" class="s9" style="position:absolute; left:373.3px; top:422.0px; width:120px; height:120px; border:0px solid cyan;">が</div>
<div id="y5" class="s9" style="position:absolute; left:244.0px; top:464.0px; width:120px; height:120px; border:0px solid cyan;">ら</div>
<div id="y6" class="s9" style="position:absolute; left:114.7px; top:422.0px; width:120px; height:120px; border:0px solid cyan;">自</div>
<div id="y7" class="s9" style="position:absolute; left: 34.8px; top:312.0px; width:120px; height:120px; border:0px solid cyan;">由</div>
<div id="y8" class="s9" style="position:absolute; left: 34.8px; top:176.0px; width:120px; height:120px; border:0px solid cyan;">研</div>
<div id="y9" class="s9" style="position:absolute; left:114.7px; top: 66.0px; width:120px; height:120px; border:0px solid cyan;">究</div>
</Div> <!-- 304-300/2+8 304-100/2+8, 304-100/2+8 304-300/2+8 -->
<img width="600" height="600" style="position:absolute; left;0px; top:1.8px; z-index:3000; opacity:1;" src="https://aidesign.lolipop.jp/wp-content/uploads/2018/07/poly-99.png" />
<span id="v0" style="position:absolute; top:544px; z-index:3000; color:darkcyan; font-weigt:bold;">マウス・キー操作</span>
<span id="v1" style="position:absolute; top:563px; z-index:3000;">H:回転制御 △:ぼやけ</span>
<span id="v2" style="position:absolute; top:582px; z-index:3000;">マウスクリック:背景色反転</span>
<span id="v3" style="position:absolute; padding-left:430px; top:589px; z-index:3000; font-size:12px;">©2024 TacM, Ver0.02</span>
<audio id="v4" style="position:absolute; top:605px; width:300px; height:28px; z-index:5000;" src="https://aidesign.lolipop.jp/wp-content/uploads/2018/07/BADARZEWSKA-TheMaidens-Prayer.mp3" loop controls controlslist="nodownload"></audio>
<span id="v5" style='position:absolute; padding-left:300px; top:610px; width:310px; height:50px; color:darkgreen; font-size:18px; z-index:3000;'> バダジェフスカ作曲 乙女の祈り</span>
</Div>
<script src="https://infosmith.biz/scripts/035-kaleidoscope/libraries/p5.min.js"></script>
<script src="https://infosmith.biz/scripts/035-kaleidoscope/sketch.js"></script>
<script type="text/javascript">
const t12="作って描いて楽しむ★鑑賞模倣から独創へ☆楽しみながら修める◇自らプログラミング✤"; //メッセージ 10語
const SIZE=220; //メッセージ中心の回転半径
const BIAS=244; //大回転の中心地
const N=10; //N:頂点数 0 ～ 9
const TextStroke = ["darkmagenta", "darkgreen", "darkred", "dodgerblue"]; //const TextFillColor=["lime", "darkpink", "palevioletred", "cyan"];
var k=0; //カウンター、グローバル変数であること
function polygon(){ //lineタグで12本の直線を引き、多角形を作る
var c=Math.floor(k / N) % 4; //0 0 0 0 0 0 0 0 0 1 1 1 1 1 1 1 1 1 0 0 0 0 0 0 0 0 0 1 1 1 1 1 1 1 1 1
var j=k++ % N; //0 ～ 9
var t=(j-2.5)*Math.PI/5; //-3 -2 -1 0 1 2 3 4 5 6
var p=Math.cos(t)*SIZE+BIAS; //始点-x -60
var q=Math.sin(t)*SIZE+BIAS; //始点-y -60
var b="y"+j; //y0 ～ y9
var o=document.getElementById(b); //obj //console.log(c, j, p, q, b, o);
o.style.left=p+"px"; //x
o.style.top=q+"px"; //y
o.innerHTML=t12[j+N*c]; //set messages
console.log(k, j, b, o.innerHTML);
o.style.WebkitTextStroke = "3px " + TextStroke[c]; //0 1 2 3
setTimeout("polygon()", 1000); //2000 1000 500 250
}
</script>
</body>
</html>