桜の開花が誇らしげに報道され、やがて満開のニュースに取って代わり、季節は歩みを止めません。
寒風から心地よい風が吹く季節の到来に足取り軽く、タウンウォッチングしました。そこかしこに太陽光パネルの林立に驚かされました。
太陽光発電と言えば未利用地の体育館の屋根や公共ビルディングの屋上、荒地、未耕作地などの利用に限られていましたが、今では耕作適地にも太陽光パネルが設置されています。
高速道路上や電車の車窓からもかつては見られなかった太陽光パネル群が目立ちます。
何か時計の振り子が一方向に触れ過ぎているように感じます。
原発利用にかげりがさし、自然エネルギー利用に水を差すきかと問われそうですが、急激な変化には大きな心配があります。
法律もコロコロ変わります。周辺住民との共生は進んでいるのだろうか。
杞憂に終わることを期待して、タウンウォッチングで取得した春爛漫30景をお届けします。
これまで時間差でバラ曲線（魅惑的な曲線美など）を描いてみました。JavaScriptで描く場合はcanvas（ブラウザ上に図を描くために策定された仕様）とsvg（同様な仕様、scalable vector graphics）を使うと便利なことも述べました。
バラ曲線は数個のパラメータを持ち、少し変えるだけで様々なカーブになります。パラメータをその都度、入力すれば所望する曲線が描かれるサイトが多く存在します。ここでは用意したパラメータで8件の曲線をダイナミックに描画します。
計算式はすべてに共通であり以下を採用しました。ここで取り上げたバラ曲線は一般的なものの変形です。b,c,dがパラメータです。式は極座標で表現され、ｒは半径で、角度（θ）は0～2πの範囲で変動します。
五葉線等の軌跡を求め、配列ax,ayに格納するJavaScript核心コードを示します。
a=1+sin(c*θ*d)/4
r=a/2*(1+b*sin(θ*d))
| 番号 | 刻み値 | b | c | d |
|---|---|---|---|---|
| 0 | 0.0015 | 0.4 | -6 | 3 |
| 1 | 0.0015 | 0.2 | -2 | 7 |
| 2 | 0.0015 | 0.2 | 2 | 4 |
| 3 | 0.0015 | 0.3 | -3 | 5 |
| 4 | 0.0020 | 0.1 | 2 | 6 |
| 5 | 0.0010 | 0.2 | -6 | 3 | 6 | 0.0025 | 0.2 | 2 | 5 |
| 7 | 0.0020 | 0.1 | 2 | 9 |
b,c,dパラメータにおいて、bは外形サイズに影響し、cはその絶対値が大きいほど頂点と頂点間の曲線が波打ちます。dは5角形、6角形、9角形などの頂点数です。パラメータによって曲線が複雑化するのもあり、連続線になるように角度の変化幅を刻み値により設定しています。
JavaScriptでプログラミングしましたが、ブラウザにより動作が異なるので、安定した動作になったGoogle Chromeでの描画を、デスクトップキャプチャーで動画に落としたものをYoutubeに投稿しました。
svgは使用せず、すべてcanvasにて描画され、時間差表示はsetTimeout関数にて制御されています。
ネット社会が根付き、いたるところでその恩恵を享受しています。生活の指針に、すでに去った話題、不明なことがらが生じたときに、インターネット検索は大きな手助けになります。頑迷な人々はインターネットの功罪の罪を強調して毛嫌いする人も存在します。新しいものへの過小評価というより、古いものからの切り替えができない人の最後のあがきともいえましょう。
物事の移行期には、良いこと悪いことが交錯しながら、やがて良貨が悪貨を駆逐して落ち着くべきところに落ち着くのが世の習いでした。安定期前の激動期には敢えて取締りなどをせずに自然淘汰に任せるのが良策とも言われてきました。
ネット社会は安定期に入ったと感じます。この辺りでこれまでのことを整理してみるのも良い時期でしょう。パソコンを使っているとやたら脅しまがいのアドバイスが横から入り、自社のソフトウェアを売りつけようとします。初心者の不安を煽って売り上げを伸ばすのはいかがなものでしょう。
本当に著名な会社とタイアップしているのか疑問を感じるものもあります。また、かなり高い機能が含まれている無料版をダウンロードさせて、シェアを固め後日、バージョンアップを薦めてきてそれに応ずると以前の機能が使えなくなり有料版を購入するように仕向けるものもあります。
無料版なのにバージョンアップサービスを薦められたら、何かあるのかなと疑問を持ってもよいのではないでしょうか。
4月から『暮しの手帖』を立ち上げた人々をモデルにしたドラマがスタートするようですが、コンピュータ版暮しの手帖のような辛口ご意見番が生まれてもよい頃と感じます。
新しいことを進めるに当たり、炎上商法、誹謗中傷、流言飛語…など様々な障壁が立ちはだかっていますが、広告料の多寡により評価に手心を加えるようなことをしない公平な評価をする国士の出現を待望します。
交通機関、公共機関、コンピュータOS、強大なアプリケーションなどは、いつもビッグデータに接しています。集めた情報をどこまで自由に利用できるかのコンセンサスが明確に定まっていないと思われます。
知人から『○○の竹林の賢人から』というタイトルでメールがときどき届きます。○○は地名です。すると○○に出かけた際は、ホテル△△にお泊りください旨の広告が入ります。
これはメールソフトがタイトルを検索して広告に利用していると思われます。行動が見張られているようでいい気分はしません。
季節の変わり目の行事をもっと大切にしたいものです。イケイケどんどんも悪くありませんが、整理、見直しが必要です。歳時に想いを馳せるのも一興です。
野球ピッチャーの球跡を表現するようにスローモーションで、関数が入り混じった高等数式をビジュアルに描画できないものかと探求していました。
かつて、条件に応じて動的に図を変化させたり、アニメーションを実現するために、FlashやJavaアプレットが使われてきました。最近は、HTML5の仕様が落ち着き、それをサポートするブラウザが充実し、ブラウザ上に楕円、直線、四角形などを描画するために策定された仕様であるCANVASやSVGの利用が盛んになっています。
ブログの記事を表現豊かにするために、CANVASを使っていましたが、動的コンテンツの表現でCANVASでは複雑化したので、このたび、SVG(Scalable Vector Graphics)を使いました。CANVASとSVGの特徴について、記録にとどめます。
縦軸を正弦値、横軸を位相としたとき、位相を時間に同期して正弦値を表現する場合にはCANVASは非常に使い勝手のよいツールでした。このように過ぎ去った軌跡を残しておく場合は問題ありませんが、ホームランボールが野球場の上空を移動するように瞬間、瞬間を表示する場合にはCANVASは似合いません。
CANVASでは表現したオブジェクトを動かす場合は、直前の画像を消して新しい位置に画像を表現する方法が取られます。SVGでは描画位置を指定すれば、前の画像を消すことなく新しい位置に画像が描画される機能が用意されています。
半径aの円が直線上を転がり、その円の中心からb地点の軌跡を描くトロコイド曲線を表現するときには、Svg要素がピッタリでした。それを含む魅惑的な曲線をYoutubeに収録しました。数学の授業などに使ってもらえればありがたいです。
数式などがたくさん出ると肩が懲ります。今度は魅惑的な脚線美について語りたいです。
8件の魅惑的な曲線をYoutubeに投稿しました。直前のブログに載せたものと重なるものがありますがYoutubeの動画は一気にまとめ表示されています。
今日、福岡でソメイヨシノの開花が発表されました。例年、全国のトップは四国や東京が多かったのですが今年は九州から桜前線が始まりました。
春風駘蕩、そよそよと春風が心地よい季節の到来です。色とりどりの花が咲き乱れる候、希望の春です。花にたとえたグラフィックデザインに挑戦しました。新世界に飛び出す若者へのプレゼントです。
JavaScriptのソースコードも付いています。ソースコードをコピー＆ペーストしてたとえばRose60.htmlファイルを作成し、Chromeなどのブラウザで実行します。
サーバーにアップロードせずにローカル環境でも動作します。Chromeでは期待した結果が得られました。FireFoxとIE11では見た目は問題なく動作しましたが、動作速度がかなり遅いことが確認されています。
ページを開くとすでに実行されていますので、曲線の妙味までスクロールして再読み込みボタンをクリックして再実行してください。
<html>
<head>
<font size=6 color='gold'>曲線の妙味</font><font size=4 color='green'> バラ曲線の集合 ©Aidesign,2016 V1.00<BR>
<script type="text/javascript" charset="Shift_JIS">
const SIZ1=300; //バラ曲線の半径
const ZX=325; //描画円の中心x
const ZY=310; //描画円の中心y
const DN=0.4; //バラ曲線のパラメータ
const c=0.005; //刻み値
const t3=4; //処理緩慢用
var vx, vy;
var cmd=""; //polyline座標位置を作成
var s=0.0; //0～10.0
var deg=0; //回転角
var ct=count=0; //制御用カウンター
var ax = []; //バラ曲線の軌跡x値を格納
var ay = []; //バラ曲線の軌跡y値を格納
function start() {
draw12initial();//バラ曲線の軌跡を計算する
draw12(); //バラ曲線を描画する
}
function draw12initial(){ // function draw12initial() バラ曲線の軌跡を計算する
for(s=0; s<=10.015; s+=c){
var q = s * Math.PI;
var p = DN * q;
vx = ZX + SIZ1 * Math.sin(p) * Math.cos(q); //x
vy = ZY - SIZ1 * Math.sin(p) * Math.sin(q); //y
ax[count] = Math.round(vx*1000)/1000;
ay[count] = Math.round(vy*1000)/1000;
//console.log("%f3 %f3", ax[count], ay[count]);
count++;
}
}
function draw12(){ // function draw12(), バラ曲線を描画する
//console.log("%d %f3 %f3", ct, ax[ct], ay[ct]);
if(ct < count){ //確定ぶん描画する
cmd=cmd+" "+(ax[ct]+2)+","+(ay[ct]+2); //"0,100 40,200"
curve.setAttribute("points", cmd); //バラ曲線
setTimeout('draw12()', t3);
ct++;
}
else{ //バラ曲線描画の処理、回転しながら右に移動
if((deg%360)==0) document.getElementById("s6").play();
var w = 360 - Math.abs(deg - 360); //右端+ 0 ～ 360 ～ 0+右端
var rot = 'translate(' + w + ',0) rotate(' + w + ',325,310)';
//console.log("%d ROT=%s", w, rot);
all0.setAttribute("transform", rot); //円を移動,回転
ln1.setAttribute("x2", 690+w); //バラ曲線
if(deg++ < 720) setTimeout('draw12()', 10);
else document.getElementById("s6").play();
}
}
</script>
</head>
<body onLoad="start()">
<svg width="1010" height="620">
<line id="ln1" x1="20" y1="617" x2="690" y2="617" style="stroke:black;stroke-width:2"/>
<g id="all0" transform="translate(50, 0) rotate( 0, 325, 310)">
<polyline id="xaxis" style="fill:deeppink; stroke:darkgreen; stroke-width:2" points="
327, 90 319,103 304,103 316,112 312,126 324,117 336,126 332,112 346,103 331,103 327, 90"/>
<circle id="circ1" cx="325" cy="310" r="304" stroke-width="2" stroke="blue" fill="none"/>
<symbol id="part"><polyline id="curve" style="fill:none; stroke-width:4;" points=""/></symbol>
<use id="ra" style="stroke:red" xlink:href="#part" transform="rotate( 0, 325, 310)"/>
<use id="rb" style="stroke:khaki" xlink:href="#part" transform="rotate( 30, 325, 310)"/>
<use id="rc" style="stroke:deepskyblue" xlink:href="#part" transform="rotate( 60, 325, 310)"/>
<use id="rd" style="stroke:pink" xlink:href="#part" transform="rotate( 90, 325, 310)"/>
<use id="re" style="stroke:aquamarine" xlink:href="#part" transform="rotate(120, 325, 310)"/>
<use id="rf" style="stroke:coral" xlink:href="#part" transform="rotate(150, 325, 310)"/>
<use id="rg" style="stroke:cyan" xlink:href="#part" transform="rotate(180, 325, 310)"/>
<use id="rh" style="stroke:yellow" xlink:href="#part" transform="rotate(210, 325, 310)"/>
<use id="ri" style="stroke:royalblue" xlink:href="#part" transform="rotate(240, 325, 310)"/>
<use id="rj" style="stroke:magenta" xlink:href="#part" transform="rotate(270, 325, 310)"/>
<use id="rk" style="stroke:indigo" xlink:href="#part" transform="rotate(300, 325, 310)"/>
<use id="rl" style="stroke:bisque" xlink:href="#part" transform="rotate(330, 325, 310)"/>
</g>
</svg>
<audio id="s6"><source src="https://aidesign.lolipop.jp/wp-content/uploads/2015/09/select06.mp3"></audio>
</body>
</html>
動的コンテンツの魅力
インターネットの特徴は、即時性にあります。オンラインやリアルタイムがすべてに優れているとは限りませんが、それを必要としているところで、その特長を発揮しないのは道理に合いません。
年代別売上高、出生率を表すグラフに代表されるように、多くの折れ線や棒グラフにおいて、横軸は時間を表します。
グラフを表示するとき、時間の経過を明示すべく時間差表示をするとアピール度が向上します。
スポーツニュースの視聴率が上がったり、小中学校の数学の授業が楽しくなるかも知れません。ここに動的コンテンツ５態を掲示します。
収録内容
五つの動的コンテンツを収録しました。なかでもトロコイド曲線はhtml5のSvg要素を用いてテキストを動きのあるグラフィックに変換しています。円の回転と時間の経過に応じて曲線が伸びる様を閲覧していただけたらありがたいです。
０．ばら曲線
１．トロコイド曲線
２．自動運転をシミュレートする
３．桃の花びら
４．ローテクな目覚まし時計
動的コンテンツの表示法
ウォーターフロント画像の直下ボタンはビデオレコーダーを操作するものです。その下のばら曲線からローテクな目覚まし時計までのボタンは動画ファイルの読み込みメニューであり、｢ボア｣という音が鳴ったら動画の選択完了です。
その後に、再生-フル-ESCで元に戻ります。次の動画を見るには動画を選択して再び、再生-フルをクリックして動画を表示し、表示の終了後にESCを押下して次の操作に進みます。
ブラウザChromeで正常な動作を確認しました。
感想
動的なコンテンツの利用は美術学校などに限られ、まだまだ低いといえます。便利な機能が備わっている環境にありながら、宝の持ち腐れはもったいないです。さらなる普及に貢献したいと考えています。
動的コンテンツを表示する
動的コンテンツを表示します。(V1.01)©Aidesign,2016
IT型最先端卒業式
卒業式のシーズンです。校長先生が卒業証書を読み上げ、卒業生が感激の面持ちで卒業証書を受け取るシーンが思い起こされることでしょう。
昨日、あるテレビ局からお笑い芸人により演じられたIT型最先端卒業式番組が放映されていました。そこでは紙に印刷された証書ではなく、スマホで学校のサーバーから証書を伝達していました。
「iPad卒業証書」などで報じられているようにIT卒業式は現実のものとなっています。学校からの卒業証書とともに卒業生がみずから編集した卒業アルバムを収録したスマホが校長先生から授与されます。
鉄腕アトムは遥か遠い世界と思っていましたが、今ではロボットが活躍し現実のものとなっています。将棋、囲碁においては人工知能がプロ棋士を破っています。
タブレットやスマホが使いやすくなって、紙で作られた生徒手帳や修学旅行のしおりは不要になり、学校のサイトを閲覧するだけになります。
新入生への校歌習得で応援団に気合を入れられることもなくなるでしょう。たとえば、ユーミンのような卒業生がレコーディングしたり、Youtubeに投稿した曲を頼りにスマホで覚えられます。
フロントランナー
先頭を切る先駆者には世間の荒ぶる風がもろに当たります。市民権を得るまでは様々な抵抗に会いながら、やがては尊敬を勝ち得るようになります。
わが国は古来から、多くの外来文化を取り入れてきました。和洋折衷など一方向に流れないことが特長です。
トップを切る走者に乾杯を！
古くからテキストや画像を表現するために、紙を用いていました。ここに至り、インターネットが普及して電子メディアに表現することが多くなり、時間要素が加わりました。
表現技術の進歩に伴い、最終的な静止結果を閲覧者に訴えることを第一義にしながら、途中経過の表現に気を配るようになりました。
当ブログでも、テレビにおける付箋紙をめくるやり方などについて、何度か取り上げてきました。ここで、動的表現をもっと掘り下げるべく電子アートやビジュアルデザインとして確立された分野に踏み込んでみようと考えています。
統合環境開発ツールProcessingが用意されていて、このツールを使うと動的に様々な表現ができそうです。これを進めるには、気力、体力が必要です。
その前にcanvasに近い仕様のsvg(Scalable Vector Graphics)を探求することにします。 svgは今では、ほとんどのブラウザでサポートしており、タッチパネルのズームアップによる画像の荒れが生じないことが最大の魅力です。
PNG,JPEG,JIF,BMP,TIFなどの画像フォーマットがラスタ形式を仕様にしているのに反してsvgは拡大縮小可能なベクタ形式の画像という仕様から成っています。
①各ブラウザのSVGサポート状況
②WEBデザイナーのはじめての「SVG」
③SVGによるベクターグラフィック(1) (1/6)
④[SVG] viewBoxについての考察
⑤「10分でわかるSVG 基礎編」サンプル
⑥いまさら聞けないSVG、なぜ知られていないのか？
桃の節句をお祝い申し上げます。
桃の節句には桃の花、白酒、雛あられ、草餅、貝殻などを供えます。
桃の木には厄除けの効果があり、三人官女が持っている白酒、草餅のヨモギは邪気を祓うといわれています。貝殻は夫婦円満、子孫繁栄を願っています。
大勢の人が集まる繁華街で車の運転中に意識がなくなり、大きな事故が起きました。訪問先の道順案内や運転中の居住性には異常なほど最新技術を採用し、人と物の移動に貢献してきました。
燃費向上などかつてないほど車をめぐる技術が進歩しています。ここにきてまた、安全性が問われています。自動運転、ロボットタクシーが話題を提供しています。多くの先端企業が将来のビジネスモデルとして研究に取り組んでいます。
ここでは、予算がありませんので数式のグラフィック描画や移動先の予想などの観点から自動運転を模索してみます。
たとえ誤動作があったとしても安全側に自動的に移行するような方式（フェールセーフ）の採用が急務です。ここでは2台の車の移動先を確認し、衝突が起きそうな場合の回避策をシミュレーションしてみました。
探求するには華も必要です。そこで最初の車はリサジュー曲線を描くように走り、もう1台の車はアルキメデスの螺旋（らせん）を描きます。両車の走行スピードは意識せず、両車の距離で衝突を判定します。
リサジュー曲線
２つの曲線について、おさらいをしておきます。リサジュー曲線は直角な２方向の単振動を組み合わせたときに描かれる図形です。今回は極座標のｒ＝ｓｉｎ3θを用います。フランス人のリサジューという物理学者が研究を極めたそうでこの名が残っています。
パラメータの変更により様々な曲線に千変万化し、あざやかな軌跡を描くことから理系大学の校章に使用されているようです。
アルキメデスの螺旋
アルキメデスの螺旋はちょうど、蚊取り線香のような帯状の曲線を描きます。式は図のなかに示されています。螺旋は渦巻きとも言われ、幅が一定になるのが特徴です。
極座標で r ＝a θ（a は定数）から類推されるように、中心点（θ=0, r=0）の回りを一定の角速度で回転する直線上を一定の速さで運動する点 の軌跡といえます。
自動運転のシミュレーション
運転モードは２つあり、ただ数式にのっとり計算して得られた曲線上を走るなりゆき運転と2台の走行位置を確認し、衝突の恐れがある場合、一方の車が遠ざかるまで待機する自動制御運転があります。
なりゆき運転
最初は自動制御の対象でないなりゆき運転が開始されます。2台の車は中心点から走り出し、青色で表示される①車はリサージュ曲線上を、中心から離れる方向に反時計方向に走ったらカーブして中心に戻ります。
一方、赤色で表示される②車はアルキメデスの螺旋に則り、左巻きに渦巻いて進みます。なりゆき運転は、数式に導かれるコースを忠実にたどると衝突が起きることがあります。
衝突が起きると星型5角形が表示されます。衝突が起きても同一速度で遅滞なく進行するので再び衝突する可能性があります。
第2、第3の衝突が起きたら同様の衝突マークが表示されます。青色の経過時間が表示されたらなりゆき運転は終了です。
自動制御運転
なりゆき運転が終了すると、左上の自動制御運転ボタンをクリックして自動制御運転に進むことができます。なりゆき運転と同様に両車は数式に則って進行します。
両車の距離が短くなり、衝突が起きると予想される場合には、ピンク色の円が描かれ相手の車が離れるまで待機します。待機した回数が円の左に表示されます。衝突の判定は33ms間隔で確認され、待機した場合は車の進行にわずかな遅れが生じます。
両車のタイミングに変化があったため、なりゆき運転で発生した2度目の衝突処理（左上の矢印部の衝突）をすることがないように状況が変わっています。
自動運転の動作例
まとめ
車の運転でたった2台による自動制御運転をシミュレーションしました。実際はもっと多くの車が絡み合い、交差点も三叉路、五叉路と複雑です。
すでに運用中の自動運転車の事故が報道されています。まだ、全自動制御運転車は無理でしょうが、人間の不注意による運転を是正する自動運転は早急に実施する施策と思われます。