So-net無料ブログ作成
検索選択
前の8件 | -

"音楽再生ウェブ アプリケーション" [音楽再生ウェブ アプリケーション]


Canvas Area.

Controls for music.

If you want to play music, please select your music directory.
Please select the type of sound from the following.

If you want random sound output, please check the option below.

You can play the keyboard. Please select the octave number from the following.
Key assignment.
(z):c (s):cs (x):d (d):ds (c):e (v):f (g):fs (b):g (h):gs (n):a (j):as (m):b (,):c
(q):c (2):cs (w):d (3):ds (e):e (r):f (5):fs (t):g (6):gs (y):a (7):as (u):b (i):c
(Shift): Increase or decrease one octave.
Music List.

キーボード演奏が可能でヴィジュアライザーの機能が付いた音楽再生ウェブ アプリケーションです。

[手順: 1]
" Canvas Play / Stop " ボタンを押して下さい。

[手順: 2]
フォルダーを選択する為のボタンを押して、現れたウィンドウから音楽ファイルが入っているフォルダー (ディレクトリー)を選択して下さい。
この時、選択の為のウィンドウには、 " 開く " などの代わりに、 " アップロード " などと書かれたボタンがあるかもしれませんが、これを押して下さい。決して実際にインターネットにアップロードされたりは致しませんので御安心下さいませ。

[手順: 3]
" Music Play / Stop " ボタンを押して下さい。

すると、音楽の再生と共にスペクトラム アナライザーや音楽のアクセントに連動する花火のようなエフェクトのヴィジュアライザーが動作致します。
後は、キャンヴァス上を沢山クリック / タップしてみて下さい。
また、キーボードのキーを押してピアノのように音楽を演奏する事も出来ます。
オクターヴの移動も可能です。
尚、古いブラウザーや性能が低い端末では動作しなかったりすると思います。
もしも何か問題が生じても私は責任を取れませんので御了承下さいませ。

[このプログラムについて]
" HTML5 " の " Canvas " 要素を利用して画面の描画をしております。
このプログラムのコードは全てブログ記事のHTML文書内に " JavaScript " で記述したものであり、作成するに当たってテキスト エディターとウェブ ブラウザー以外は何も使用しておりません。
追加のライブラリーなどは一切使用せず、純粋にHTML5対応ブラウザーだけで動作致します。

音に関しては、 " Web Audio API " を利用して、独自の関数で波形を作って鳴らしております。
フォルダーの選択に " HTMLInputElement.webkitDirectory " という未だ標準化されていない機能を利用している為、動作環境は限られます。 " Firefox 54 " では動作確認済みです。

[ソースコード]
" Yahoo!ボックス " サーヴィスにソース コードのhtml ファイルをアップロードして公開させて頂きます。
次のリンク先のページにある " ダウンロード " ボタンを押すと当プログラムのhtml ファイルをダウンロード出来ます。
Yahoo!ボックス: https://yahoo.jp/box/4g9aEl


JavaScriptで並べ替えに "クイックソート" アルゴリズムを使用してみました。 [プログラミング]

データの並べ替えを高速に行う必要がある時、一般的に、最適なアルゴリズムと言えば " Quicksort " (クイックソート) アルゴリズムだそうです。

私はHTML5のCanvas要素とWeb Audio APIで簡易なミュージック プレイヤーを作ってみたのですが、音楽ファイルを含む多数のフォルダーがあるディレクトリーを読み込んだ後に、楽曲リストを名前順に並べ替える必要がございました。
そこで威力を発揮したのがクイックソートです。
数千曲のリストも素早く並べ替えられます。

以下に私の使用したコードを掲載致しますが、このコードは書き方として冗長なものとなっております。
また、始めに基準値を設定する為の複数個のサンプル データの中央の値を取る為にバブル ソートを行っておりますが、これについても実はもっと簡単に、サンプル数を3つに固定して単純な条件分岐だけで中央の値を取得する事も出来ます。

var data = [2,6,1,4,9,23,11,41,35,26,14,19,55,38,17,25,18,40,31,45,34,5,10,7,3,8,12,22];
var data2 = ['abc','aaaaaa','xy','ABC','123','12','5678','98','11F'];


// クイックソートを行う関数の宣言。
function quicksort( arrayOfData, boundaryOfLeft, boundaryOfRight )
{
 if( boundaryOfLeft < boundaryOfRight )
 // 区間内に複数個のデータがあるならば処理を行う。
 {
  // 奇数個のデータの中央の値を基準値として設定する。
  var sampleData = [];
  var pivot = 0;
  var randomNumber = 0;
  var numberOfSample = 3;
  var i = 0;
  var j = 0;

  // ランダムにサンプル データを抽出する。
  for( i = 0; i < numberOfSample; i++ )
  {
   randomNumber = Math.floor( Math.random() * (boundaryOfRight + 1 - boundaryOfLeft) + boundaryOfLeft );
   sampleData[i] = arrayOfData[randomNumber];
  }

  // バブル ソートを行う。
  for( i = 0; i < sampleData.length - 1; i++ )
  {
   for( j = sampleData.length - 1; j > i; j-- )
   {
    if( sampleData[j] < sampleData[j - 1] )
    {
     temporaryData = sampleData[j - 1];
     sampleData[j - 1] = sampleData[j];
     sampleData[j] = temporaryData;
    }
   }
  }

  // 中央の値を取る。
  pivot = sampleData[(numberOfSample - 1) / 2];

  i = boundaryOfLeft;
  j = boundaryOfRight;
  var temporaryData = null;
  while( true )
  {
   while( arrayOfData[i] < pivot )
   // 基準以上の値に出会うまで移動する。
   {
    i++;
   }

   while( arrayOfData[j] > pivot )
   // 基準以下の値に出会うまで移動する。
   {
    j--;
   }

   if( i >= j )
   // もし左右の注目位置が一致または交差したならば処理を抜ける。
   {
    break;
   }else
   // 左右の注目位置が未だ離れているならばその位置の値を交換する。
   {
    temporaryData = arrayOfData[i];
    arrayOfData[i] = arrayOfData[j];
    arrayOfData[j] = temporaryData;
    i++;
    j--;
   }
  }

  if( boundaryOfLeft < i - 1 )
  // 未だ左側の区間内に複数のデータがあるならば処理を繰り返す。
  {
   arrayOfData = quicksort( arrayOfData, boundaryOfLeft, i - 1 );
  }

  if( j + 1 < boundaryOfRight )
  // 未だ右側の区間内に複数のデータがあるならば処理を繰り返す。
  {
   arrayOfData = quicksort( arrayOfData, j + 1, boundaryOfRight );
  }
 }
 return( arrayOfData );
}


// クイックソートを実行する。
data = quicksort( data, 0, data.length - 1 );
data2 = quicksort( data2, 0, data2.length - 1 );

console.log( data ); // 1,2,3,4,5,6,7,8,9,10,11,12,14,17,18,19,22,23,25,26,31,34,35,38,40,41,45,55
console.log( data2 ); // 11F,12,123,5678,98,ABC,aaaaaa,abc,xy




共謀罪新設で刑法体系が様変わりしてしまう。 [邪悪, 政治]

本日、2017年6月15日、 " 共謀罪 " の趣旨を盛り込む、 " 改正組織的犯罪処罰法 " (共謀罪法)について、与党が参院法務委員会の審議を打ち切り、参院本会議にて野党の批判を無視して強行採決され、成立してしまいました。
これにより、日本の刑法体系は大きく転換される事となりました。

以前から訴えている通り、この共謀罪法の内容はテロ抑止の為のものというよりも、政権や政策に反対する人達など一般の市民団体や人権活動家、環境活動家などへ心理的圧力を加える為のものであると言わざるを得ません。

実際に犯罪を犯さなくても罪に問われる事になるのです。
保安林で茸採りをしただけでも犯罪準備行為の疑いがあるとして捜査対象と成り得るとされております。

一般の人は対象にはなりませんという政府の説明は只の口約束であって、実際は市民団体と反社会的勢力を明確に線引きしておりません。
普通の市民団体の中から一部の過激な行為をする人が出たとして、その途端に反社会的勢力と判断して関係無い人達まで捜査対象と成り得るのです。(デモ行進中に一部の人が警官隊と衝突する場合があります)

実際に処罰されるかどうかよりも寧ろ、捜査対象となる事が問題です。
沖縄のアメリカ軍基地建設反対運動の旗振り役の男性がフェンスの一部を切った事を理由に半年近く拘留されていた事を鑑みると、共謀の疑いで長期間に亘り拘留される可能性もあります。

中国やロシア、シンガポールなどのように、事実上の独裁体制を構築する為のものです。

共謀罪法を根拠にして警察組織が一般市民のスマートフォンの通信傍受を行ったり、人と人との繋がり、関係性も捜査される事になると危惧されております。

自分には関係が無いと思っている人が居るようですが、実は秘密裏に捜査対象に成り得るというプレッシャーを加えられているのです。
そして、世の為、社会の為と考えて活動していた市民団体や活動家の人達が萎縮する事により、少しづつ、しかし確実に社会は劣化して行くのです。

どうも、アジア諸国(とアフリカ諸国)では人権意識や民主主義が成熟しないようで、悲しい限りです。
日本は中国やロシアやシンガポールのような国になってはいけないのです

私のブログ記事: 安倍政権になってからの危機的な一連の変化。
http://crater.blog.so-net.ne.jp/2016-03-18-1

Firefox 54がとてつもなく速い!! [ソフトウェア]

本日、Firefox ウェブ ブラウザーを最新の " Firefox 54 " へとアップデート致しましたところ、そのあまりの高速っぷりに驚いてしまいました!

Firefoxの動作は今までも充分速く感じていたのですが、今度のFirefox 54は桁違いの軽快さです。
マルチプロセス動作が標準で有効化され、ヴィデオカードなどGPUによるハードウェア アクセラレーションも対応が進み、メモリーの使用量は少ないままに、ページの表示は一瞬で終わりますし、HTML5のCanvas要素を用いた自作のウェブ アプリケーションも動作が更に滑らかになりました!

こんなに速くなるとは予想しておりませんでしたが、棚からぼた餅です。
Firefox 最高!


(共謀罪最低!)

Web APIでディレクトリーを読み込む機能を標準化して欲しい。 [プログラミング]

この度、自作のウェブ プログラム音楽ファイルを読み込んで音楽を再生出来るように致しました。

"音楽再生ウェブ アプリケーション"
http://crater.blog.so-net.ne.jp/2017-06-22-1

JS_Music Player_SS_(2017_06_22)_1_Cropped_1 HTML5 ミュージック プレイヤーのスクリーンショット画像。 黒い背景の上に青色の二重の光る円環と橙色の二重の光る円環があり、それぞれの円環の中心からその円環と同じ色の多数の輝く粒子が放出されている。 画面の下方には音楽のスペクトラム アナライザーのヴィジュアライザーが描画されており、垂直の青色のバーが多数横方向に並んで伸び縮みしている。 青色のバーは明るさと彩度と色相に微妙なグラデーションが掛かっている。
https://c1.staticflickr.com/5/4242/35325665621_235d324df3_o.png

これは自作のHTML5 音楽再生ウェブ アプリケーション プログラムで音楽ファイルを再生させながらヴィジュアライザーを表示している状態のスクリーンショット画像です。

音楽ファイルの読み込みには " HTMLInputElement " を利用しております。

ファイル入力の標準化された方法と致しまして、HTMLの " input " 要素で " type="file" " 、 " multiple " 属性を設定する事でウェブ ブラウザーの標準のファイル選択用のボタンが画面に表示され、それを押すとファイルを1つまたは複数選択して参照する事が出来ます。
私は以前作成した " HTML5 インタラクティヴ ジェネレーティヴ ディジタル アート " ではこの方法を利用致しました。

ですが私が新たに作成した " 音楽再生ウェブ アプリケーション " では、非標準の " HTMLInputElement.webkitdirectory " を利用して音楽ファイルが入っているフォルダーのあるディレクトリーを読み込むように致しました。

そして、読み込んだファイルの相対パスとファイル名に基づいてファイルの順序をクイックソート アルゴリズムで並べ替えてから " window.URL.createObjectURL( fileList[i] ) " で選択したファイル毎のURLを生成させ、音楽再生時に " XMLHttpRequest " でURLからデータを取得し、 " audioContext.decodeAudioData() " で音楽データをデコードして、バッファーにデータを入れて出力させます。

選択したフォルダー以下にある全てのフォルダーと音楽ファイルを読み込んでリストにして再生出来ます。

現状では、セキュリティ上の配慮からディレクトリーへのアクセスが可能な " HTMLInputElement.webkitdirectory " はWeb標準化されておりません。
その為、ヴェンダー プリフィクスが付いており、仕様が固まっていない上、将来標準化されるかどうかも不透明です。
一応、現在主流のブラウザーは対応しているようです。

この機能は非常に利用価値が高いものですので、是非とも標準化して心置き無く使用出来るようになって欲しいところです。

"MDN" (Mozilla Developer Network)の "HTMLInputElement.webkitdirectory" のページのURL:
https://developer.mozilla.org/en-US/docs/Web/API/HTMLInputElement/webkitdirectory

"YaCy" が安定性向上のアップデート配信しました。 [P2P検索エンジン YaCy]

->->
[2017年6月15日追記]
私の環境で最新版のYaCyがCPU負荷100%になってしまう現象が確認されました。
この件についてバグ レポートを致しましたところ、回答を頂きました。
どうやらSolrの問題だそうで、私のデータが大き過ぎる為に引き起こされる現象であるようです。
私の現象の場合、 " yacy/defaults/solr/solrconfig.xml " というファイルの " <str name="buildOnStartup">false</str> " という項目に " <searchComponent name="suggest" class="solr.SuggestComponent"> " と書き加える事により問題が解消致しました!
<-<-

先日、P2P通信技術による分散型インターネット検索エンジンである " YaCy " (ヤスィー)のアップデートが配信されました。
YaCyのヴァージョンは、 " 1.921/9236 " となっております。
このヴァージョンでは全文検索エンジンがSolr 6.6へヴァージョン アップしております。

注意点と致しまして、このヴァージョンではJava 8が必要となっております。Java 7以前のヴァージョンのJava VMを利用している方は最新のJava 8をインストールしてからYaCyをアップデートするようにして下さい。

Java 8が利用出来るようにした後、既にYaCyを利用している方は、管理画面から最新のリリースをダウンロード、インストールしてアップデート出来ます。
未だYaCyをインストールしていない方は、まず公式ウェブサイトよりヴァージョン 1.92をダウンロード、展開、立ち上げてから同様に管理画面より最新版にアップデート出来ます。

私はYaCy 1.921/9236へアップデートしたところ、以前は時たま " UNRESOLVED PATTERN " というエラーが出る事があったのですが、この様な不具合は無くなりました。

また、YaCy Grid (YaCy/2)の開発も進んでいるようで、今後数ヶ月以内に利用可能になるようです。

"YaCy" の公式 "Twitter" アカウントのURL:
https://twitter.com/yacy_search

"YaCy" の公式ウェブサイトのURL:
http://yacy.net/en/index.html

[ブログ記事]
分散型検索エンジン "YaCy" が正式に日本語化されました。
http://crater.blog.so-net.ne.jp/2016-02-25

検索エンジン "YaCy" は実用性充分です。
http://crater.blog.so-net.ne.jp/2015-10-15

分散型検索エンジン YaCy の導入解説
http://crater.blog.so-net.ne.jp/2015-07-21

分散型検索エンジン YaCy のアップデート
http://crater.blog.so-net.ne.jp/2015-06-25

分散型検索エンジンYaCyについての解説動画
http://crater.blog.so-net.ne.jp/2015-03-22

Ubuntu PCでYaCy検索エンジンの為のポート開放の設定
http://crater.blog.so-net.ne.jp/2014-11-06

音楽と干渉する重低音の唸りが、とても心地良い。 [音]

JS_Art_SS_(2017_05_23)_2_Cropped_1 HTML5 インタラクティヴ ジェネレーティヴ ディジタル アートのスクリーンショット画像。 黒い背景の上に1つの光の円盤がある。 光の円盤からは 眩しく光り輝く青緑色の粒子が多数放出されており、青緑色や青紫色のリボンのような曲線が多数くねりながら放射されている。 光の円盤の周囲には青緑色の光輪がある。
https://c1.staticflickr.com/5/4272/34845047985_98d357231a_o.png
これは自作のHTML5 インタラクティヴ ジェネレーティヴ ディジタル アートのCanvas上をクリックして音を出した瞬間のスクリーンショット画像です。

自作のウェブ プログラムである、 " HTML5 インタラクティヴ ジェネレーティヴ ディジタル アート " では力強く迫力のある重低音を発する事が可能です。

HTML5のCamvasと "JavaScript" で音声処理と画像描画。
http://crater.blog.so-net.ne.jp/2016-06-30

音楽再生ソフトウェアの " Audacious " で重低音を含む楽曲を再生させ、その曲の中の重低音に合わせて、このウェブ プログラムにて重低音を再生させると、楽曲中の重低音とウェブ プログラムの発する重低音が干渉し、唸り(うなり)を上げます。

重低音が良質な楽曲と言えば、 " 宇多田ヒカル " さんの昔の名曲達がまず思い出されます。
宇多田ヒカルさんの昔の楽曲は豊かな重低音を巧みに使用し、その重低音のヴァリエーションも豊富であり、しかも濁らずに美しく楽曲に調和しております。

私は宇多田ヒカルさんの名曲、 " SAKURAドロップス" などを再生させ、自作ウェブ プログラムの重低音と合わせてみましたところ、それはそれは凄い体験が出来ました。
今までにライヴ コンサートやストリート ダンス イヴェントへ行った時などでも経験出来なかったような、重低音の渦に飲み込まれるような、筆舌に尽くし難い位の心地良い体験でした。

このウェブ プログラムでは音の高さや持続する長さなどは自在ですので、自分が心地良いと感じる唸り具合を探る事が出来ます。
周波数の差が小さい低周波音同士の唸りですので、その唸りは耳に聞こえるよりも低い可聴帯域外の低周波音となりますが、重低音の振幅として耳と体で感じ取る事が出来ます。
私は音楽再生ソフトウェアの " Audacious " で音量を7割程に下げて音楽を再生させ、ウェブ プログラムの方で凡そ50[Hz]位の重低音を再生させると最も迫力がありました。

勿論どのような楽曲でも良い訳ではなく、このウェブ プログラムとの相性と言ったものがあるようで、全く心地良くない組み合わせもございます。

しかしながら、重低音好きの人には是非体験してみて貰いたいと思うものでした。
お試しの際には、大型のサブウーファーなどの御使用を推奨致します。

->->
[2017年6月15日追記]
自作のウェブ プログラム自体に音楽再生機能を追加致しました。

JS_Art_SS_(2017_06_12)_1_Cropped_1 HTML5インタラクティヴ ジェネレーティヴ ディジタル アートのスクリーンショット画像。 黒い背景の上に1つの光の円盤がある。 光の円盤からは 眩しく光り輝く青色の粒子が多数放出されている。 光の円盤の周囲には青色の光輪がある。 画面の下方には音楽のスペクトラム アナライザーのヴィジュアライザーが描画されており、垂直の青色のバーが多数横方向に並んで伸び縮みしている。 青色のバーは明るさと再度と色相に微妙なグラデーションが掛かっている。
https://c1.staticflickr.com/5/4235/34423804153_be239c1372_o.png
これは自作のHTML5 インタラクティヴ ジェネレーティヴ ディジタル アートで音楽ファイルを再生させながらCanvas上をクリックして音を出した瞬間のスクリーンショット画像です。

自身の端末に保存されている音楽ファイルを複数選択して再生させる事が出来ます。
この際、音楽ファイルへのリンク、ショートカット、エイリアスを選択する事も可能ですので、プレイリストのように利用可能です。
音楽の再生音量はスライダーで調整可能ですので、音楽を再生しながらキーボード演奏機能で音を重ねたり、重低音を鳴らして唸りを発生させたりして遊べます。
スペクトラム アナライザーヴィジュアライザーも独自に実装致しました。

至高の重低音プレイを楽しみたい場合は、このウェブ プログラムで重低音の似合う楽曲を再生させながら、キーボード演奏機能オクターヴ番号のラジオ ボタンで " 1 " を選択して、キーボードの下段と上段を弾くと凄い体験が出来ます。

" 宇多田ヒカル " さんの昔の名曲達の他、 " Jennifer Lopez " さんの名曲達も重低音プレイと相性が良いようです。
<-<-

自作の " HTML5 インタラクティヴ アート " の説明。 [HTML5 インタラクティヴ アートの説明]

私が遊びで作成した " HTML5 インタラクティヴ ジェネレーティヴ ディジタル アート " について説明致します。
JS_Art_SS_(2017_05_23)_2_Cropped_1 HTML5 インタラクティヴ ジェネレーティヴ ディジタル アートのスクリーンショット画像。 黒い背景の上に1つの光の円盤がある。 光の円盤からは 眩しく光り輝く青緑色の粒子が多数放出されており、青緑色や青紫色のリボンのような曲線が多数くねりながら放射されている。 光の円盤の周囲には青緑色の光輪がある。
https://c1.staticflickr.com/5/4272/34845047985_98d357231a_o.png
これは自作のHTML5 インタラクティヴ ジェネレーティヴ ディジタル アートのCanvas上をクリックして多数の粒子を放出させ、音を出した瞬間のスクリーンショット画像です。

このプログラムでは " Canvas Play / Stop " ボタンを押してからCanvasをクリックする事によって、正弦波の音や弦を弾く音の出力をしたり、模様や粒子を描画したり、キーボードのキーを押してピアノのような演奏をする事が出来ます。
特に重低音の迫力のある再生に拘っており、大型のサブウーファーなどで再生すると強力な重低音を楽しめます。
また、音楽ファイルを再生させ、スペクトラム アナライザーのヴィジュアライザーを表示させる事も出来ます。

プログラムのコードはGoogleが提供しているJavaScript ソースコード圧縮サーヴィスである " Closure Compiler " にて、 " Simple " モードよりも強力な圧縮、最適化オプションである " Advanced " モードで圧縮したものを下記のブログ記事のHTML ページ内にインライン JavaScriptで埋め込みました。
プログラムのコードは文字数が多い為、圧縮せずに記事内に埋め込んでブログの投稿ボタンを押すと " 記事本文は100,000文字以内でご入力ください。 " と表示されてしまい、投稿出来ません。

HTML5のCamvasと "JavaScript" で音声処理と画像描画。
http://crater.blog.so-net.ne.jp/2016-06-30

HTML5Canvas要素Web Audio APIのみを利用しており、JavaScriptで記述しております。
外部のライブラリーなどは使用しておりません。
古いウェブ ブラウザーでは動作しませんが、PC用の新しいウェブ ブラウザーならば動作する筈です。

尚、私のプログラミング スキルは入門者以下のレヴェルですので、間違いが多いかと思いますが御容赦下さいませ。

因みに当該プログラムのソースコードは御自由に切り貼りして利用して下さって結構です。

" Yahoo!ボックス " サーヴィスにソース コードのhtml ファイルをアップロードして公開させて頂きます。
次のリンク先のページにある " ダウンロード " ボタンを押すと当プログラムのhtml ファイルをダウンロード出来ます。

[ソース コード]
Yahoo!ボックス: http://yahoo.jp/box/d0j0Ki



" Closure Compiler " でコードを圧縮するに当たっては、プログラムのコンストラクターがコンストラクターである事を認識させる為に、JsDoc タグのアノテーションによる型定義でそれがコンストラクターである事を明示する必要がありました。
それをしないと " Warning " (警告)が出てしまいました。

次のアノテーション(注釈)を全てのコンストラクターの定義部分の1行上に加えました。
/** @constructor */ 


他には、 " Closure Compiler " が私の記述の僅かな誤りなどを指摘してくれるので、1箇所づつ修正して行きました。

しかし、圧縮後にローカル ファイルとしては問題無く動作していたコードが、ブログ記事内では一部の動作に異常が生じて正常な表示が出来なくなる問題がございました。
私が非常にありがたく利用させて頂いている " i2i " アクセス解析サーヴィス有料版の埋め込みコードによってPHP ファイルが読み込まれるようで、これを見ると、グローバル変数として " C " という文字が使用されておりました。
実は、 " Closure Compiler " がコードを高度に圧縮した結果、変数名はアルファベット1文字、2文字程度に短縮され、私がグローバル変数としていた変数名が " C " となった為、外部ファイルのグローバル変数と名前が重複してしまい、衝突が起きていたのでした。

そこで、自作のプログラム全体を1つのコンストラクターに収め、グローバル変数をそのコンストラクターのスコープ内のローカル変数とする事により解決致しました。
<script type = "text/javascript">
/** @constructor */
var globalObjectOfThisProgram = function()
{
 ...
 ...
}
new globalObjectOfThisProgram();
</script>

この様に記述する事によりブログ記事内へ埋め込んでも正常に動作するようになりました。

ソース コードが埋め込まれたHTML ファイルのサイズは、圧縮前の323.8[kB]から、76.5[kB]へと激減致しました。

[Closure Compilerに関して私が参照したウェブサイト]
"@wiki" のウィキ サイト "Closure Compilerを使う!" のページ "Compilerが求めるコーディングルール" のURL:
https://www37.atwiki.jp/aias-closurecompiler/pages/20.html

"@wiki" のウィキ サイト "Closure Compilerを使う!" のページ "アノテーションによる型定義" のURL:
https://www37.atwiki.jp/aias-closurecompiler/pages/22.html

"Qiita" のページ "Closure Compiler の ADVANCED_OPTIMIZATIONS の使い方" のURL:
http://qiita.com/senda-akiha/items/82f670a78ff592c054ab

"modest" のページ "JavaScript のブロックスコープと名前空間" のURL:
https://dev.mozilla.jp/2010/05/js-blockscope-and-namespace/



プログラムの実行速度を向上させる為に、ループ ブロック内では定数同士の計算を行わず、ループに入る前に予め計算を済ませて置くといった事を徹底しております。
また、本プログラム中の多くのアニメーション描画では、個別の描画対象毎に " setInterval(); " で定期的に描画関数を呼び出し、 " clearInterval(); " で描画を停止させる処理を行っております。



JS_Art_SS_(2017_05_23)_2_Cropped_1 HTML5インタラクティヴ ジェネレーティヴ ディジタル アートのスクリーンショット画像。 黒い背景の上に1つの光の円盤がある。 光の円盤からは 眩しく光り輝く青緑色の粒子が多数放出されており、青緑色や青紫色のリボンのような曲線が多数くねりながら放射されている。 光の円盤の周囲には青緑色の光輪がある。
このプログラムではCanvasをクリックした際にその点を中心に放射状に曲がりくねったリボンの様な曲線が描画されます。
この曲線はベジェ曲線であり、その曲線の制御点はある範囲内に偏り無く位置するようにし、逆にその曲線の末端の点の座標はクリックした点の付近に位置する確率を高くする事によって、より多く曲がりくねった曲線にしております。
乱数を複数回生成して足し合わせ、それを生成回数で除して相加平均を求めると、値の出現確率分布は中央値が最多で両端が最小の三角形を描きますので、値の範囲の中央がクリックした点の座標になるように処理すれば、曲線の末端がクリックした点の付近に位置する確率を高くする事が出来る訳です。




JS_Art_SS_(2017_06_12)_1_Cropped_1 HTML5インタラクティヴ ジェネレーティヴ ディジタル アートのスクリーンショット画像。 黒い背景の上に1つの光の円盤がある。 光の円盤からは 眩しく光り輝く青色の粒子が多数放出されている。 光の円盤の周囲には青色の光輪がある。 画面の下方には音楽のスペクトラム アナライザーのヴィジュアライザーが描画されており、垂直の青色のバーが多数横方向に並んで伸び縮みしている。 青色のバーは明るさと再度と色相に微妙なグラデーションが掛かっている。
https://c1.staticflickr.com/5/4235/34423804153_be239c1372_o.png
ファイルを選択する為のボタンを押し、自身の端末に保存されている音楽ファイルを複数選択してから " Music Play / Stop " ボタンを押すと音楽を再生出来ます。
この際、音楽ファイルへのリンクショートカットエイリアスを選択する事も可能ですので、プレイリストのように利用可能です。
1曲分の再生が終わると次の曲が自動的に再生されます。
また、読み込んだ音楽ファイルのリストから別の曲を選択すると、別の曲に切り替わります。
音楽ファイルを再生させながら、自身でキーボード演奏して音を重ねる事が可能です。
至高の重低音プレイを楽しみたい場合は、このウェブ プログラムで重低音の似合う楽曲を再生させながら、キーボード演奏機能オクターヴ番号のラジオ ボタンで " 1 " を選択して、キーボードの下段と上段を弾くと凄い体験が出来ます。
Canvas画面にはスペクトラム アナライザーヴィジュアライザーが表示されます。
スペクトラム アナライザーは " AudioBufferSourceNode " -> " GainNode " -> " ChannelSplitterNode " -> " AnalyserNode " -> " ChannelMergerNode " -> " audioContext.destination " の流れで接続しております。
これにより、ステレオの左右チャンネルが別々にスペクトラム表示出来ます。
周波数帯域毎に、配列に現在の値を保存して置き、現在の値と前回値との差が正の値であれば積算用の配列に加算して行きます。
積算用の配列の値は一定時間毎に一定の割合で減少して行くようにしてあります。
これにより、周波数帯域毎に時間軸上に於けるレヴェルの変化が急峻である時にスペクトラムのバーを光らせ、色を変化させる事が出来ます。
音楽再生の音量はスライダーで調整可能にしてあります。
音楽の再生の音量とスペクトラム ヴィジュアライザーのバーの長さは、原点座標が(1,1)で(0,0)を通る3次関数により対応させておりますので、ある程度ヴォリュームを下げてもヴィジュアライザーは適切な高さで表示されます。
音楽ファイルの読み込みはHTML5の " input " 要素で " type="file" " 、 " multiple " 属性を付けたボタンによりファイルを選択出来るようにし、 " window.URL.createObjectURL( fileList[i] ) " でファイル毎のURLを生成させ、音楽再生時に " XMLHttpRequest " でURLからデータを取得し、 " audioContext.decodeAudioData() " で音楽データをデコードして、バッファーにデータを入れて出力させます。
オーディオの再生が終わると発行される、 " AudioBufferSourceNode " の " onended " イヴェント ハンドラーのコールバック関数で曲の切り替えやリピートを制御しております。
因みに、スペクトラムのバーの描画では、 " canvasContext.beginPath(); " -> " canvasContext.moveTo( x, canvasContext.canvas.height - y ); " -> " canvasContext.lineTo( x, canvasContext.canvas.height ); " -> " canvasContextLayer.stroke(); " で描画するのと比べ、 " canvasContext.fillRect( x - lineWidth / 2, canvasContext.canvas.height - y, lineWidth, canvasContext.canvas.height ); " で描画した方が2.8倍高速でした。



次に、音の生成に関して説明致します。
音の生成に於いては、Oscillator ノードを利用する方法ではノイズが出たのでこれは使用せず、計算で波形を生成させております。

私の環境では突然に音を出力させるとノイズが出るので、 " Canvas Play / Stop " ボタンを押してからもう一度押すまでの間、極微小音出力をする事でノイズを軽減しております。


ラジオ ボタンのオプションで " Sine Wave " を選択してCanvas上をクリックすると、計算により正弦波形を生成して音を出力致します。
この正弦波形はAttack, Decay, Sustain, Releaseに分けて処理しております。
Attack部分とDecay部分の包絡線(エンヴェロープ)はそれ自体が正弦波形にしてあり、音量変化が滑らかに推移致します。
Release部分の包絡線は直線的に減衰し、最後には無音になります。
加えて、Attack部分は周波数変調(FM)で基本の周波数よりも高い周波数からの導入とする事で低音域のアタック感を増強してあります。
この時には、シグモイド関数によって音の中心周波数の高さとAttack部分の周波数変調の最大周波数の高さとを対応させ、低音域にだけ周波数変調が効くようにしております。
Release部分に於いては三角関数の式の中の時間を徐々に遅らせる事によって位相を遅らせ、時間と共により低周波数の方へと遷移させる処理を、2つのシグモイド関数の和を取って係数にして重み付けをする事により低周波数領域に限って適用させております。
余韻の長さにつきましては、クリックする位置がCanvasの左側に行く程余韻が短く、右側に行く程余韻が長くなります。
この時には、シグモイド関数によって水平方向の位置座標と余韻の長さとを対応させております。
また、クリックする位置が上側に行く程に高音が出力され、下側に行く程に低音が出力されます。
この時には、3つのシグモイド関数の組み合わせにより、垂直方向の位置座標と音高とを対応させております。

出音の持続に関しまして、マウスのボタンを押している時間だけSustainの部分をリピート機能により繰り返す事で出音を持続させる事が出来ます。
マウスのボタンを放すとRelease部分へ遷移して出力は次第に小さくなり、最終的には無音となります。
持続する音の出力を正常に終了出来なくなったりする事を防ぐ為に、イヴェントの状態監視、管理を徹底致しました。
キーのコードを文字列で持つオブジェクトを作成、利用し、キーボードのキーやマウスのボタンの状態を格納して参照し、同時に各キー毎にAudioBufferSourceNodeを格納して管理致します。
キーボードのキーを押しながらブラウザーのタブを切り替えた場合なども考慮して処理を行います。
また、Sustain部分の波形からリピート部分を正確に切り出さないとノイズが発生したり音程が変化してしまいます。
周波数変調により位相が変化しているので、リピート部分の切り出しに際してその位相変化分を考慮する必要がございます。
そして周波数の逆数である周期を求め、Sustain部分の長さ目一杯に、かつ半端な部分が生じないように、1周期の整数倍で切り出すように致しました。
また、高音域程ループ切り出しの際にサンプリング精度が不足するので、この事により意図せずに音程が変化してしまったり雑音が発生してしまったりする事を防ぐ為に、正弦波出力の場合はサンプリング周波数をオーディオ デヴァイスのサンプリング周波数4倍にして波形データを生成する事により時間軸上での切り取り位置の誤差を低減致しました。
出力時はこれを4倍の早送りで再生する事で音程を調整しております。

因みにGoogle Closure CompilerのAdvanced モードで正しく変換出来るようにする為、キーの管理の為のオブジェクトのプロパティへのアクセスをドット表記ではなくブラケット表記で統一する必要がございました。
正弦波音の出力の音量に関しまして、高音域程人間の耳には刺激的で不快に感じる事から、シグモイド関数により、低音域と比較して高音域の音量を下げるように致しました。


ラジオ ボタンのオプションで " Triangle Wave " を選択してCanvas上をクリックすると、計算により三角波形を生成して音を出力致します。
この三角波形も正弦波の場合と似たような処理となっております。
正弦波の場合との主な違いは波形の生成方法です。
こちらの波形の生成は三角関数によるものではなく、数値の " 1 " と " - 1 " とを閾値として、その閾値に達するまで一定の値を加算して行き、閾値に達したら加算する値の符号を反転させるという処理を繰り返す事により波形を生成致します。
加算する値を増減する事により、周波数を変化させております。


ラジオ ボタンのオプションで " Click or tap the canvas. " を選択している時は、マウスによるクリックまたはタッチ操作対応デヴァイスでのタッチによってのみ正弦波及び三角波の音の出力が可能です。
ラジオ ボタンの選択状態を一時的に固定した上で選択不可状態にしたり、選択不可状態を解除したりする機能を実装致しました。
内容としては、 " document.getElementsByName( 'radioButton' ).checked = true " としたり、ラジオ ボタンの属性に " .disabled = true " を付加したり、 " .disabled = false " にしたりしております。
このモードでは追加の視覚効果の描画機能をどれでも働かせる事が出来ます。


ラジオ ボタンのオプションで " Input from the keyboard. (Let's play the keyboard!) " を選択している時は、マウスによるクリックまたはタッチ操作対応デヴァイスでのタッチに加えて、 " QWERTY " 配列の一般的な文字入力用キーボードのキーを押す事によってピアノのようなキーボード演奏が可能です。
このモードでは追加の視覚効果の描画機能は " Particles Emission " のみ働かせる事が出来ます。
音域をオクターヴ ナンバーのラジオ ボタンで選択する事が可能で、第0オクターヴから第9オクターブまで選択出来ます。
キーボードの " Shift キー " を押下しながら発音用のキーを押すと、キーボードの下段ではオクターヴを1つ下げた音となり、キーボードの上段ではオクターヴを1つ上げた音となります。
複数のキーを同時に押すと " 和音 " も出せます。
音名とキーとの対応は次の通りです。
[選択されたオクターヴ ナンバーの音]
(z):c (s):cs (x):d (d):ds (c):e (v):f (g):fs (b):g (h):gs (n):a (j):as (m):b (,):c
(Shift): 1 オクターヴ下がります。

[選択されたオクターヴ ナンバーの1つ上のオクターヴの音]
(q):c (2):cs (w):d (3):ds (e):e (r):f (5):fs (t):g (6):gs (y):a (7):as (u):b (i):c
(Shift): 1 オクターヴ上がります。

このモードでキーボードのキーの押下を検出する為にイヴェント リスナーを追加致しました。
そしてキー押下イヴェントを処理する関数内で、 " switch文 " でキー コード毎に " case " で場合分けして出音の処理を行っております。

音は音名でC0からB9までを440[Hz]A4の音を基準音として、音名と周波数の値との対応関係を配列とオブジェクトの組み合わせで管理致しております。
このモードでもキーボードのキーを押している時間だけSustainの部分をリピート機能により繰り返す事で持続させる事が出来ます。
キーを放すとRelease部分へ遷移して出力は次第に小さくなり、最終的に無音となります。

第1オクターヴという重低音域で弾く " Für Elise / Ludwig van Beethoven " (エリーゼのために / ベートーヴェン)も面白いです。

ところで、オクターヴ0やオクターヴ1の音を再生出来るかどうかで、そのオーディオの低域再生能力の限界が分かります。
ヘッドフォンやイヤフォンではなく、スピーカー システムを御使用の場合、大型のサブウーファーが無いと、おそらく最低域は再生出来ない事でしょう。


ラジオ ボタンのオプションで " Auto rhythm playback. " を選択している時は、ランダムに呼び出される異なる短いリズムの音が自動的に再生されます。
このモードでは追加の視覚効果の描画機能は " Particles Emission " のみ働かせる事が出来ます。
このモードでも音域をオクターヴ ナンバーのラジオ ボタンで選択する事が可能です。
マウスによるクリックまたはタッチ操作対応デヴァイスでのタッチでの発音も可能です。
キーボード演奏モードの時と同様の、音名と周波数の値との対応関係を配列とオブジェクトの組み合わせを用いて、インターヴァル タイマーで波形生成関数を呼び出して演奏させております。


ラジオ ボタンのオプションで " Random Sound. " を選択している時は、ランダムな音ランダムなタイミング自動的に再生されます。
特に凝った事は何もしておりません。
このモードでは追加の視覚効果の描画機能は " Particles Emission " のみ働かせる事が出来ます。
マウスによるクリックまたはタッチ操作対応デヴァイスでのタッチでの発音も可能です。


ラジオ ボタンのオプションで " Guitar " を選択すると、ギターの弦の振動をリアルタイムで物理シミュレーションして音を出す事も出来ます。
このシミュレーション コードの原型は現在、岡山大学理学部で准教授をなさっている方が昔にウェブサイトで公開して下さったもので、パブリック ドメインとして良いとの事ですので、これを私がJavaScriptで書き換え、加工し、プログラムに組み込みました。
尚、シミュレーションは弦の部分のみで胴の響きはシミュレーションしていない為、本物のギターとは少々違う音色となっております。
e-メールでコードの使用を快諾して下さいました事に感謝申し上げます。

尚、ギターの物理シミュレーション音源については、計算量が非常に多い為、性能が低目のCPUではCanvas上をクリックしてから発音までに時間差があるようです。高速なCPUでは遅延は極僅かしかございません。

因みにラジオ ボタンのオプションで " Guitar (with the visualization of the vibration of the string.) " を選択するとギターの弦の振動の様子を描画致します。

JS_Art_SS_(2017_05_25)_3_Cropped_1 HTML5インタラクティヴ ジェネレーティヴ ディジタル アートのスクリーンショット画像。 黒い背景の上に1つの光の円盤がある。 光の円盤からは 眩しく光り輝く青緑色の粒子が多数放出されされる寸前の状態であり、青色や紫色のリボンのような曲線が多数くねりながら放射されている。 光の円盤の周囲には青緑色の光輪がある。 画面中央には色とりどりの細い紐が数多く半時計回りに傾いた平行四辺形状にやや波打ちながら描かれている。
https://c1.staticflickr.com/5/4272/34834024266_c72322bc5d_o.png

以下、ギターの弦の振動シミュレーションの計算方法を説明致します。

計算速度を重視し、簡略化したシミュレーションです。

仮想的な弦に100個程の質点を設定し、質点同士をバネで繋いだ構造と致します。
バネにはバネ係数が設定されており、周波数を変える機能はこのバネ係数を変える事により実現しております。

まず、(f: 質点に加わる力, m: 質点の質量, a: 質点の加速度, v: 速度, z: 振動方向の位置, Dt: 短い時間)と致します。
運動方程式 " f = m * a " と致します。

質点に加わる力fは各質点の両隣の質点との位置zの差に比例するものと致します。

振動を時間と共に減衰させる為に、質点の速度に比例した摩擦係数を設定致します。

初期値として弦をピッキングする位置である弦の端から1 / 4の位置にある質点を大きく変位させ、弦の端の変位を常に0に固定した上で各質点を弦全体がピッキング位置と両端を頂点とする三角形になるように設定しておきます。

後は " a = f / m " で加速度aを出し、その瞬間の速度vを " v = a * Dt " として求めます。

最後に質点の位置zを " z = z + (v * Dt) " として求めます。
これを各質点全てに対して順次行います。

そしてピッキング位置に近い方の末端の1つ手前の質点の振幅の2乗をバッファーに格納致します。

この状態から " サンプリング周波数 * 発音時間 " だけ同様に繰り返し計算します。
計算が終わったらステレオにする為にチャンネルを複製致します。

但し、これには膨大な量の計算が必要になり、基本的にはシングル スレッド処理であるJavaScriptでは計算が終わるまで他の処理が停止してしまい、画像の描画なども停止し、更にはブラウザーからスクリプトを停止するかと尋ねるダイアログ ウィンドウを出されてしまいます。

そこで、繰り返しの計算処理を一定の回数毎に分割し、 " setTimeout() " 関数に続きの処理を行う関数を引数として渡して処理の再開を予約した上で一旦関数を終了させる処理に致しました。

こうする事で溜まっていた別の処理のキューが実行され、その後に元の繰り返し計算の関数が " setTimeout() " 関数から呼ばれ、処理が再開されるのです。

但し、変数のスコープを意識しておかないと、再開後に変数の参照が切れてしまい、正しく計算できなくなってしまうので、この点は注意が必要です。
こうして画像の描画など他の処理を停止させる事無く膨大な量の計算をシングル スレッドであたかもマルチ スレッド処理であるかの様に実行出来るように致しました。



以下に視覚効果の説明を致します。

オプションの " Simplify. " のチェックボックスチェック マークが入っていると、曲がりくねるリボンの様な模様は描画されません。


" Particles Emission " を選択すると、Canvas上をクリックして音が出るのと同時に光の輪が広がり、クリックした位置から色の着いた多数の光る粒子が散り散りに飛んで行きます。
それらの粒子にはグロー効果によって光り輝いて見えるようにしてあります。
個々の粒子はx軸方向、y軸方向にそれぞれランダムに加速、減速する事により軌跡が湾曲致します。

JS_Art_SS_(2017_05_23)_2_Cropped_1 HTML5インタラクティヴ ジェネレーティヴ ディジタル アートのスクリーンショット画像。 黒い背景の上に1つの光の円盤がある。 光の円盤からは 眩しく光り輝く青緑色の粒子が多数放出されており、青緑色や青紫色のリボンのような曲線が多数くねりながら放射されている。 光の円盤の周囲には青緑色の光輪がある。
これはJavaScript プログラムによる自作のインタラクティヴ ディジタル アートで画面上をクリックして多数の粒子を放出させた瞬間のスクリーンショット画像です。

HTML5のCanvasの基本的なAPI円形グラデーション描画機能が用意されていましたので、これを利用致しました。
ところが、数百個のパーティクルのアニメーションを毎回円形グラデーション処理で描画するとさすがに処理が重過ぎて動作が鈍くなってしまいました。
ですので、Canvas Contextをレイヤーとして利用する事とし、これを配列で多数用意し、そこにCanvasをクリックした時のアニメーションの最初に円形グラデーション機能で粒子を描画し、その後のアニメーション描画時にその画像を位置と縮尺を変えて複写する事により、毎回円形グラデーション機能で描画するよりも高速な描画を実現致しました。


" Wavelet of Tiled Dots " を選択してCanvas上をクリックすると、多数の丸いドット模様タイル状に並び、クリックした位置から波紋が広がるかのようにドットの大きさと色の濃さの変化が連続的に周囲に伝わり、波打ちます。

JS_Art_SS_(2017_05_24)_1_Cropped_1 HTML5インタラクティヴ ジェネレーティヴ ディジタル アートのスクリーンショット画像。 画面全体に小さな円盤状のドットがタイル状に並び、ドットの色が左上から右下に掛けて橙色から黄色、青緑色までのグラデーションとなっている。 画面中央に白い光の円盤があり、そこを中心としてドット模様が濃淡とドットの円盤の大きさの大小により波打ち、円弧状に波紋が広がっている様に見える。
https://c1.staticflickr.com/5/4225/34029175334_b3839595ce_o.png
これは波打つドット模様のスクリーンショット画像です。

2次元メッシュの交点に質点を配置し、各質点をバネで結合し、各辺は自由端としてあります。
自由端反射の様子も見られます。
自由端ですので、そのままでは振動させると面全体が糸が切れた凧の様に飛んで行ってしまいますから、これを防ぐ為に各質点とゼロ水準の基準面とをバネで繋いであります。
質点の変位の大きさを丸の大きさと彩度の変化で表現して描画しております。
計算式は前述のギターの弦の振動のシミュレーションの応用です。

実はこのバネの2次元メッシュは4辺を固定端にして面の各質点の変位の平均値をとって時間毎に記録して行くと打楽器のティンパニーの様な音を発する事が出来たのですが、計算量がとても多く、ハイエンドのCPUを搭載したPCでないと実時間ではシミュレーション出来ないものでした。
私のPCではこれを行おうとすると音が出るまでに数秒間待たされました。


" A Large Amount of Particles " を選択してCanvas上をクリックすると、大量の粒子の物理シミュレーションが出来ます。
大量の粒子と画面のポインターとの間の引力と斥力の相互作用を計算しており、3次元空間大量の粒子を引力でポインターに引き付けて操る事が出来ます。
また、クリックすると粒子を撥ね退ける事が出来ます。
また、重力が働いており、ポインターの引力圏から離れた粒子は床に落ちて行きます。
想像力により、銀河の運動などの宇宙を感じたり、磁場によって砂鉄が引き寄せられる現象に見立てたり、原子などのミクロな世界を想像したりする事も出来ることでしょう。

JS_Art_SS_(2017_05_24)_2_Cropped_1 HTML5インタラクティヴ ジェネレーティヴ ディジタル アートのスクリーンショット画像。 黒い背景の上に大量の色とりどりの粒子が散らばりつつも、それらの粒子集団は点々と連なる白い光の軌跡に纏わりついているように見える。
https://c1.staticflickr.com/5/4245/34832713336_91d6fa9af6_o.png
これは大量の粒子の物理シミュレーションをしている様子のスクリーンショット画像です。


" Precipitating Particles " を選択してCanvas上をクリックすると、3種類の質量の異なる大量の粒子水中で重力によって徐々に沈殿または浮上する様子の物理シミュレーションが出来ます。
これは2次元座標空間上でのシミュレーションです。
各粒子間の引力と斥力による相互作用、及び粒子と画面のポインターとの間の引力と斥力の相互作用を計算しております。
粒子同士の反発を計算する事により、粒子の堆積のシミュレーションを実現しております。
Canvas上をクリックすると重力の向きが上下反転致します。

JS_Art_SS_(2017_05_23)_3_Cropped_1 HTML5インタラクティヴ ジェネレーティヴ ディジタル アートのスクリーンショット画像。 黒い背景の上で赤色と緑色と青色の多数の粒子があるものは上辺に堆積し、またあるものは画面中央付近にある白色の光に吸い寄せられている様子である。
https://c1.staticflickr.com/5/4252/34832713466_540ea5a4f0_o.png
これは沈殿する粒子の物理シミュレーション機能で重力の向きを反転した状態のスクリーンショット画像です。
画面のポインターが及ぼす引力で粒子が引き付けられております。

粒子は種類毎に異なった比重としてある為、沈降及び浮上の際の速度が異なります。
各粒子とそれ以外の大量にある全ての粒子との相互作用を計算する事は負荷が高過ぎるので、工夫を施しました。
まず、画面に表示するCanvasを細かく分割した仮想の格子を配列で作成します。
次に、粒子の位置について計算の為の座標系から画面座標系へ変換した後、粒子がその格子上のどの領域にあるのかを計算し、仮想の格子に相当する配列に粒子の番号と計算の為の座標系に於ける位置情報を登録して行きます
そして粒子の次の移動の際にその粒子が属する格子の近傍の格子の領域既に登録されている粒子が在るか無いかを調べます。
近傍に粒子が無い場合には相互作用の計算は行わず、近傍に粒子が在った場合にだけ検出された全ての粒子について相互作用を計算致します。
この様な処理方法とする事で、計算量を大幅に低減出来ました。


" Moving Particles " を選択してCanvas上をクリックすると、仮想の希ガス原子の集団の運動の物理シミュレーションが出来ます。
3次元座標空間上で " Lennard-Jones ポテンシャル " の勾配によって生じる力を元に運動をシミュレーションします。
移動量の計算には " Verletのアルゴリズム " を使用しております。
この部分のプログラムのコードの原型は " 早稲田大学 渡邉研究室 " の次のページに掲載されていたC言語によるコードです。これを基に私がJavaScriptで書き換え、加工し、自作のプログラムに組み込みました。

"早稲田大学 渡邉研究室" / "Lennard-Jonesポテンシャルを用いたMDシミュレーション" のページのURL:
http://www.watanabe.nano.waseda.ac.jp/blog/archives/2107

e-メールにてコードの使用を快諾して下さいました、早稲田大学理工学術院教授 渡邉 孝信 様に感謝申し上げます。

JS_Art_SS_(2017_05_24)_3_Cropped_1 HTML5インタラクティヴ ジェネレーティヴ ディジタル アートのスクリーンショット画像。 黒い背景の上で色とりどりの多数の粒子が散らばっている様子である。 奥にある粒子はやや小さく、手前にある粒子はやや大きく描かれている。
https://c1.staticflickr.com/5/4196/34486082250_5ac19486c5_o.png
これは相互作用する仮想の希ガス原子の集団の物理シミュレーションの様子のスクリーンショット画像です。

各粒子の位置の計算後の粒子集団の描画は、初めに各粒子の位置情報を格納した配列を複製してから " Z ソート " で奥から順に並べ替えます。
そして並べ替えた順番で、 " context.createRadialGradient() " と " radialGradient.addColorStop() " を使用して円形に色のグラデーションを描画する事により球体の様な見た目を再現致しております。

この原子集団は領域外との境界面に接触すると減速し、徐々に動きが少なくなります。
そしてCanvas上をクリックすると原子の運動が活性化し、再び激しく動き出します。


" Cloth Fluctuation " を選択してCanvas上をクリックすると、色とりどりの揺らめく布を描画致します。
まず、一様なノイズスケールを変えながら三次エルミート スプライン補間法(Cubic Hermite Spline Interpolation)により滑らかに補間しつつ加算合成して行く事でピンク ノイズ データを生成致しました。
このピンク ノイズ データを三角関数で基準点からの(x, y)座標のずれにして、同じく時間軸方向にもノイズを三次補間したデータを用いて移動させつつ描画致します。

JS_Art_SS_(2017_05_24)_4_Cropped_1 HTML5インタラクティヴ ジェネレーティヴ ディジタル アートのスクリーンショット画像。 暗い背景の上で色とりどりの横長の布のような物が右から左へ向かって、はためきながらたなびいている様子である。 瓦葺きのように一部が重なり合っている。
https://c1.staticflickr.com/5/4204/34061807513_f20e7fbb77_o.png
これは色とりどりの多数の布が、揺らめき、はためきながら右側から左側へ向かって、たなびいて流れて行く様子のスクリーンショット画像です。


" Ring Fluctuation " を選択してCanvas上をクリックすると、揺らぐ円環状の模様を描画致します。
クリックした点に色とりどりの揺らめく円環模様が現れます。
前述の " Cloth Fluctuation " と類似の処理を行っております。
このピンク ノイズ データは先頭と最後が滑らかに繋がり、循環するようにしてあります。
これにより曲線の始点と終点が繋がり、揺らぐ円環となります。
また、ランダム ウォークで揺らめき、ランダムに拡大縮小を繰り返します。

JS_Art_SS_(2017_05_25)_1_Cropped_1 HTML5インタラクティヴ ジェネレーティヴ ディジタル アートのスクリーンショット画像。 紫色の背景の上に、9つの色とりどりの揺らめく多数の円環状の模様が描かれている。
https://c1.staticflickr.com/5/4275/34029175194_ca3c9ec05e_o.png
これは色とりどりの揺らめく多数の円環状の模様のスクリーンショット画像です。


" Colorful Wave " を選択してCanvas上をクリックすると、時間と共にゆっくりと波打つ様に動く曲線を描画致します。
大した処理はしておりませんが、やや地味ながらも少しばかりの癒やしを感じられるかもしれません。
ところで、HTML5のCanvas要素で暈しを掛けた曲線を多数Canvas画面全域に描画する処理は思いの外、計算負荷が高いものでした。

JS_Art_SS_(2017_05_24)_5_Cropped_1 HTML5インタラクティヴ ジェネレーティヴ ディジタル アートのスクリーンショット画像。 黒い背景の上に、幾本もの太さのまちまちな、光が滲む大きく湾曲した曲線が描かれている。
https://c1.staticflickr.com/5/4252/34832713146_2d9459d849_o.png
これはゆっくりと波打つ曲線を描画した状態のスクリーンショット画像です。
曲線が光り輝いているように見えます。


余談ですが、実は私は以前、このプログラムに運動方程式に基づく三重振り子の物理シミュレーションでカオス図形を描画する機能も組み込んでいたのですが、見た目に満足出来なくなったので、これは削除致しました。


ところで、私はスマートフォンやタブレット PCなどのタッチ スクリーン デヴァイスを所有しておりませんので、タッチ操作時にどのような挙動になるのかという事を検証出来ておりません。
恐らく起こり得る問題やその解消方法は想像出来るのですが、実機で検証出来ない為、手を付けずにおります。

前の8件 | -