人は多くの煩悩を抱えています。それを振り払って、振りほどいて人は前に進みます。振り払うには並大抵の努力では成し遂げられないようです。
108の鐘を聞きながら、煩悩を解消したいものです。
除夜の鐘は当年に107を鳴らし、最後の一つは新年を迎えたときに打鍾すると言われています。申年の2016年もあと3時間です。このたびの梵鐘は10秒間、鳴り続けます。
よって、1080秒前から除夜の鐘が鳴る続けるようにプログラミングされています。試験モードにすればテストを開始できます。
年の瀬とは年末、年の暮れ、歳末などと同義語と言えます。
それらよりも慌ただしさの度合いが強く、緊急度の高い一年の終わりを指し、より大晦日に近い範囲と推定されます。
それは「瀬」から読み取れます。
瀬とは川などの浅くて歩いて渡れるところ、流れが速いところを意味しています。瀬から連想されることは、速くて容易に渡れることです。
そうするとあわただしく時が流れる、カレンダーにバツ印を書いて待ちわびる期間ほどでない短期間ということになります。
いつから年の瀬かは各人のとらえかたによるでしょう。何日からと決めつけるのは味消しになります。ほんわか、曖昧が良いでしょう。
高級化の第2弾です。今回は動画のスクリーンの上と下に波のゆらぎを付けてみました。高速道路は直線コースよりも緩やかな曲線コースの方がより安全と聞いたことがあります。
車の運転とは逆になりますが動画において、なだらかなゆらぎは眠気を誘発して寝付けない夜によいでしょう。
動画の作り方作り方の概略は、動画中にまとめられています。基本動画の作り方はここでは触れません。既存の動画に修飾を加える方法について具体的に示します。
動画は静止画像を集めたものです。静止画像で思う通りの動作になれば動画に応用できます。
右上のような画像を作るために、左図の画像に右上画像を上書きして重なった部分のみを有効とし、それ以外は透明になるように指定する方法が簡便です。
今回は、右と下の2図の赤楕円部が同じ形状になるので2つを2段階で重ね書きして編集を実現します。
2回の重ね書きで上下部分が透明になり、中央部のみが初回画像によって表示されます。
Canvasの描画において、要素同士が重なるときのブレンド仕様に基づきます。当初はglobalCompositeOperationに”destination-in”を指定して、既存図形のうち、新図形と重なる部分のみを描画します。次に、globalCompositeOperationに”destination-out”を指定し、新図形領域と重ならない部分が残り、それ以外は透明となるように指定します。
<html>
<head>
<script type="text/javascript">
function test() {
var canvas = document.getElementById('sample'); //描画コンテキストの取得
if (canvas.getContext) {
var context = canvas.getContext('2d');
context.fillStyle = "lightgreen"; //初期状態はsource-overに同じ
context.fillRect(0, 0, 480, 480); //①基本画像を表示
context.globalCompositeOperation = "destination-in"; //既存図形のうち、新図形と重なる部分のみが描画される
context.fillRect(0, 60, 480, 420); //②上部フィルター画像、四角形を描く
context.globalCompositeOperation = "destination-out"; //新図形領域と重ならない部分が残り、それ以外は透明となる
context.fillRect(0, 420, 480, 60); //③下部フィルター画像、四角形を描く
}
}
</script>
</head>
<body onLoad="test()">
<canvas width="480" height="480" id="sample" style="border: 1px red solid"></canvas>
</body>
</html>
このたびの縁取りは直線であり、かつ静止画です。具現化するには四角形を多角形にして曲線にし、静止画を動画にするにはsetTimeout関数を使って60fps間隔で処理します。
Game DVRで動画ファイルに保存し、それをYoutubeにアップロードし、ブログ記事に動画オブジェクトを埋め込みました。
動画に縁取りを付加した場合の費用対効果はどのようになるでしょうか。評価はこれからです。
高級化と言えば画像を高密度にしてきれいな画質にすることが考えられます。ここでは目を引くような動画で間接的に高級化する方法を模索しています。
前回、「動画を縁取り加工」にて夜空の雲の形をしたスクリーン上に花火が打ち上がる動画の作成を述べました。
先の手法は体験で発見した重ね書きを用いましたが、Canvasで描画する際には、「要素同士が重なる部分のブレンドモードを指定する」にまとめられているように、Canvasの機能として体系づけられていました。
前回の方法は泥臭い方法で、今回の手法がスマートで発展性に富みます。
動画と言えども、静止画像の延長線上にあります。そこで静止画像の重ね合わせについて考えてみます。先に紹介の記事にありますが、2つの画像を重ね合わせるブレンドモードは以下の図に示した12パターン存在するようです。
以下の図はマゼンタ色の四角形を先に描き、その後、黄色の円を重なるように描いたとき、条件設定により最終結果がどのように表示されるかを示しています。
使い方は上記のサイトにていねいにまとめられています。白黒の映画をカラー化する方法は、ひょっとして上記のような技術(globalCompositeOperation)を採用しているのでしょうか。
動画そのものを加工することには問題が多過ぎます。そこで既存の画像を改良する操作を加えます。2つの画像が重なるとき、初期状態では上の図のsource-overの形すなわち、後で描いた画像が表示されます。
対して先に描いた画像を優先するには、destination-overを指定します。これら12パターンを用いて、縁取り画像などを作ります。
コードの一部を掲げます。
if((cnt % 4)==0){ //4回に一度、ブレンド効果を変更する
ctx.beginPath();
ctx.globalCompositeOperation = 'source-over'; //規定値で描く
ctx.drawImage(src_video, 0, 0, src_video.width, src_video.height); // W, H
ctx.globalCompositeOperation = 'destination-in';//新しい図形と重なる部分のみを描画
var p = Math.floor(w / 20);
var q = w % 20;
var v = (p % 2) ? 20 - q : q;
ctx.moveTo(4*v+160, 0); //6角形を描く
ctx.lineTo(640, 0);
ctx.lineTo(640, 360-3*v); //
ctx.lineTo(480-4*v, 480); //
ctx.lineTo(0, 480);
ctx.lineTo(0, 3*v+120); //
ctx.fill();
ctx.closePath();
//console.log("W=%d %d", w, v);
++w;
}
else ctx.drawImage(src_video, 0, 0, src_video.width, src_video.height); // W, H
cnt++;
4行目のdrawImegeで描かれる画像が通常表示になるように、3行目で’source-over’を指定します。7~16行で表示される6角形領域だけが浮き彫りになるように6行目で’destination-in’を指定します。
1~22行の処理は繰り返し実行されるので、3行目に示したglobalCompositeOperationの設定を省略すると正しい描画になりません。
動画は完全無料の動画再生ソフトGOM Playerの公式サイトのmp4_h264_aac.mp4を使わせていただきました。
今回の動画を編集する例は、大きな画像サイズをわざわざ狭めるようで有意性は小さいですが、目を引く効果があります。
また、上部の一部を全面削除する際に使えます。
WindowsVista用に作られたMovie Maker2.6が持つ画像切り替え効果を自作するヒントになりそうです。
Youtubeに投稿するような動画の上部をカットする技術はまだ、未開発です。今回、Canvas要素を使って描いた動画に縁取りを付けてみました。仕組みはハート型写真を作るで採用した重ね書き方法です。
CANVASで描いた画像にかたどるパターンを上書きします。先の記事で解説したように、表示させる部分は透明色、表示をカットする部分を白色のパターンを用意します。
JavaScriptのプログラミング例を以下に示します。
for(var i = 0; i < NUM; i++){
… //省略
ctx.beginPath(); //更新した座標で円を描く
ctx.fillStyle = 'rgb(' + r[i] + ',' + g[i] + ',' + b[i] + ')';
ctx.arc(locX[i], locY[i], radius[i], 0, Math.PI*2.0, true);
ctx.fill(); //表示を完成させる
}
ctx.drawImage(Img[ImageCounter], 0, 0); //縁取り画像を表示する
HTMLのCanvas要素を用いて、以前、ダイナミック新年書簡2016で下図のような花火の動画を作りました。四角形では花火の雰囲気が出にくいので、その下の雲の形に象った動画を作ってみます。
夜空をイメージした雲のなかで動画が展開します。表示する動画は全く、同じものですがフィルター効果で縁取りが生きてきます。
この手法で作った短い動画を93回2017箱根駅伝の往路と復路の間に挟み込みました。開始から1分20秒近辺で出現します。冬の花火をご覧いただけます。
このたびの技術の基本はCANVASとフィルター画像による重ね書きです。これを応用すれば、Youtubeに投稿するような動画を縁取ることも可能になると思われます。
AVI、MP4、WEBM、WMVなどの動画はCANVAS要素を使って表示することは容易です。2つの技術を融合すれば、多様な形状を縁取った動画を実現できそうです。
くよくよ悩んでいると、「それでも地球は回っている」、「朝の来ない夜はない」などと励ましてくれる人がいます。
先生が忙しく走る回る季節になりました。そして、申年の末日を越えると酉年を迎えます。酉年は商売繁盛に繋がると言われています。
のどかな時代であった頃、ニワトリは最も身近な家畜であり、毎日、卵を供給してくれるたんぱく質やカルシウムなどの栄養源でした。
鶏が高齢になると食肉となり、非情で貴重な食物連鎖を体験できる機会でもありました。
そして、新しい年を迎えると、2日～3日と第93回、箱根駅伝です。
93回 2017箱根大学駅伝まで、あと29日です。
先日、Google Maps JavaScript API V3を利用し、それにハイパーラプスライブラリーを駆使して、箱根駅伝往路のコマ落とし高速ストリートビューを実現しました。
今度は復路も表示してみました。駅伝コースは国道沿いを走ることが多く、上り下りで多少、コースが異なるのは自明のことです。往路の一区と四区は復路では、十区、七区となりますがその区では微差ながら往路と復路のコースに差が生じています。
スタート地点とゴール地点となる一区と十区で異なる部分を以下にクローズアップします。
このような差が出た理由は定かではありませんが、マラソンの42.195Kmの端数は王女の気まぐれが原因という俗説があります。
駅伝コースを地図上にプロットする技術は、無料版directions_service.routeのAPIを使っています。すでに許された最大機能まで使用済みであり、上図のように微に細に指定されたコースをたどることは超難解です。厳密なコースの表現は有料版の採用にゆだねられます。
片道、約110Km離れた区間を8ヶ所の経由点を指定して沿道をたどりました。1月2日～3日の熱き走りになぞらえてイメージトレーニングしてください。
プログラミング資料は前回の箱根駅伝2017の案内を参照ください。複数の動画を一つに結合するツールはFree Video Joinerを使いました。
外国には単数と複数を厳密に分ける言語が多いのに対して、日本語がそれほどでもなく曖昧のようです。英語では単数名詞にsやesを追加して複数名詞にしています。
child→chileren、foot→feetのように不規則なもの、単複同型(sheep…)もあり、入試に取り上げられています。また、不定冠詞、定冠詞の使い方も単純ながら厳密です。
複数名詞に重きを置かない日本語が劣っているかと言えば、そうでもない気がします。
本、皿、枚などの豊富な助数詞があり、数と助数詞が発音しやすいように変化します。
1本（いっぽん）、2本（にほん）、3本（さんぼん）のように、発音します。言語にはそれぞれに特徴があるのです。清音、濁音、半濁音は数の大小を示唆することがあります。
数、規模、範囲など大きくなると管理の原理が導入されます。今回は、組織化、自動化などについて触れてみます。
鉄道の切符を自動券売機発売にしてSUICAが導入されるまでは数十年かかったような気がします。切符購入に一刻も早くSUICAを使ってもらうように、当局では乗降や乗り換えにおいてSUICA利用者を近道に、裏が磁気化された切符を持っている客は遠回りするように誘導しました。それが功を奏したのかSUICAは瞬く間に普及しました。
銀行や郵便局では順番待ちの札を渡す代わりに、バーコード付きの整理券を自動発行する仕組みを採用しました。ワンマンバスになったときにも体験しましたが、切り替えについていけない利用者を怒る係員がいて問題になりました。
ラジオ番組を持っているある作詞者は自分のやり方に従ってもらうのだから、もっと丁寧に応接すべきと発言していました。
先日、中核病院内科の診察を受けました。大きな駐車場が3つほどあり、その従業員だけでも10人を越えるようです。多くの利用者が集まるので
隅々まで管理が行き届いていました。何かの役に立つとの思いでその一端を表示します。
診察に至るまで、以下の順序で案内を受けました。今回、薬の処方箋が発行されていません。多くは処方箋が発行されるので、もう2～3工程増える勘定になります。
| 順番号 | 内容 | 補足説明 |
| 1 | 駐車場案内 | 係員一次誘導 |
| 2 | 駐車券受け取り | 自動発券 |
| 3 | 駐車位置指定 | 係員二次誘導 |
| 4 | 総合案内所 | |
| 5 | 紹介受付 | |
| 6 | 外来受付 | |
| 7 | 問診票作成 | 一般待合室で記入 |
| 8 | 内科中待合室で待機 | |
| 9 | 診察 | 約5分 |
| 10 | 予約案内 | |
| 11 | 採血自動受付 | 自動受付書を発行 |
| 12 | 採血受付 | 自動受付書を係員に |
| 13 | 採血 | |
| 14 | 内視鏡検査予約 | |
| 15 | 内科次回診察予約 | |
| 16 | 会計待ち列に並ぶ | |
| 17 | 診察請求書発行 | 駐車券に押印 |
| 18 | 診察請求書発行完了待ち | モニタ画面に表示 |
| 19 | 会計自動支払い | 発券表をかざす |
| 20 | 駐車券利用確認 | 係員が会計支払いを確認 |
| 21 | 駐車料自動支払い | 自動支払機に支払う |
中国思想書には、紀元前の古くから大衆管理のノウハウが解説されています。このように、事細かに管理されると息がつまります。
創造力、想像力が著しく失われるようで、複雑な気分になりました。
このたびの体験で、それぞれの世代に雇用を用意し多くの人材を配して麗しい情景のようにも感じましたが、一昔前に体験した隣国の状況を挙げておきます。
今では改良されたかも知れませんが、人口の多いある隣国で自動販売機の前に係員がいて、下から出てきた商品を手渡している光景を思い出しました。
ものごとがひとつの流れに傾くと元に戻すには、かなりのエネルギーを必要とします。江戸時代には奢侈禁止令を発布して華美な服装を取り締まりました。
消費生活が成熟した昨今では、為政者が庶民生活を統制することは難しくなり、法令により風潮を具体的に変えることは少なくなりました。
時計の振り子のように放っておいても行き過ぎが元に戻ってほしいものです。
それでも経済が好調な時期には、不自由を感じません。どんどん、オリンピックの規模が拡大され、膨大な開催費がかかるようになると、誘致に手を挙げる都市が少なくなってきました。今では、オリンピック管理機構が質素な開催を主導している有様です。
わが国では、高度成長期には風呂の中でテレビを見られるシステムバスが売り出されました。一定のモラルを超えて競争が拡大すると自滅に向かいます。
スーパーでは、店内がきれいでないと客が集まらなくなり、改装競争になります。お茶を飲みながら店内で購入したお菓子や弁当が食べられるイートインコーナーが新設されています。
このほか、巨大な業務用整水器が設置され、無料で浄水を汲めるサービスが一般化しています。衣料品なども取り扱う総合スーパーではベンチを用意し、加えて座布団も置かれています。
一方、過度のサービスは利益を圧迫しているかのようです。点滅する蛍光灯が放置され、壊れたトイレの修理に手間取っているスーパーを見かけます。
玄関先だけが豪華でもバランスの取れていない家屋には、違和感があります。お風呂でテレビを見る商品のコマーシャルは見かけなくなりました。
ふた昔も前の話ですが、あるホテルで近くの店の閉店セールが開かれ出掛けました。かつてはモダンなホテルでしたが古くなり、店じまいセールに会場を貸すまでになったとの思いを感じました。
もっとも大きな違和感は回転ドアが油きれを起こしていて、キーキーと音がしたことです。すべてに通用することですが、末期状態には細かな配慮が欠如する例です。
利益を上げるには様々な策が考えられます。調味料の蓋の穴を大きくして売り上げを増やした例は有名です。
このやり方は、たびたび使える施策ではなく、メーカーにはありがたくない例として語られています。
酒税を克明に研究し、第3のビールを開発しても酒税が改訂されては元の木阿弥です。
人口が自然増加し、消費が増える時代の方策がまだ強固に残っています。元に戻すにはかなりの痛みが生じます。持続可能な発展を目指すには、我慢の時代と認めざるを得ないでしょう。
師走に突入し、今年もあとわずかを残すのみとなりました。忘年会、大掃除、クリスマス、大晦日と順に訪れます。
そして、正月を迎え、2日～3日と第93回、箱根駅伝です。
今回、メガネスーパー前にあった往路の小田原中継所が、これまでの復路の小田原中継所《小田原市風祭のかまぼこ屋さん鈴廣前》に変更になりました。
93回 2017箱根大学駅伝まで、あと29日です。
ハイパーラプス動画を作成するに当たり地図データは、《google Maps JavaScript API v3》を利用していますが、機能が制限された無料版です。2点間の最適ルートを決めるとき、経由地は最大8点に抑えられています。
この制限により忠実に駅伝コースをたどることは困難で、ここでは概略コースを表示していますが、それでもそこそこの案内になっています。
また、一（十）区と四（七）区はもともと、往路と復路のコースが多少、異なります。その差は小さいので、コース案内は往路だけが用意されています。
読売新聞東京本社前から箱根・芦ノ湖までを動画で案内します。全画面表示でご覧ください。
動画の作り方は、動画の中に示した『参照資料』により類推できます。当動画はまだ発展途上であり、ソースコードなどの公開は別の機会にゆだねられますが、経由点の決定例を示します。
上の設定は始点、終点と経由点の名称と位置です。経由点の属性でCは中継所、＠は分岐点で駅伝コースが選ばれるように追加された地点です。
8番目の小涌谷駅を省略すると、箱根新道と呼ばれる国道1号を通って芦ノ湖へ案内されます。
大手町から箱根芦ノ湖までの110ｋｍ弱の駅伝コースを、上で示した10ポイントの地図データからストリートビュー動画を作成します。
ルートを選択するにあたり、高速道路の使用/未使用を設定しても思い通りに進行するとは限りません。その場合、分岐点の少し先を経由点に指定して所望するルートになるときと、それでも本線に戻ることがあり、試行錯誤を繰り返し、ようやく思い通りのルートを決定した例を示します。
限られた資源を使って最大限の効果を生むには、相当の努力を必要とする例を述べました。
①比叡山延暦寺までご案内
②東京マラソン2016コース全貌
③グーグルストリートビューとハイパーラプス
④GoogleのStreetViewを動画にするHyperlapseを使ってみる
⑤Marquee with CSS プラグイン第3弾