久米の仙人も欲情

はごろも伝説は日本各地にあります。どれが一般的かはわかりませんが、羽衣（うい、はごろも）をまとった天女（てんにょ）が舞い降りて水浴びをしているところを年老いた男性が覗き見て、あまりの美しさに天に返すのが惜しくなり脱いだはごろもを隠すお話のようです。

いろんな伝承のある中、ここではもっとも俗っぽい内容を取り上げます。

一方、ふくらはぎに見とれる久米仙人伝説もありごっちゃに語り継がれることがあるようです。今回は、雲に乗った仙人が俗界の天女に気を取られ惑わされて神通力を失い転落する画像とSvg(Scalable Vector Graphics、変倍ベクタ図形)による曲線を表示しています。

美人にまつわる伝説には事欠きません。傾城美人、クレオパトラ伝説、楊貴妃、小野小町など美人は歴史を作ったでしょうか。取り上げてみたいものです。

変倍ベクタ曲線の一例

おまけ

妖艶美女十態は横2400px、縦300pxからなる1枚の集合画像です。1枚ずつ描画するにはclip:rectを使っていましたが、ローカル環境で思い通りに動作してもアップロードすると全体が小さく表示されて誤動作します。

《蔵出し秘蔵画像》左の文字列をクリックしてください。

最近、object-fit:coverの存在を知りました。大きな画像から一部分を切り取って表示するのに非常に便利ですが、object-positionと絡んで切り取る位置を決定するのに悩みました。内容を整理できたらソースコードを公開できることでしょう。

回らないホイールキャップのような動き

最も下の動く画像は少し異なる動きをしています。中央の五の文字だけは周辺の五感を示唆する画像と違って回転しています。

五感の画像は背景画像の一部として時計方向に回転しつつ、同じタイミングで反時計方向に自転しているため、常に上向きを保持しています。

「五」の画像は奇妙さを浮きだたせるために周辺の丸い画像と異なる動きにしています。

「回らないホイールキャップ」より

広告に使えるかも

五感に因んで5回転して停止します。車の改造は違法になることがありますが、プログラミングは若者の創造力を育みます。参考になればありがたいです。

メディア共生時代

紙、ラジオ、テレビなどのメディアに加えて電子メディアが共生しています。それぞれ特長がありどれが最良とは一概に言えません。

電子メディアの歴史はまだまだ浅いです。今のところ、電子メディアにおいて人間の五感のうち、目（視覚）、耳（聴覚）、皮膚（触覚）を使うことができます。今回、前者の2つにスポットライトを当ててみました。

オーディオ再生ボタン（▶）をクリックしてスタートです。

一日に一度の家事

一日に一度実施する家事はたくさんあります。子供の数が少なくなって家事で親を助ける風潮はすたれつつありますが、ここでは毎日休むことなく行う家事（今回は4つの任務）を3人で分担する例を考えます。

条件を整理します。公平に分担するには任務を順番に交代する案が浮かびます。7つの家事を7日ごとに交代する場合は、曜日に関連付ける方法がありますが一般的ではありません。

そこで一日に一度を考慮して元旦からの通算日を任務に紐づけます。

算出方法

4つの家事は一つずつずれて担当しますが、3人で担当するので一人は2つの業務を受け持つことになります。

ずらす方法は元旦からの通算日を利用することができます。3月以降の通算日はうるう年で異なるので調整します。この方法を採用すれば月替わりに問題なく対応することができます。

任務を4つずつ365回横に並べ、順に瑠美さん(C)、健次君(B)、太郎君(A)に割り振っていきます。1日に2つの任務を受け持つ担当者は毎回、異なり3日目経って同じ状態に戻ります。

結果の4日分をまとめました。次のようになることでしょう。

実行結果

以下のプログラムコードは日付データを実時間で取り込んでおり、午前0時を過ぎた瞬間に再読み込みボタンをクリックすれば一日、進んだ通算日になるように作成されています。

プログラムコード

<Div style="float:left; width:128px; height:128px; font-weight:bold; border:0px navy solid; margin-top:-6px;">
<div id="ym" style="width:128px; height:28px; font-size:16px; border:0px red solid;"></div>
<div id="dy" style="width:128px; height:60px; font-size:40px; text-align:center; vertical-align:middle; display:table-cell;"></div>
<div id="s6" style="width:120px; height:40px; font-size:20px; border:0px green solid;"></div>
</Div>
<div style="float:left; width:128px; height:128px; border:0px solid red;"><img id="picImage" src="" width="128" height="128" alt="yet"></div>
<div id="housework" style="clear:both; width:250px; height:200px; border:1px solid blue;"></div>
<script type="text/javascript" charset="UTF-8">
const youbi = ["日","月","火","水","木","金","土"];								//曜日の選択肢
const hw = ["犬の散歩", "花に水やり", "風呂の掃除", "トイレ掃除"];				//任務名
const nm = ["太郎", "瑠美", "健次"];											//担当者
var now, year, mon, day, you, k, picFileName;									//変数定義
var	month = [0, 31, 59, 90, 120, 151, 181, 212, 243, 274, 304, 334];			//通算日算出表
	now = new Date(/*"2019-11-19"*/);											//日付と時間の設定
	year = now.getYear();														//1900年からの経過年数
	mon = now.getMonth();														//今日の月(0～11)
	day = now.getDate();														//今日の日
	you = now.getDay();															//今日の曜日
	if ((year%4 == 0 && year%100 != 0) || (year%400 == 0)){						//グレゴリオ暦のうるう年か
		for(var j=2; j<12; ++j)	month[j]++;										//うるう年だから通算日算出表を修正
	}
	k = month[mon]+day-1;														//通算日
	var ym = (1900+year)+"年"+('0'+(mon+1)).slice(-2)+"月";						//YYYY年MM月
	var s6 = youbi[you]+"曜日&nbsp;&nbsp;"+"<span style='color:red;'>"+k+"</span>";
	document.getElementById("ym").innerHTML = ym;								//年月
	document.getElementById("dy").innerHTML = day;								//日
	document.getElementById("s6").innerHTML = s6;								//通算日の表示
	document.getElementById('picImage').onload = function() {					//読み込み完了のイベント関数
		console.log('読み込み完了', document.getElementById('picImage').src, ym, day, s6);
		houseWorking(k);
	};
	var f = "abcdefghijkl".substr(mon, 1);										//12個のファイルを引き当てる
	picFileName = "https://aidesign.lolipop.jp/wp-content/uploads/2019/01/pic12Middle-" + f + ".png"
	console.log('画像ファイル読み込み起動=', picFileName);
	document.getElementById('picImage').src = picFileName;
function houseWorking(tusan){
	//  ここからは家事(houseWork)を分担する処理
	var s="";
	var j = tusan % hw.length;													//通算日から３のモジュロ値を算出
	for(var i=0; i<hw.length; ++i){												//ミッション数に柔軟対応
		var n = (tusan+i) % nm.length;											//担当者
		//console.log("i="+i+" "+n+" "+nm[n]+" "+hw[i]);
		s = s + i + "　" + nm[n] + "　" + hw[i] + "<br/>";
	}
	//console.log("tusan=%d %d\n%s", tusan, j, s);
	document.getElementById("housework").innerHTML = s;						//console.log("S:\n"+s);
}
</script>

おまけ

実行結果において年月日、曜日、通算日の右に描画される季節を代表する画像は、記事の起動時の現在時刻で月ごとに変化する優れものです。JavaScriptプログラミングコードの32～35行に注目ください。

動物の置物

玄関の前に飾る置物には信楽焼のタヌキや招き猫が多いようです。

商品に添えるシンボル絵柄には何がふさわしいかと思いめぐらしました。

カエルは多くの国で縁起の良い動物とされており、今回、蛙について調べてみました。

カエルにまつわる佳言・嘉言

カエルには以下のような効能があるらしい。

さいごに

『井の中の蛙大海を知らず』などカエルについては凡庸なイメージもついて回りますが、上の図のようになかなか愛嬌があります。

ケロヨン、ケロンパなどのことばは蛙に由来しているように感じます。

また、大衆浴場にはケロリンマーク入りの風呂桶がありましたが、今はあまり見かけなくなりました。

カエルについて日ごろの思いを綴りました。

健やかな成長を願う

若者の成長の過程を16枚のイラストで表現しました。成長をひとことで表す画像の外は透明色にしています。

そうすることによって他の画像と重なり合っても違和感を生じさせません。

成長過程を表示する画像はsetTimeoutにより一定間隔で描画され、七五三のお祝いメッセージはLazyLinePainterのdata-llp-delayの機能を利用して時間差表示されます。

お祝いのことばをハート型に配置するにはtranslateで位置決めしますが、当初は横一線に仮表示されたものをカット＆トライで決めていきます。

成長を体感する時間差描画は二式あり、ひとつはハート型の七五三お祝いメッセージ（27文字）です。もうひとつは成長を示す16枚の画像です。

どちらも約44秒で完了し、BGMに同期させています。

若者の成長を祝って

下右の開始ボタンをクリックしてスタートです。

さいごに

この作品はHTMLで記述されライブラリを除いたコードは約100行から成り立っています。

将来、我が国を背負って立つ担い手の成長を祝ってください。

合わせてHTMLプログラミングの妙味を堪能していただけたら幸甚に存じます。

七五三を祝う

当事者にとって子供の成長はうれしいものです。子育てが終わってかなりの時間が経過している世代には、懐かしく安心な対応にはまた違った幸せを感じます。

11月には様々なイベントがありますが、子育て真っ最中の世代には七五三は気合の入るイベントと言えましょう。

当方には着物などの高価なプレゼントはちょっと難しいです。得意のプログラミングで世界に二つとない贈り物を発表します。CTRL+Uにてソースコードを取り出すことができるので参考になれば幸いです。

個別対応にするには

ここでは個人情報でお祝いするわけにはいきませんので、名前や写真は仮のものです。

個別対応にするには基本をしっかり押さえなければなりません。通常、名前などはソースコードで

const  grandChildName  “山田太郎”;　　//孫の名前を定義する

上記のようなコードを見つけて個別の名前に変更するだけでは解決になりません。縁取り漢字を時間遅れで表示するにはpathデータを作る必要があります。

pathデータを手作りするにはかなりの労力が必要です。InkscapeとLazy Line Painterを利用すれば割と楽にpathデータを作ることができます。

自前で開発する意欲のある方は最後までブログを読んでいただけるとありがたいです。

七五三の特別なプレゼント

下右の七五三お祝いのメッセージ 開始ボタンをクリックしてスタートです。ブラウザChrome, Edge, FireFox, Operaでお楽しみください。

自作するには

ここで発表したサンプルコードはHTMLで記述されていますので、開発環境を構築するにはほとんど予算を必要としません。知識を吸収したり根気強い継続の気持ちの方がものを言いそうです。

ソースコードは100行あまりですが、LazyLinePainterを中心に据えておりそのライブラリを利用しています。

LazyLinePainterはSvgを使っているのでSvgの知識を紐解いてください。

それに加えて画像や音声データの扱いに慣れることも必要です。

その他、イベントについて知っておくと処理の制御を理解するのに役立つでしょう。これらについては当ブログで過去に何度も述べています。また、JavaScriptに関する解説書Amazonキンドル本を256円で発表していますので参考にしてください。

かつて、「水と安全はタダ」と言われていましたが水はスーパーで買う時代です。他人が作ったものをタダで拝借するのは実力が付きません。先日、ITを始め多くの分野で日本は先進国から脱落しているとのテレビ番組がありました。

自ら考える習慣を持ち、ちょっとした予算でもいいので先人を評価する気持ちを育てて欲しいです。

参考資料

①アニメーションを語る

②手書き風アニメーション

③多目的時計

④Vivus Instant

⑤SVGでハンドライティングアニメーションを実装する

⑥Lazy Line Painter

紅葉は北から

桜前線は南、紅葉前線は北からと言われます。日本には四季があるおかげで紅葉が見られます。イチョウやもみじが色づく光景は毎年、楽しみのひとつです。

右の図は平地における紅葉の見頃を表しています。待ちきれない場合は少し高い山に登れば早めの鑑賞が可能です。

小学校唱歌の『もみじ』は誰でもが輪唱で歌った経験があることでしょう。

歌詞と曲は著作権保護期間が消滅しているようです。

楽譜、詞、音響再生、背景画像付きで表現してみました。開始ボタンをクリックしてお楽しみください。

開始