カテゴリー別アーカイブ: プログラミング

Programing

画像部分表示3

画像トリミング3

画像部分表示の第3弾です。少しずつ、高級化を図れるようになりました。これまで述べた正常動作条件が必ずしもすべて正しいとは限らないようです。

あとの記事がより信憑性が高いといえます。サイズ不ぞろいの集合画像から必要なものだけ抽出して表示する例を示します。

今回はJavaScriptコードに頼らず、HTMLコードだけで実現しています。


HTMLコード

<html>
<img src="http://aidesign.lolipop.jp/wp-content/uploads/2016/08/0727.png" width="600" height="400">
<hr width="600px" align="left" style="border:0;border-top:4px solid green;">
<DIV style="position:relative; width:600px; height:135px; height:135px; border:1px orange solid; overflow:hidden;">
<img src="http://aidesign.lolipop.jp/wp-content/uploads/2016/08/0727.png" width="600" height="400" style="float:left; position:absolute; left:-496px; top:-169px; clip:rect(169px 586px 303px 496px);">
<img src="http://aidesign.lolipop.jp/wp-content/uploads/2016/08/0727.png" width="600" height="400" style="float:left; position:absolute; left:-50px; top:-320px; clip:rect(320px 230px 390px 140px);">
<img src="http://aidesign.lolipop.jp/wp-content/uploads/2016/08/0727.png" width="600" height="400" style="float:left; position:absolute; left:-235px; top:-125px; clip:rect(125px 510px 180px 415px);">
</DIV>
</html>

杞憂

HTMLコードを見ていただくと、同一画像イメージを4ヶ所で指定しています。恐らく、言語処理系はすでに読み込んだ画像イメージがあれば、重ねて読み込みが行われないように最適化していると信じたいです。もしそうでなければ、このサンプルコードは最悪の見本となるでしょう。その節は反面教師にして決して参考にしないでください。



資源を有効利用するにはJavascriptにおいて var img4=new image();のように読み込んだデータを確保しておいて、他の3ヶ所でも再利用して描画したいものです。

 

雨と詩人

粋なセリフ

雨はほどよく万遍なく降ってくれれば最高の恵みとなりますが、近ごろは温暖化の影響か激しく集中的に降り、山崩れや堤防決壊などの災害になることがあります。

雨音はショパンの調べなどと古人はしゃれたコピーを考えてくれました。雨の降る様は多くの人にとって非日常であり、誰をも詩人にしてくれます。

「雨音はショパンの調べ」の原曲は1980年代、イタリアを含むヨーロッパの国々でヒットチャートの上位に輝き、松任谷由実、小林麻実のコンビによる日本語曲も人気を博しました。

雨にまつわる著作権保護期間終了の童謡:野口雨情作詞・中山晋平作曲《雨降りお月さん》をスクロール画像とともに描画し、雨を楽しむ試みをしました。

縦書きプラグインh2vR.CSSとスクロールをサービスするMarquee with CSSプラグインを使用しています。

ブラウザの改訂により記事の読み込み後に自動開始することが無効になったので、開始ボタンをクリックしてください。

動作例

 

画像の部分表示

画像トリミング

動物の毛を手入れする人のことをトリマーと言いますが、画像の周囲や映像の前後の不要部分を切り取って、必要な部分だけを抜き出すことをトリミング(trimming)と呼んでいます。

下に示した画像のように、ひとつひとつをパーツとみなし、集合写真のように一枚の画像に納め一括して管理すると画像の枚数を少なくすることができます。

個々の画像はサイズが一定でも異なっていても単独画像のように扱うことができます。よって、ここでは必要な部分だけを切り抜くテクニックについて語ります。

部分表示

大きな画像の一部を切り取って表示するには、CanvasのdrawImage関数が便利です。原画像の一部を拡大・縮小して描画できます。モダンブラウザならばCanvasサポートは万全です。その他にスタイルシート(CSS)のclip機能を使って画像を部分表示することができます。

 

Clipの使い方でHTMLコードをローカル環境ではいい感じの動作が得られたので、公開サーバーにアップロードしてみると毎回、期待を裏切られていました。よくあることですが今回はじっくり腰を据えて調査し、一定の結論が得られたので記録に残すことにしました。

動作環境を特定する

切り抜きをするとき、clip:rectを使うに当たりposition:relativeとposition:absoluteをセットで使います。このpositionプロパティの使い方に問題がありました。今回、部分表示するにはclip:rectを使わずに実現できました。失敗の核心と改良点を示します。

部分表示するとき、親要素にposition:relativeを、子要素にposition:absoluteを指定します。親要素でDIVにより領域を確定し、子要素にIMGで画像を指定した時に誤動作が起きることを突き止めました。

上左図の画像はサイズ100*100の画像を4つ集合したサイズ400*100の画像です。

1つの画像を切り抜いて表示するには親要素に100*100の領域を指定し、子要素に400*100を重ね合わせ、はみ出した3画像ぶん(黄色の背景)をoverflow:hiddenにすれば、1つの画像(ピンクの背景)を切り取ることができます。

重ね合わせると上右図のように子要素の画像が親要素のサイズに合わされてしまうことが誤動作の原因でした。これは試したモダンブラウザに共通して起きました。

子要素でwidthによりサイズを指定しても改善しません。ネット上のサンプルは子要素に画像ではなくテキストを表示する例がほとんどで、画像でない場合、期待した動作になります。


上の図で左のTEST6は誤動作例です。div要素でラップして画像要素を隠蔽すれば正常動作になると考え改訂した例を次に示します。

改良した内容と表示内容

子要素にはdiv要素で領域を確保し、画像は孫要素にしました。そして、absoluteによる働きかけは子要素にしたところ期待した動作が得られました。

たとえば、2番目の画像を切り抜くには、親要素の真上にくるようにleft属性により調整します。そして、overflow:hiddenによりはみ出し部を隠す指定を忘れずに設定します。

 

表示例は1週間の曜日画像を上図のように1つにし、日曜日から順に土曜日までを部分表示するものです。

動作コード

以下のコードで7行目のimg要素を6と8行目のDivにてposition:absoluteが有効に働くようにします。

<!DOCTYPE html> <!-- ※※※※※※※※ TEST7 ※※※※※※※※ -->
<html>
<body>
<button onClick="if(myDay==0)ImageGuide();">開始、ここをクリック</button>  &copy;TacM,2018 Ver0.03<BR>
<DIV style="position:relative; width:120px; height:120px; overflow:hidden; border:0px solid pink;">
<Div id='week0' style="position:absolute; left:0px; top:0px; width:840px; weight:120px;">
<img id='week7' src="http://aidesign.lolipop.jp/wp-content/uploads/2018/06/positionRelative.png">
</Div>
</DIV>
<div id="imagemessage" style="margin-left:130px; margin-top:-110px; font-size:80px; color:green">準備中…</div>
<script type="text/javascript" charset="Shift_JIS">
var myDay=0;
function ImageGuide() {
	document.getElementById('week7').src = "http://aidesign.lolipop.jp/wp-content/uploads/2015/06/week8A.png";
	document.getElementById('week0').style.left = (-myDay*120) + "px";
	document.getElementById('imagemessage').innerHTML = '曜日(' + myDay + ')';
	if(myDay++ < 6)	setTimeout('ImageGuide()', 1000);
	else			myDay=0;
}
</script>
</body>
</html>

 

動作例

  ©TacM,2018 Ver0.03
準備中…

 

さいごに

スタイルシートでpositionを指定するとき、仕様書に沿った使い方をしても期待した動作になりませんでした。試行錯誤の結果、一ひねりして新しいことを追加して動作に漕ぎつけました。

clip:rectを使わずにoverflow:hiddenにより部分表示を実現できたことは大きな発見です。clip:rectを用いて思うように画像トリミングができない場合、当記事が参考になれば幸いです。

 

今日という日

繰り返し行動

6月10日は時の記念日であり、時にまつわる話になります。

人々の生活は繰り返し行動がほとんどです。3度の食事や通学や通勤は7日めぐりです。頭を洗うのは2日おき即ち3日に一度、ガソリンの補充は10日ごとなど等間隔で繰り返すことが多いです。

5日ごとに繰り返す場合は五十日(ごとおび)でおおむね、問題ありませんが2月の場合は2月25日から3月5日までは8日間、うるう年で9日間あり、正確さを欠きます。

こういう場合、元日からの通算日(0~364あるいは365)を求め、その値を5で割り、その剰余が4の場合を該当日にすれば、厳密に5日の繰り返しとすることができます。

割り算では被除数を除数で割って商を求めることが多いが、商よりも剰余が欲しいことがあります。C言語やJavaScriptでは剰余演算子が用意され%で記述されます。

剰余演算子の具体例を示します。10 % 3 → 結果1を返します。

通算日を算出

6日ごとに機械に油をささなければならない場合、カレンダーに〇を付けるときれいに斜めの列ができます。

パソコンやスマホを使いこなせる場合は、元日からの通算日を求め、繰り返し日数で除し剰余を求めれば、正確な繰り返し状況が明らかになります。

算出と利用例

以下に3~6日ごとに繰り返す算出結果を示します。2は通算日が奇数・偶数かで容易にわかり、7は曜日に関連付けることができるので省略しました。

6日ごとに油をさす場合、繰り返し間隔6の下に表示された識別数が0の日に実行します。3個の帽子を持っていて毎日被る帽子を順に変える場合、識別数0~2を帽子A~Cに置き換えます。

《今日という日》©TacM,2018 Ver0.03
準備中 今日は 曜日です 通算日を計算中 繰り返し間隔 3 4 5 6 🚿 🏃 🚮 ⛽ 識別数 2 3 4 5

余談

四つある識別数がすべて0になることがあります。通算日が3, 4, 5, 6の最小公倍数の整数倍(0, 60, 120, 180, 240, 300, 360)になる日です。

年に7回、発生しすでに3回は体験したのであと、4回残っています。次は6月30日です。

それまで毎日、当ページにアクセスしてください。曜日ごとに表示色が変わることがわかります。

メーカーへのお願い

卓上デジタル時計は手ごろな値段で求めることができます。

そこには時刻、日付、曜日、温度、湿度などが表示されますが、これからは元日からの通算日を入れて欲しいものです。

見栄えのいいもの、売れるものもいいけれど、役立つものを作ってください。どんぶり勘定でやり過ごせる時代は終わりました。S社、C社などのメーカーさん、ぜひお願いします。

 

雅なお誘い2

改訂のお知らせ

この記事は雅なお誘いの改訂版です。モダンブラウザの雄はグーグルかなと思っていますが、この度のVersion66における改訂では少しの戸惑いを感じています。そこで雅なお誘いの動作がGoogle Chromeの最新バージョンでも他のブラウザと同一の動作になるように改訂しました。

 

今回、記事の改訂でBGMを鳴らすようになり、最後までお聴きいただくとそれなりのお得な情報が得られます。

合歓の木の花言葉の動作

開始ボタンのクリックでスタートです。

 

それなりのお得な情報

合歓の木にまつわる4枚目の画像には、ダビンチコードをもじったモザイク画像が含まれています。

この画像は時間が経ったり、閲覧数が上がるたびに少しずつスモークが消え、エロティックな画像に変身しません。

また、蔵出し秘蔵画に迫るで試みた特定の画像部分に触れることにより、オンラインパスワード認識に合格して新展開に進むこともありません。

ブログは広範囲な情報体であり、そのような遊び心はもう少し小さな媒体に譲ることにします。

例えばアマゾンキンドル本のように読者の好奇心が同じ方向に向いている出版媒体で発表したいと考えています。その時には仕組み、からくり、詳細ソースコードなどが明らかになることでしょう。

JavaScriptを理解した後、動的表現方法のひとつとして①発表から時間が経ったら、②特定会員ならば、③正しい暗証番号の入力者ならばなど限られた人にだけ公開する方法を示すことになります。

プラグインを拡張して紙吹雪を降らせる方法

作成のきっかけ

ピョンチャン冬季オリンピックでは日本人選手が大活躍し国中が興奮のるつぼと化しました。

凱旋パレードではメダリストが熱い応援に感謝の意を表して車から手を振って声援に応えていました。

中でも仙台での羽生結弦選手のパレードは圧巻で10万を超える参加者があったと報じられています。プロ野球日本シリーズ優勝パレードに見られるような紙吹雪が間断なく降り注いでいました。

一方、冬が近づくと雪景色を背景にした画像が多く見られ、「雪または花びらなどの画像を降らせる方法」の記事が目に留まるようになります。ネット上を 調査すると紙吹雪を降らせる記事が見つからなかったので紙吹雪を降らせる方法に挑戦しました。

合わせて、ウィジェット欄や左右の目次欄には降らせず、本文記事全般あるいは記事の一部にのみ降らせる仕組み、降らせる画像を複数種類にする方法を探求しましたので顛末を公開します。

雪や桜の花びらを降らせるには

インターネットをめぐる現象は日進月歩を重ね日々、進化しています。進歩が速すぎて正しい評価が追い付かずに様々な問題を抱えていますが、それは別の機会に触れることにします。

インターネットを利用して効果的な表現をしたい場合、その技術がおおむね確立されて公開されていることが多いです。その技術を有料あるいは無料で組み込んで使います。

その部分(ツール、行為など)をプラグインと言っています。世界的で強力なソフトウェア開発プロジェクトのための共有ウェブサービスにGitHubがあり、今回はそのプラグインを基本的に使わせていただいています。

この度の試みを実現するには、既存のjQueryライブラリーの導入、その一部改造、呼び出し方法を体得しなければなりません。これらの全体像を理解するにはほぼコピペするだけ!jQueryでWebページに雪(または花びらなどの画像)を降らせる方法などにも目を通してください。

準備するもの

最初に、雪を降らせるためのプラグインファイルをダウンロードします。ダウンロード先は次のURLアドレスです。『Makes it snow on any web page or specific element.』

英語版ですが設定は数字やアルファベットであり、すべて日本語に対応します。

URLにアクセスし、ページの右側にある「Clone or download」をクリックし、jQuery-Snowfall-masterを確保します。一般にはそのなかの縮小タイプであるdistフォルダーを利用しますが、今回は一部を変更するのでsrcフォルダのsnowfall.jquery.jsを使います。

プラグインを改造する

雪が舞うようなヒラヒラ落下する画像のスピードやサイズは随時、変化しますが画像は常に同じです。これを指定した画像のぶんだけ変化するようにSnowfall jquery pluginを複数画像対応に改造します。

この部分は雪が舞うようなヒラヒラ落下するSnowfall jquery pluginを複数画像対応に改造を参照しています。浅学の身にはたいへん役立ちました。コードは少し変更してあります。

Snowfall jquery pluginの138行付近をbeforeからafterに変更します。 変更内容は、画像を配列で指定すればそのなかから、乱数を発生させてひとつを選びます。従来のようにいつも決まった画像を指定した場合でも動作するように配慮されています。

before

	if(options.image){
		flakeMarkup = document.createElement("img");
		flakeMarkup.src = options.image;
	}else{
		flakeMarkup = document.createElement("div");
		$(flakeMarkup).css({'background' : options.flakeColor});
	}

after

	if(options.image){
		flakeMarkup = document.createElement("img");
		var yn = Object.prototype.toString.call(options.image) === '[object Array]';
		flakeMarkup.src = yn ? options.image[Math.floor(Math.random()*options.image.length)] : options.image; //;2018-05-09
		//console.log("flakeMarkup.src", yn, options.image, options.image.length);
	}else{
		flakeMarkup = document.createElement("div");
		$(flakeMarkup).css({'background' : options.flakeColor});
	}

紙ふぶき画像を作る

紙ふぶきを降らせるために紙ふぶき画像を作ります。三角形、四角形、星形をそれぞれ4色ずつ12種類を作りました。

画像サイズは呼び出し側設定データで決まるので手ごろなサイズ400×400にしました。形は正方形が原則で、長方形や円形にするには外側を透明色にして実現します。

4角形  赤  0度
 青  -30度
 緑  45度
 黄  30度
星形  黄  0度
 紫  0度
 マゼンタ  0度
 金  0度
三角形  オリーブ  0度
 赤  30度
 orchid  -30度
 coral   180度

 

紙ふぶき画像は基本形を作り、他に3個のコピーを作ります。paint.netなどにより順に回転させ指定の色に設定します。

基本形の外は魔法の杖を使って透明色にします。

七夕飾りに付ける短冊形、円盤形などを用意すればいっそう華やかになることでしょう。

 

呼び出し側設定データ

jQuery(document).snowfall({
  flakeCount : 60,      // 落下物の数
//flakeColor : '#FFF',  // 落下物の色(画像を使用しないとき)
  flakeIndex : 999999,  // 落下物のz-index
  minSize : 2,          // 落下物の最小サイズ
  maxSize : 20,         // 落下物の最大サイズ
  minSpeed : 1,         // 落下物の最小落下スピード、値が大きいほど速く落下する
  maxSpeed : 8,         // 落下物の最大落下スピード、     ”
  round : true,         // 落下物に丸みを持たせる
  shadow : false,       // 落下物に影をつける?
//collection : 'div',   // 落下物を指定の要素に積もらせる設定(画像を設定してもflakeColorで指定した落下物の色が積もります)
  image : [             // 落下物を指定の画像に変更
  "cofetti-0.png",
  "cofetti-1.png",
  "cofetti-2.png",
  "cofetti-3.png",
  "cofetti-4.png",
  "cofetti-5.png",
  "cofetti-6.png",
  "cofetti-7.png",
  "cofetti-8.png",
  "cofetti-9.png",
  "cofetti-10.png",
  "cofetti-11.png"]
});

動作例

BGMボタンをクリックすると津軽三味線のBGMが鳴動し、再びのクリックで停止します。

ライブラリー呼び出しソースコード

この使い方では記事全体に紙ふぶきが降り注ぎます。指定した要素内で雪などを降らせるにはさらなる設定をします。それには次のライブラリー呼び出しソースコードをアップロードし、URLアドレスを二つ目のJavaScriptコードのiframeタグのsrc属性に指定します。

<!DOCTYPE html>
<html>
<head><meta charset="Shift_JIS"></head>
<body bgcolor="aliceblue" text="indigo">
<audio id="bgm" src="http://aidesign.lolipop.jp/wp-content/uploads/2018/05/festival.mp3"></audio>
<DIV id="msg" style="position relative; width:580px; height:400px; border:0px red solid;">
<span style="font-size:24px; color:darkslategray">2034年 </span><span style="font-size:34px; color:gold">仙台冬季オリンピック金メダル</span>
<span style="position: absolute; left:10px; top:48px; font-size:40px; color:green">羽田譲選手おめでとう<a id='go' onclick="starting();">&#x1F3BC;</a></span>
<div style="position: absolute; left:470px; top:55px; width:110px; height:40px; border:0px blue solid;">&#x1F448;BGM<BR>
<span style="font-size:9px; font-weight:bold;">&copy;2018 TacM, Ver0.06</span></div>
<img src="http://aidesign.lolipop.jp/wp-content/uploads/2018/05/sendai580x290.png" style="position: absolute; left:10px; top:110px;">
</DIV>
<script src="https://code.jquery.com/jquery-2.2.4.min.js"></script>
<script type="text/javascript" src="http://aidesign.lolipop.jp/wp-content/uploads/2018/05/snowfall.jquery.js"></script>
<script type="text/javascript" charset="Shift_JIS">
var i=0;
jQuery(document).snowfall({
  flakeCount : 60,     //落下物の数
//flakeColor : '#FFF', //落下物の色(画像を使用しないとき)
  flakeIndex : 999999, //落下物のz-index
  minSize : 2,         //落下物の最小サイズ
  maxSize : 20,        //落下物の最大サイズ
  minSpeed : 1,        //落下物の最小落下スピード、値が大きいほど速く落下する
  maxSpeed : 8,        //落下物の最大落下スピード、     ”
  round : true,        //落下物に丸みを持たせる
  shadow : false,      //落下物に影をつける?
//collection : 'div',  //落下物を指定の要素に積もらせる設定(画像を設定してもflakeColorで指定した落下物の色が積もります)
  image : [            //落下物を指定の画像に変更
  "http://aidesign.lolipop.jp/wp-content/uploads/2018/05/cofetti-0.png", "http://aidesign.lolipop.jp/wp-content/uploads/2018/05/cofetti-1.png",
  "http://aidesign.lolipop.jp/wp-content/uploads/2018/05/cofetti-2.png", "http://aidesign.lolipop.jp/wp-content/uploads/2018/05/cofetti-3.png",
  "http://aidesign.lolipop.jp/wp-content/uploads/2018/05/cofetti-4.png", "http://aidesign.lolipop.jp/wp-content/uploads/2018/05/cofetti-5.png",
  "http://aidesign.lolipop.jp/wp-content/uploads/2018/05/cofetti-6.png", "http://aidesign.lolipop.jp/wp-content/uploads/2018/05/cofetti-7.png",
  "http://aidesign.lolipop.jp/wp-content/uploads/2018/05/cofetti-8.png", "http://aidesign.lolipop.jp/wp-content/uploads/2018/05/cofetti-9.png",
  "http://aidesign.lolipop.jp/wp-content/uploads/2018/05/cofetti-10.png","http://aidesign.lolipop.jp/wp-content/uploads/2018/05/cofetti-11.png"]
});
function starting(){
  (i = 1 - i) ? document.getElementById("bgm").play() : document.getElementById("bgm").pause();   //音声再生, 音声停止, 0, 1 ==> 1, 0
  document.getElementById("go").innerHTML = String.fromCodePoint(i*0x315+0x1f3bc);                //0x1F3BC, 0x1F6D1
}
</script>
</body>
</html>

本文記事に紙吹雪を降らせるソースコード

<!DOCTYPE html>
<html>
<body margin="0" padding="0">
<iframe id="nextName" src="http://aidesign.lolipop.jp/wp-content/uploads/2018/05/throwConfetti.html?2018/05/14" width="600px" height="420px">iframeは未サポート</iframe>
</body>
</html>

 

もっと良いものにする

  1. 枯葉がひらひら舞う感じを演出する
  2. ひらひら感を付加する
  3. 動画に紙ふぶきを降らせる
  4. くす玉を割る様を疑似体験できるようにする
  5. キラキラ光りながら落下する
  6. クリスマスツリーに雪を積もらせる
  7. たなばた飾りを模す

感想とおことわり

snowfall.jquery.jsライブラリーは記事全体に雪を降らせるものであり、ウィジェット欄を持つブログなどで本文記事にのみ雪を降らせるにはiframeタグなどを併用する必要があります。上に示したようにソースコードはほんの数行ながらなかなか思い通りに動作してくれず大いに悩みました。

もっと良いものにする項に挙げましたがこの改造をもってしてもひらひら感を出すことはできませんでした。枯葉が舞うときには回転しながら落下しますが、ここではサイズが変わるだけで回転は行われません。実態に合わせて自然な雰囲気を出す必要がありそうです。予算と時間が解決してくれると思われます。

この例題はすべてのケースに対応しているかは不明です。それぞれの責任においてご利用ください。参照させていただいた記事に感謝申し上げます。

雲路みちゆきゲーム

雲路(うんろ)とは

雲路(うんろ、くもじ)とは進路、針路、行き先のことです。JavaScriptのcanvasを用いてリサジュー曲線を描いてみました。リサジュー曲線(LissajousCurve)はパラメーターをちょっと変えるだけでさまざまな幾何学模様を表現することができます。

大学などにおいて、そのアカデミックな雰囲気を醸し出す形を象徴にした校章が採用されています。動作例のヘッダー画像に電気通信大学などのロゴマークを取り上げています。

リサジュー曲線を描くとき、その軌道を予測しクリックして当たったときの得点数を競うゲームを作りました。ゲーム名は軌道予測が合っていますが、ちょっとひねって、雲路みちゆきと怪しげな名前にしてあります。使い方を以下に示します。

ゲーム利用法

使い方は、開始ボタンをクリックしスタートします。リサジュー曲線の2000ヶ所に及ぶポイントを通過する際、進路を予測し的中すれば当たりとなり、得点が1点加算されます。

描画速度をinput要素のnumberタイプで3ms~30msに変更可能です。

初期値を15ms以外でゲームをする場合、速度設定後に開始ボタンをクリックします。

描画予測位置の少し先をクリックするとヒットしやすいです。描画速度が極端に遅い場合、的中回数が複数になる場合があります。

動作例

 

早春賦

春は名のみか

春のかおり

極寒を体験すると春はもうすぐです。晩冬から早春の風景を思い浮かべ、童謡『早春賦』を聴きながら時の流れを感じ取ります。音楽はいつものように著作権保護期間終了の作品から選びました。

ただで使わせていただいて愚痴をこぼすのも何ですが、古い歌は意味が難解です。「氷解け去り葦は角ぐむ」は『氷は溶けて消え葦は芽を吹き出した』との意味のようです。歌の歌詞はしっかり縦書きにしました。

音楽、画像、春さきのおりおりのことばにより、押し込められた季節から早春へと弾けてください。

春を待つ心


 

ドローンによる演出

ドローンによる巧みな演出

viva-drone.comより

ピョンチャン冬季オリンピック開会式をテレビで見て、たいへん楽しい想いをしました。予算が潤沢にあればいろんなことができるのだと感心しました。

オリンピックマークは5色で青黄黒緑赤をLEDで出せると思います。人の姿から5輪のマークに変わるところは圧巻でした。そのとき、1つずつ、フラッシュして色が変化したら猶、良かったでしょう。

予算がないものにはコンピューター上で動作させることにしましょう。

ドローンに色を付けてみる

動くドキュメント作成法

ドローンを制御してイベントを演出したような描画をするには、Javascriptによるプログラミングをします。今回の作品は110行ほどのコードで成り立っています。

時間をおいてゆっくり動作させるためにsetTimeoutを使います。興味が湧きましたら、まず、簡単なことからスタートするとよいでしょう。

様々な学習方法があります。専門学校の門をたたいたり、著名な先生のプログラミング講座を受けることもできます。一方、赤ちゃん、幼児が言葉を覚えるように先達者の言動をひたすら模倣して学習する方法があります。

この方法がお金もかからず、自分の努力で進むことができます。インターネットが身近に普及している時代です。習得のための材料・資料はネット上にあります。

手っ取り早くサンプルコードを入手する場合は、少しばかりのお小遣いを使ってください。もし、よかったら右の画像をクリックして多くのサンプルコードに触れてください。他と異なる習得方法があることを知っていただけたら幸いです。

身近な生活への応用

今年の冬は記録的な大雪で悩まされています。道路に降り積もった雪で道路側溝が隠れて見えなくなり、車が転倒する事故が多発しています。

今やGPSによる位置検出精度は数センチになっており、道路や障害物の詳細情報が整理されたら、自動運転技術で雪に埋もれた道路から車がはみ出すことはなくなることでしょう。

自動運転装置は高価です。まずはNAVIスクリーンに実際の風景に加えて雪の下にあるセンターラインや縁石を表示する機能を追加してほしいです。この装置はそんなに高価にはならないでしょう。とりあえず、運転者がその画面を参考にしながら運転して危険を察知する方式が考えられます。

今までにないシステムを構築するには総合的な知識が要求されます。若者が遊び心を持ちつつ楽しみながら新しい技術を学んで身近な生活に役立つことを願っています。

 

クリッピングをマスター

長年の課題

複数のピースを一枚にまとめ集合画像にしたとき、クリップして部分的に表示することができず悩んでいました。今回、以下のような2行5列にまとめた10枚の動物の画像を1枚ずつ表示できたので備忘録として残します。 img要素にposition absoluteを指定し、clip:rectにより取り出すエリアを設定し、位置のずれをtopとleftによって調整して期待した動作を得ました。今回、clip領域を計算により決定せずに、泥臭い方法ながらテーブルを参照する方式に変えたところ思うような動作になりました。以前はcanvasのdrawImage関数を用いて切り抜けていましたが、canvasに頼ることがないので積年の悩みが解消しました。以下にコードを示します。

サンプルコード

<html>
<body>
<button onclick="setClip();">開始</button> <span id="num" style="color:red">&#x24ff;</span>
<span style="font-size:10px"> &copy;TacM,2018 Ver0.01</span><br />
<div style="position:relative; width: 750px; height: 300px; border: 0px solid gray;">
<img id="sample" width="750px" height="300px" style="position:absolute; top:-150px; left:-300px;
 clip:rect(150px,450px,300px,300px)" src="http://aidesign.lolipop.jp/wp-content/uploads/2015/08/animal10.png">
</div>
</body>
<script type="text/javascript" charset="Shift_JIS">
const SUJI = "\u24ff\u2776\u2777\u2778\u2779\u277a\u277b\u277c\u277d\u277e";	//0123456789
const rectT=[
'rect(  0px, 150px, 150px,   0px)', 'rect(  0px, 300px, 150px, 150px)',
'rect(  0px, 450px, 150px, 300px)', 'rect(  0px, 600px, 150px, 450px)',
'rect(  0px, 750px, 150px, 600px)', 'rect(150px, 150px, 300px,   0px)',
'rect(150px, 300px, 300px, 150px)', 'rect(150px, 450px, 300px, 300px)',
'rect(150px, 600px, 300px, 450px)', 'rect(150px, 750px, 300px, 600px)'];
var v=0;
var p = document.getElementById( "sample" );

function setClip(){
 console.log("V="+v+" : "+rectT[v]);
 document.getElementById("num").innerHTML=SUJI.substr(v, 1);
 p.style.clip = rectT[v];
 p.style.left = -(v%5)*150+'px';
 p.style.top = -Math.floor(v/5)*150+'px';
 if(++v < 10) setTimeout(setClip, 1000);
 else v = 0;
}
</script>
</html>

動作結果

   ©TacM,2018 Ver0.01