月別アーカイブ: 2021年7月

風鈴の音が出る暑中見舞い

改訂の動機

先日、風鈴を背景にした暑中見舞いはがきを作成しました。パソコンでデザインしたのでスマホでは表示が乱れてしまいました。

固定電話とパソコンの保有率が漸減しているのに、スマホの保有率はうなぎ上りです。スマホ上の表現に気を使った改訂版です。

芭蕉が、奥の細道の旅で奥州藤原氏が栄華を誇った場所・平泉の衣川にて栄達を夢見て奮戦した武士たちの生きざまを詠んだ句を掲げました。

Result

暑中お見舞い申し上げます
令和三年 夏本番
©2021 TacM, Ver1.06
 開 始
/* 0*/ /*夏*/ /*草*/ /*や*/ /*兵*/ /*ど*/ /*も*/ /*が*/ /*夢*/ /*の*/ /*跡*/ /*芭*/ /*蕉*/ /*な*/ /*つ*/ /*く*/ /*さ*/ /*つ*/ /*わ*/ /*も*/ /*の*/ /*ゆ*/ /*め*/ /*あ*/ /*と*/ /*ば*/ /*し*/ /*ょ*/ /*う*/

留め書き

いままで、主にPC用にブログを書いてきました。ここらで宗旨替えをしてスマホに傾注していくことにしました。PC上においてスマホの動作を確認するツールとして、Google Chrome Developper Toolがあります。Windowsでは F12(または Shift + Ctrl + I )でツールを起動してEmulationタグを開くとあります。

最近のDevelopper ToolにはEmulationのメニューが見当たらないのでToggle device toolbarで起動しました。5.6インチのスマホでは違和感なく表示されています。レスポンシブデザインの入り口に立ったばかりです。これから、じりじり試していきます。

風鈴を揺らす一例

時代は進む

コロナ対策の会見に見られるように近頃のテレビ、ラジオ、インターネットでは、情報伝達、ゲームの中でフリップ、立て看板、バックグラウンドミュージックなどを組み合わせた多彩な表現を試みています。

年賀状や暑中見舞いをするに当たり動画を挨拶媒体に使ったり、パブリックビューイングを駆使し電子卒業証書授与の卒業式も行われているようです。

lineなどの絵文字やgif画像を使えば、その表現は割と簡単にできますが、お相手の好みに合った詩やBGMはそうそう見当たりません。そこでとっておきの作品の作り方をまとめました。

最初でもあり、風鈴の静止画像をanimation効果で揺らした例を取り上げました。

風鈴の部位の名称、回転の中心点、回転基軸を追加した左図にて説明を進めます。

 

 

風鈴(ふうりん)を揺らす準備

HTMLのCSS機能にanimationがあります。animationの基本的な解説は別書に譲ることにし、実態に近い風鈴の揺れの表示例を示します。画像を作ったり説明のため、上図のほか図(1)を用意しました。

風鈴の静止画像は図(1)のように傾けたものが自然ですが、振り子のように回転させる場合は直立画像が考えやすいので基本画像は図(2)とします。

図に傾斜を付けるにはpaint.netを使いました。図を読み込み、レイヤー回転ロール8.00などと回転角を入力します。

風鈴の揺れを実態に近づけるため、2種類の回転を付けるべく吊り紐・鈴(図3)と舌・短冊(図4)に分けます。

 

作成した実際の画像が図(3)、図(4)です。升目状の背景は透明色を意味しています。背景の透明色は必須です。

また、図(4)の上部の空白も回転中心を設定するために欠かすことはできません。

 

背景を透明色にするにはpaint.netが便利です。paint.netを起動し、画像を読み込み、ツール魔法の杖を選択し、硬度を10%程度に下げて透明色にするエリアを選択し随時Deleteキーで透明化(表示は升目)します。

吊り紐の中もきちんと透明にします。また、硬度を小さな値にしておかないと望まない箇所も透明になることがあります。

風鈴の揺らし方

【概要】
風鈴全体を振り子のように左右に揺らす一方、短冊は縦軸を中心に時計方向・反時計方向に回転させ風にそよぐひらひら感を出す。すなわち、短冊は振り子のような揺れとひらひらを出す揺れの二重回転をする。

  1. 図(5)に示すようにA要素を親要素とし子要素としてB要素とC要素を定義して分割して風鈴を描く。
  2. A要素を左右に揺れるようにkeyframesに定義。回転中心はA要素の最上かつ中央部にする。回転はrotateを使う。
  3. C要素をY軸を回転軸にしてrotateYで回転させる。
  4. 2つの画像がなるべく同期しないようにanimation完了時間を別々にする。最適値は試行錯誤で見つかる。
  5. 風鈴の音を鳴らすにはmp3の音声データを用意して、audio要素に定義した音声オブジェクトをplay関数で再生、ここでは自動描画しており、自動再生はブラウザの制限に抵触するので、織り込まない。開始ボタンを設ける方式を採用すれば解決する。
  6. 起動後5秒間はA要素にbackground-colorを指定して風鈴の揺らぎをわかりやすくしている。本式の表現ではこの指定はしない。

Result

当初は風鈴が揺れるだけです。5秒後に短冊がひらひらと揺らぎ始めます。

考察

2種類の回転で風鈴の揺れを表現するとかなり本物らしくなりました。これらを発展させて複雑な動きに挑戦してください。

summer2021greeting

山頭火の自由律俳句描画を待って、QRコードをクリックすると哀愁ただよう民謡が流れて新しい展開になります。最後までお聴きいただくとクマとペンギンのイラストが現れます。

風鈴の揺れをアニメーション効果で表現し、その上、音を追加しました。最近のブラウザは音声の自動スタートが許可されていません。そのため、開始ボタンを新設しました。

ストーリーが展開され後ほど現れる右下のQRコードは、メールアドレスが不明で住所が既知の知人に、ハガキにて挨拶する場合に利用するためのものです。

 

暑中お見舞い申し上げます
令和三年 盛夏
©2021 TacM, Ver1.03
 開 始
/* 0*/ /*夕*/ /*立*/ /*が*/ /*洗*/ /*っ*/ /*て*/ /*い*/ /*っ*/ /*た*/ /*茄*/ /*子*/ /*を*/ /*も*/ /*ぐ*/ /* 1*/ /*山*/ /*頭*/ /*火*/ /* 2*/ /*ゆ*/ /*う*/ /* 3*/ /*だ*/ /*ち*/ /* 4*/ /*あ*/ /*ら*/ /* 5*/ /*な*/ /* 6*/ /*す*/

マウス移動軌跡のその後

一気に解決は至難

企業合併を経験したメガバンクのシステムは信頼性において中々、終息しておりません。

既存のものを温存しながら新しい方式を実現することは極めて難解です。

前回、「マウスによる滑らかな表現」を発表しましたが、制約がないにもかかわらず不備が目立っていました。

今回、マウスカーソルの制御において思うような動作が得られなかった点を改訂しました。

末尾に試作の作品集を掲載しました。巧みにカーソルを移動してユニークな作品に挑戦してはいかがでしょう。

RESULT

 『マウスによる滑らかな表現』 ©2021 TacM V1.00 
 CTRLキー:マウス移動を有効化, ESCAPEキー:メッセージと背景を切り替える(繰り返し)

作品集

プログラムコード

<html>
<Div id="base" onmousemove="trail(event);" style="margin:0 auto; width:960px; height:600px; background:#faffff; border:1px solid blue; font-size:48px; color:chocolate; position:relative; overflow:hidden;">
<div style="width:960px; font-size:16px; color:black;"><span style="color:deeppink; font-weight:bold"> 『マウスによる滑らかな表現』 </span>&copy;2021 TacM V1.00 <span id="dbg" style="color:firebrick; font-weight:bold;"><!--&emsp;&emsp;マウスを使って弓型、波型メッセージを作成する</span>--></div>
<div style="width:960px; font-size:16px; color:black;"><b>&nbsp;CTRLキー:</b>マウス移動を有効化,&emsp;<b>ESCAPEキー:</b>メッセージと背景を切り替える(繰り返し)</div>
<div id="ms0"  style="width:90px; height:90px; position:absolute; left:700px; top: 65px; border:0px solid green;">コ</div>
<div id="ms1"  style="width:90px; height:90px; position:absolute; left:795px; top:160px; border:0px solid green;">ロ</div>
<div id="ms2"  style="width:90px; height:90px; position:absolute; left:810px; top:282px; border:0px solid green;">ナ</div>
<div id="ms3"  style="width:90px; height:90px; position:absolute; left:733px; top:400px; border:0px solid green;">熱</div>
<div id="ms4"  style="width:90px; height:90px; position:absolute; left:589px; top:484px; border:0px solid green;">中</div>
<div id="ms5"  style="width:90px; height:90px; position:absolute; left:413px; top:512px; border:0px solid green;">症</div>
<div id="ms6"  style="width:90px; height:90px; position:absolute; left:234px; top:480px; border:0px solid green;">対</div>
<div id="ms7"  style="width:90px; height:90px; position:absolute; left:120px; top:384px; border:0px solid green;">策</div>
<div id="ms8"  style="width:90px; height:90px; position:absolute; left: 73px; top:275px; border:0px solid green;">し</div>
<div id="ms9"  style="width:90px; height:90px; position:absolute; left:110px; top:175px; border:0px solid green;">っ</div>
<div id="ms10" style="width:90px; height:90px; position:absolute; left:180px; top:100px; border:0px solid green;">か</div>
<div id="ms11" style="width:90px; height:90px; position:absolute; left:270px; top: 60px; border:0px solid green;">り</div>
<img id="bk" style="position:absolute; left:245px; top:44px; opacity:0.2;" src="https://aidesign.lolipop.jp/wp-content/uploads/2012/08/furin.png" width="436" height="560">
</Div>
<body>
<script Language="JavaScript">
const fg = ["2012/08/furin.png",                            436, 560, 245044,	//風鈴
			"2013/08/0d8c0a79cac95019e62fbb9f59420491.png", 413, 500, 225070,	//白いカサブランカ
			"2021/04/flower_huji_9083.png",                 589, 500, 170090,	//藤の花
			"2016/08/frog.png",                             730, 500, 100080];	//カエル
const Message = ["たくさんの折紙作る夏休み", "暑中お見舞い申し上げます", "夏休みは自転車に挑戦する", "コロナ熱中症対策しっかり"];
const MsColor = ["deepskyblue", "lime", "darkviolet", "chocolate"];	//mouse.html
const COUNT = 12;
const STEP = 6;							//マウス移動の追跡に影響、大きいほど追跡が緩慢になる
var mx = [700, 795, 810, 733, 589, 413, 234, 120,  73, 110, 180, 270];
var my = [ 65, 160, 282, 400, 484, 512, 480, 384, 275, 175, 100,  60];
var mvcnt = mn = mousemoveFlag = dbgFlag = 0;
	var rect = document.getElementById('base');
	console.log("BASE", rect.getBoundingClientRect().left, rect.getBoundingClientRect().top);
	document.addEventListener('keydown', logKey);					//キーイベント
function logKey(e) {					//キーの押下で起動
	console.log("押されたキーのコード : " + e.keyCode + " " + e.key, Message.length, mn);
	if(e.key == "Escape"){				//現状を再描画, メッセージと背景を切り替える
		mn = (++mn) % Message.length;	//定義したメッセージ数で繰り返す
		var j=mn*4;		  //index  name   width    height   left                      top
		//console.log("MN", mn, j, fg[j], fg[j+1], fg[j+2], Math.floor(fg[j+3]/1000), fg[j+3]%1000);
		var na = "https://aidesign.lolipop.jp/wp-content/uploads/" + fg[j];
		document.getElementById("bk").src = na;										//src
		document.getElementById("bk").width  = fg[j+1];								//width
		document.getElementById("bk").height = fg[j+2];								//height
		document.getElementById("bk").style.left = Math.floor(fg[j+3]/1000)+"px";	//left
		document.getElementById("bk").style.top = fg[j+3]%1000 + "px";				//top

		for(var i=0; i<12; ++i){
			msLeftTop(i, mn);			//left, top, MsColor, Message
			//console.log(i, mx[i], my[i], Message[mn][i], MsColor[mn]);
		}
	}
	if(e.key == "Control")	mousemoveFlag=~mousemoveFlag;	//CTRLキーの押下でマウス移動を有効にする
	if(e.key == "Alt")		dbgFlag=~dbgFlag;				//ALTキーの押下でデバッグ機能を有効にする
}
function trail(event){					//マウス移動で起動
	if(mousemoveFlag==0)return false;	//マウス移動はまだ無効扱い
	var basex=Math.round(rect.getBoundingClientRect().left);
	var basey=Math.round(rect.getBoundingClientRect().top);
	if(dbgFlag)document.getElementById("dbg").innerHTML=mvcnt+" : "+event.x+" "+event.y+" "+basex+" "+basey;
	if (++mvcnt % STEP) return false;
	mx[COUNT] = event.x-basex;			//0
	my[COUNT] = event.y-basey;			//0 1 2 3 4 5 6 7 8 9 10 11   12
	for(var i=0; i<COUNT; i++){
		mx[i] = mx[i+1];
		my[i] = my[i+1];
		msLeftTop(i, Message.length);	//left, top
	}
	return false;
}
function msLeftTop(i, mn){				//'msi' set left/top
	var id='ms'+i;
	document.getElementById(id).style.left = mx[i]+"px";
	document.getElementById(id).style.top  = my[i]+"px";
	if(mn>=Message.length)	return;		//メッセージの色と文言の設定は省略
	document.getElementById(id).style.color = MsColor[mn];
	document.getElementById(id).innerHTML = Message[mn][i];
	return;
}
</script>
</body>
</html>

マウスによる滑らかな表現

マウスを使ってなだらかな表現を試みる

マウス移動のイベントをとらえてマウス軌跡を追うようにメッセージを表現します。まず、CTRLキーを押下してマウス移動を有効にします。それから、Escapeキーにて用意した4つのメッセージを切り替えます。

 

マウスを程よい速度で移動させ、渦巻き状、弓型、波型のメッセージに挑戦してください。思うようなデザインに仕上がったらPrintScreenキーで画像を保存することができます。また、ソースコードを改造して特定のキー押下によりディスクに書き込み保存するように機能追加することも可能です。

Result

マウスを動かすと軌跡が移動 『マウスによる滑らかな表現』 ©2021 TacM V0.01
CTRLキー:マウス移動を有効化, ESCAPEキー:メッセージを切り替える(繰り返し)

 

プログラムコード

<html>
<head>
</head>
<div style="width:960px;">マウスを動かすと軌跡が移動 <span style="color:deeppink; font-weight:bold">『マウスによる滑らかな表現』</span> &copy;2021 TacM V0.01</div>
<div style="width:960px;"><b>CTRLキー:</b>マウス移動を有効化,&emsp;<b>ESCAPEキー:</b>メッセージを切り替える(繰り返し)</div>
<Div onmousemove="trail();" style="width:960px; height:600px; border:1px solid blue; font-size:48px; color:chocolate; position:relative; overflow:hidden;">
<div id="ms0"  style="width:90px; height:90px; position:absolute; left:680px; top:65px;  border:0px solid green;">コ</div>
<div id="ms1"  style="width:90px; height:90px; position:absolute; left:780px; top:160px; border:0px solid green;">ロ</div>
<div id="ms2"  style="width:90px; height:90px; position:absolute; left:790px; top:282px; border:0px solid green;">ナ</div>
<div id="ms3"  style="width:90px; height:90px; position:absolute; left:713px; top:400px; border:0px solid green;">熱</div>
<div id="ms4"  style="width:90px; height:90px; position:absolute; left:569px; top:484px; border:0px solid green;">中</div>
<div id="ms5"  style="width:90px; height:90px; position:absolute; left:393px; top:512px; border:0px solid green;">症</div>
<div id="ms6"  style="width:90px; height:90px; position:absolute; left:214px; top:480px; border:0px solid green;">対</div>
<div id="ms7"  style="width:90px; height:90px; position:absolute; left:100px; top:384px; border:0px solid green;">策</div>
<div id="ms8"  style="width:90px; height:90px; position:absolute; left:38px;  top:275px; border:0px solid green;">し</div>
<div id="ms9"  style="width:90px; height:90px; position:absolute; left:97px;  top:175px; border:0px solid green;">っ</div>
<div id="ms10" style="width:90px; height:90px; position:absolute; left:160px; top:100px; border:0px solid green;">か</div>
<div id="ms11" style="width:90px; height:90px; position:absolute; left:250px; top:60px;  border:0px solid green;">り</div>
</Div>
<body bgcolor="aliceblue">
<script Language="JavaScript">
const Message = ["コロナ熱中症対策しっかり", "暑中お見舞い申し上げます", "夏休みは自転車に挑戦する", "たくさんの折紙作る夏休み"];
const MsColor = ["deepskyblue", "lime", "darkviolet", "chocolate"];
const COUNT = 12;
const STEP = 6;
var mx = [];
var my = [];
var mvcnt = mn = mousemoveFlag = 0;
document.addEventListener('keydown', logKey);						//キーイベント
for(var i=0; i<COUNT; i++){
	var id='ms'+i;
	mx[i]=document.getElementById(id).style.left;
	my[i]=document.getElementById(id).style.top;
}
function logKey(e) {					//キーの押下で起動
	console.log("押されたキーのコード : " + e.keyCode + e.key, Message.length, mn);
	if(e.key == "Escape"){
		mn = (++mn) % Message.length;
		for(var i=0; i<12; ++i){
			msLeftTop(i, mn);			//left, top, MsColor, Message
			console.log(i, mx[i], my[i], Message[mn][i], MsColor[mn]);
		}
	}
	if(e.key == "Control"){console.log("Control");mousemoveFlag=1;}	//CTRLキーの押下でマウス移動を有効にする
}
function trail(){						//マウス移動で起動
	if(mousemoveFlag==0)return false;	//マウス移動はまだ無効
	console.log("TRAIL", mvcnt, event.x, event.y);
	if (++mvcnt % STEP) return false;	//1 ~ 11
	mx[COUNT] = event.x;				//0
	my[COUNT] = event.y;				//0 1 2 3 4 5 6 7 8 9 10 11   12
	for(var i=0; i<COUNT; i++){
		mx[i] = mx[i+1];
		my[i] = my[i+1];
		msLeftTop(i, Message.length);	//left, top
	}
	console.log("*****", mvcnt, event.x, event.y);
	return false;
}
function msLeftTop(i, mn){				//'msi' set left/top
	var id='ms'+i;
	document.getElementById(id).style.left = mx[i]+"px";
	document.getElementById(id).style.top  = my[i]+"px";
	if(mn>=Message.length)	return;
	document.getElementById(id).style.color = MsColor[mn];
	document.getElementById(id).innerHTML = Message[mn][i];
	return;
}
</script>
</body>
</html>

おまけ

このブログは本文を左に、右にカレンダーや最近の投稿を表示する2カラム方式を採用しています。時として、画面いっぱいに表示したいことがあります。記事を読み込む処理において、特定の文字列から始まる記事名では全面表示になるように制御されています。ブログ運営上、ちょっと高度な仕組みを施しています。

ネット社会の明暗

インターネットを有効利用

今はネット社会が真っただ中と言えます。7月のカレンダーにおいて、祝日が実際と異なっているのがほとんどのようです。

それは昨年11月末に、改正五輪特措法により、7月、8月、10月の祝日に変更がありカレンダーの印刷に間に合わなかったためです。一度、発信した情報に明らかな誤りがある場合は修正しなければならないという法律はまだ存在していないと思われます。

コロナの影響と無駄を省く時代の要請を反映して、昨年末にいつも入手出来ていたカレンダーがほとんど手に入りませんでした。そこで月末にネットから翌月のカレンダーをダウンロードして利用しています。

7月のカレンダーを6月末にダウンロードして印刷して壁に貼り付けて使っています。法律が施行されて数か月もたつのに7月の休日は残念ながら旧態依然です。新聞折込みチラシの7月カレンダーは流石に正しい表記に改訂されていました。

まだまだ発展途上

SNSの利用法、様々な団体の規約など発展途上にあると言えるでしょう。

会の規約においては、どこぞのものをコピーして該当する処のみを変更して使っているものもあります。『仏作って魂入れず』はよくあることです。

太平洋戦争後の統治下において「日本の民主主義は12歳」とダグラス・マッカーサーに言われて今に至っています。インターネットの利用では、これから落ち着いた時代に入り本質的な改良がなされていくことでしょう。

無料利用に注意

インターネットの利便性を無視しているのは無料でサービス提供しているからです。ネット上にはダウンロードフリーの情報がわんさかあります。無料の利用では内容が誤っていても責任を追及することは難しいです。

いつもフェイクニュースを流していると誰からも信用されなくなりますが、ガセネタ、怪情報として効果を発揮することがあります。ネット上の情報参照は自己責任です。

あまりにもセンセーショナルな内容は眉に唾をつけて読むようにしましょう。オンライン、リアルタイムなどの特長を発揮できていないのはこれからの大きな課題でしょう。

連日の雨に思う

程よく降って

多くの国を訪ねたわけではありませんが、日本には緑があふれていると思われます。理由は中国や中東地方の大砂漠がなく、四方を海で囲まれているのでこのように判断しました。

雨は天からの恵みと言われますが、一気に強く降ると災害になるので穏やかに降ってほしいものです。

このところ、連日の雨です。これに触発されてプロ野球の伝説に一つ『権藤、権藤、雨、権藤(、雨、雨、権藤、雨、権藤)』があります。

権藤、権藤、雨、権藤の伝説はかなり有名で高齢者ならばエピソード、曰くをご存知でしょう。これをHTMLを駆使して漫画チックに表現してみました。

権藤・権藤・雨・権藤

高度成長が著しかった時期は「いけいけどんどん」の時代でした。

『小よく大を制す』、『柔能く剛を制す』よりは『力あるものが勝つ』一辺倒でした。

プロ野球では技巧派よりも速球派が幅を利かせていました。

セリーグ中日に権藤という投手が入団して連日、登板して大活躍しました。

年間69試合に投げて35勝を挙げました。

投げた後は休養を取ると登板できませんが、当時は屋根付き球場は皆無で雨が降ると中止が普通でした。

するとまた投げることが可能になり頭書の伝説に繋がります。

今では超過労働などのそしりを浴びたり、投球制限の規則に抵触するので考えられないでしょう。

雨が降り続いています。一服の清涼剤になれば幸いです。

大車輪の登板

ブラウザの再ロードボタンをクリックして再描画してください。

権藤
権藤
 雨 
権藤
 雨 
 雨 
権藤
 雨 
権藤
©2021 TacM V0.02

地表を走る観覧車

大観覧車

観覧車は大きな車輪状のフレームの周囲に2~4人乗りのゴンドラを取り付け、低速で回転させ、高所からの眺望を楽しめるようにした乗り物です。海外では博覧会を記念して建設されましたが、日本では経済成長期にあちこちで競うように出現しました。

中央に回転用の主軸やモーターがあるものがスタンダードでしたが、近年、中央に主軸がなく空洞の中央部にジェットコースターと交差するスリリングな観覧車が完成しているようです。

アメリカ映画黎明期の白黒フィルム映像で見たように記憶していますが、観覧車を車にして広大な広場を走行していたような映像でした。観覧車やジェットコースターは高低差が最大の魅力ですが好きなコースを自由に走行することはできません。このたび、実現の可能性を度外視して、地表を走行する観覧車をHTMLを用いて作成しました。

以前にも観覧車について当ブログ『観覧車作成の研究』で言及しましたが、大車輪が一回転する間に、ゴンドラがそれと逆方向に回転する必要があります。ゴンドラが自在に回転できるようになっていれば自重により常に重力方向を向くので、座席が逆さになることはありません。

未来志向クラシックカー

作ってみたいのどかな車です。

🎡
この作品はJavaScriptでプログラミング
©2021 TacM, Ver0.01