aike’s blog

写真から素数を文字認識するアプリ作ったよ

2018-12-31T18:48:28+09:00

作ったもの

目にした数字が素数かどうかって気になってしょうがないですよね。そんなわけで、カメラで撮影した画像中の数字を認識して素数かどうか判定するアプリを作りました。

使い方

ファイル選択ボタンを押して判定したいの数字が写っている写真を指定します。このとき「写真を撮る」を選ぶとカメラで撮影した画像を保存せずにそのまま使うこともできます。例として、未読メール数字が表示されているスマホのスクリーンショット画像を使ってみます。

画像を選択したらすぐにサーバに送信され数秒で結果が返ります。1129も83も素数でした！来年は良い年になりそう。ほかにも時計の数字や車のナンバーを撮影して、さっといつでも素数判定することができます。便利。

使った技術

例によってReactとCloud Vision APIです。正しく判定できる最大値は9007199254740991 (Number.MAX_SAFE_INTEGER)、素数判定はこちらのcheck-primeを使っています。シンプルな試し割り法ですが、いくつか試した中で今回の用途にはもっとも安定していて速度も十分でした。

github.com

おしまい。

素数レンズ　 Github 　

大晦日ハッカソン2018 　

写真から電話番号を文字認識するアプリ作ったよ

2018-12-09T00:12:59+09:00

作ったもの

カメラで撮影した電話番号画像を認識して電話がかけられるスマホ用Webアプリです。

https://aikelab.net/denwalens/

使い方

ファイル選択ボタンを押して電話番号の数字が写っている写真を指定します。このとき「写真を撮る」を選ぶとカメラで撮影した画像を保存せずにそのまま使うこともできます。

画像を選択したらすぐにサーバに送信され数秒で結果が返ります。画像の中に電話番号と解釈できる文字列があれば画面下にリンクとして表示されます。さまざまなフォントや手書き文字もわりといい感じに認識します。

リンクをタップすると発信ダイアログが出て電話をかけられます*1。まずは無料お試しセットから。

　
　
　
画面下の共有ボタンをタップして「ホーム画面に追加」でアイコンを作っておくとネイティブアプリのようにすぐ起動できて便利。

ユースケース

たとえばあなたの洗濯機が夜中に水漏れしたとする。しかしサポート業者の電話受付は10時-17時なのだ。そこであなたはとりあえず連絡先の電話番号をメモ代わりに写真に撮っておく。

翌日、勤務先で空き時間に業者へ電話をかけようとして、あなたははたと困る。なんと驚くべきことに、iPhoneは写真ライブラリを見ながら電話をかけることができないのだ。最近のiPadのように2画面分割することもできず、どんなことをしようと電話のキーパッドを表示すると写真が隠れてしまう。これが名高いヒューマンインタフェースガイドラインか、これが世界の選択か。人生に疲れたあなたは天を仰ぎ、思いつく限り呪詛の言葉を叫び続けることだろう。　

＊　＊　＊

　
写真に撮った電話番号にかけたい場面はわりとあるように思います。上記のような大型家電のサポート、自販機で商品が出てこないトラブル、移動中に気になる看板広告を見かけたとき、テレビCMの電話番号など、いずれも何かの事情でその場では電話できず、カメラでメモしておいて後で連絡するような状況です。そしてこれらは1回かけたらたぶんもう使わない、電話帳に登録するにはちょっと躊躇するような番号です。

以前、困り果ててツイッターで何か良い方法がないか募ってみました。

【緩募】iPhoneで、電話番号が書かれた紙の写真を見ながら電話かける方法。
— aike (@aike1000) 2018年10月12日

このとき結城浩さんからいただいたアイデアは、公式メモアプリに電話番号を書くと自動でリンクになることを利用して、メモに貼り付けた写真を見ながら番号をタイプする、というものでした。

できました。写真からシェアメニューで「メモに追加」して、メモ帳に移って、写真見ながらタイプ。そして番号をタップ。
— 結城浩 (@hyuki) 2018年10月12日

この方法であれば10桁程度の数字を短期記憶する必要がないのでかなり楽になります。とはいえ、全桁打ち直すのはもう少しなんとかならないものか。　
　

最近話題のGoogleレンズは、カメラ映像や写真からテキストをはじめかなり高度な各種情報の画像認識をするようです。iPhoneでもGoogleフォトアプリの一機能として使えるみたいです。ただ、そのためにiOS標準とは異なる写真ライブラリ管理アプリを入れるのも大仰な気がします。*2 　
　
つまり、ぼくらがほしいのは電話番号だけ認識するGoogleレンズの単機能版なのです。そんなわけで「電話番号専用Googleレンズもどき（怒られそうなので仮称）」、略して「電話レンズ（仮）」を作りました。　
　
　

使った技術

Reactは、まあなんというか勉強中なのでとりあえず使ってみた感じ。機能を追加するたびに複雑になっていくアプリを、DOMっぽい単位でコンポーネント化することで考えることをシンプルに保つことができるのは慣れると快適ですね。慣れるまでに3年かかりましたが。

Cloud Vision APIは、Googleの機械学習技術で画像に何が写っているかを認識してくれるめちゃくちゃすごいAPI。今回のアプリはCloud Vision APIにガワをつけただけの200行くらいのシンプルなプログラムです。 APIに送る処理はこの辺の記事を参考にコピペ。ぼくの人生だいたいコピペ。

    let body = {
      requests: [
        {image: {content: base64string}, features: [{type: 'TEXT_DETECTION'}]}
      ]
    };
    let xhr = new XMLHttpRequest();
    const url = 'https://vision.googleapis.com/v1/images:annotate?key='+key;
    xhr.open('POST', url, true);
    xhr.setRequestHeader('Content-Type', 'application/json');
    const p = new Promise((resolve, reject) => {
      xhr.onreadystatechange = () => {
        if (xhr.readyState !== XMLHttpRequest.DONE) return;
        if (xhr.status >= 400)
          return reject({message: `Failed with ${xhr.status}:${xhr.statusText}`});
        resolve(JSON.parse(xhr.responseText));
      };
    })
    xhr.send(JSON.stringify(body));

認識結果はJSONで返ってきます。断片的な言葉の切れ端が多いので、そこから意味のある単語を見つけ出すのが腕の見せどころです。ここでは、最初に正規表現を使って、数字、ハイフン、カッコ、スペースが並んでいたら電話番号っぽい文字列と判断して抽出して、次に抽出した文字列からさらに数字だけ抜き出して10〜11桁なら電話番号と最終判断しています。

    const arr_annotations = json.responses[0].textAnnotations;
    const tel_numbers = [];
    arr_annotations.forEach((item) => {
      // 高速化のために短すぎる文字列はここで無視する
      if (item.description.length >= 10) {        
        const str = item.description;
        // 数字、ハイフン、カッコ、スペースの連続を電話番号とみなす
        const match_str = str.match(/[\d\-() ]+/g);
        // 電話番号が存在するか
        if (match_str !== null) {
          // 電話番号が複数存在する場合を考慮してループ
          match_str.forEach((item) => {
            // ハイフン、カッコ、スペースを削除して数字のみを得る
            const num = item.replace(/[-() ]/g, '');
            // 数字のみで10〜11桁のものを電話番号として配列にする
            if ((num.length >= 10) && (num.length <= 11)) {
              tel_numbers.push({str:item, num:num});
            }
          });
        }
      }
    });

数字の頭に“tel:"という文字列をくっつけてリンクにすると電話をかけるリンクになります。

    const hash = {};
    tel_numbers.forEach(item => {
      // 重複チェック
      if (!hash[item.num]) {
        hash[item.num] = true;
        const parent = document.querySelector('#resultarea');
        const li = document.createElement('li');
        const a = document.createElement('a');
        a.innerText = item.str;
        a.href = 'tel:' + item.num;
        li.appendChild(a);
        parent.appendChild(li);
      }
    });

おしまい。

電話レンズ　 Github 　

クソアプリ Advent Calendar 2018 　
　
　
　

STEINS;GATE ELITE - PS4

出版社/メーカー: 5pb.
発売日: 2018/09/20
メディア: Video Game
この商品を含むブログを見る

*1:連続して利用すると「このWebサイトから自動的に電話をかけることは禁止されています」というダイアログが出ることがありますが、その場合は「通話を許可」すれば発信できます

*2:追記：この記事を投稿した3日後にiOS向けGoogleレンズの提供を開始したと公式アナウンスがありました https://japan.cnet.com/article/35130001/ 頑張って作ったアプリが3日で役目を終える気持ちを皆さんちょっとでいいので想像してみてください

パンはパンでも体の向きによらない3Dパンがでーきた

2016-12-19T00:00:00+09:00

WebAudio Web MIDI API Advent Calendar 2016の19日目です。

せっかちな人のためのデモページリンク。スマホ＋イヤホンで聞いてグルグル歩き回ってください。
http://aikelab.net/apan/

Web Audio APIでは、左右だけでなく3Dのパンが用意されています。つまり音の定位を三次元的に配置することができます。
さて、せっかく3Dパンなので、スマホの加速度センサーを使って、聴く人の体の向きによらず空間的に音が配置されるようにしてみましょう。つまり、たとえばイヤホンで音楽を聴きながら横を向くと、それまで左右から聞こえていた音が前後から聞こえてくる、というようなことです。

ソースコードはこんな感じになります。
まず何はなくともオーディオコンテキストの作成。

    var ctx = new (window.AudioContext || window.webkitAudioContext)();

Playerは自作のBufferSourceNodeラッパーです。詳しくはplayer.jsを見てください。

    var player = new Player(ctx, 'sound/apan.mp3');

チャンネルスプリッターノードでステレオソースの左chと右chを別々に取り出します。

    var splitter = ctx.createChannelSplitter(2);

パンナーノードで左chの音と右chの音を三次元空間に配置します。

    var panL = ctx.createPanner();
    panL.panningModel = "HRTF";
    panL.setPosition(-1, 0, 0);

    var panR = ctx.createPanner();
    panR.panningModel = "HRTF";
    panR.setPosition(1, 0, 0);

ノード同士の接続はこんな感じ。

    // player ----splitter
    //               ---- PanL ---- destination
    //               ---- PanR ---- destination
    player.connect(splitter);
    splitter.connect(panL, 0);
    splitter.connect(panR, 1);
    panL.connect(ctx.destination);
    panR.connect(ctx.destination);

パン回転用のsetAngle関数です。角度をラジアンで受け取ってパンナーノードの位置をY軸を中心に回転します。

    var setAngle = function(theta) {
        var sn = Math.sin(theta);
        var cs = Math.cos(theta);
        panL.setPosition(-cs, 0, sn);
        panR.setPosition(cs, 0, -sn);
    }

加速度センサーのイベント処理。加速度センサーはalpha、beta、gammaの３つの値で表現され、スマホを縦持ちしたときのY軸回転はalphaに対応します。加速度センサーの値は度なのでラジアンに変換してから前述のsetAngle関数に渡しています。

    window.addEventListener("deviceorientation", function(e){
        if (e.alpha) {
            setAngle(e.alpha * Math.PI / 180);
        }
    });

デモページはこちらです。
http://aikelab.net/apan/
スマホ＋イヤホンで再生します。
こんな姿勢でスマホを持ったままグルグル歩き回ってください。

ソースコードはこちら。
https://github.com/aike/AcceleroPanner

メーヴェ型飛行具のプロジェクトに参加した話

2016-10-13T00:00:00+09:00

　メーヴェを見にいこうと思ったのは、2014年の夏、5年勤めた会社を辞めて、さてこれからどうしようかというときだった。八谷和彦さんのOpenSkyプロジェクトが北海道で初めて公開テスト飛行をおこなうということを聞いて、特急スーパーカムイに乗って、たきかわスカイパークまでいくことにした。ところが、現地に到着したくらいから天候がくずれ、その日のフライトは中止になった。運もついていない。
　
　その代わり展示された機体を間近でつぶさに観察することができた。M-02Jという正式名称もそのとき知った。離れたところから見ると白くなめらかな機体の曲線に目を奪われるものの、細部はホームセンターにありそうな部材だったり、自転車用のパーツのようなものをベルクロや補修テープでくくりつけた無骨さ。ナウシカというより、どちらかというとこれはハウルだ。アクセル制御にいたっては音楽用ミキサーのフェーダーで、0dBまで上げるとジェットエンジンが吠える。時代考証が無茶苦茶なテクノロジーの塊だった。
　

　

　
　１週間後、八谷さんからメッセージが届いた。
「先日のカメラを機体に取り付けて撮影しませんか？」
　公開飛行がおこなわれるはずだった日、空の端から現れて反対側の空へ消えていくM-02Jを撮影しようと、特殊な全天球動画カメラを持っていったのだ。それを地上からではなく機上から撮影できるとは。
　
　早速、次の週チームに合流した。朝7時、メンバー全員を集めてブリーフィング。驚いたことにすぐに機体の移動補助や飛行記録といった責任ある役割をまかされる。後から知ったことだが、他のメンバーも初参加や2回目などが多かったようだ。
　ブリーフィングが終わると次はエンジンの試動。万が一のときのために、少し離れたところから消火器を手に待機する。アニメ調の機体から獰猛な燃焼音が響く。普段はグライダーとプロペラ機しかいない、のどかな飛行場で、ジェットエンジンは異次元の音だ。地鳴りのようなサブソニックと高速回転する金属音。イヤーマフをしていても頭蓋骨に響きわたる音に意識がゆっくり遠のいていくような気分になる。いまだに実感のわきづらい光景もあいまって現実とSFとが少しずつ融けていくような感覚を味わっていた。
　

　
　たった2年前なのに全天球動画撮影環境は今とかなり異なる。専用のカメラなどではなく、6台のGoProカメラを3Dプリンタで製作したリグで固定したものだ。これらをWi-Fi接続のリモコンから操作する。たいていひとつくらい電波が届かずリモコンに反応しないので目視確認して手動で録画開始する。数を重ねるうちに、手鏡を使って確認したり、映画用のカチンコアプリで合図を入れたり、とノウハウがたまっていく。
　
　撮影した映像はその日のうちにスティッチング。テスト飛行は朝9時には終わるので、昼の空き時間や就寝前の夜間、6本の動画を専用ソフトでひとつに合成する。作業してわかったことだが、複数カメラ映像の合成加工は、至近距離から地平線まで映り込む空撮にはあまり向いていないようだ。パイロットに合わせて合成すると遠い景色の輪郭がずれてしまい、かといって遠距離を合わせると今度は翼端の映像がずれる。もっともつなぎめが目立たないポイントを時間をかけて探していく。全フライト分を翌日に確認できるよう作業をするとなるとけっこう忙しい。
　
　動画の確認もノートPCで見るだけでは十分伝わらないので、あるときはOculus Riftを持ち込み、あるときはハコスコと自作アプリで即日確認できるようにした。
　

　　
　そのシーズンの最終日、ドローンの操縦を任された。ドローン撮影はチームとしても初めてだったのであまり効率よく撮影することはできなかったが、それでもワンカット、M-02Jが飛び立つ様子を上空からとらえることができた。*1
　
　このプロジェクトに参加する中、とても興味深く見ていたのは、八谷さんのプロジェクト運営、チーム運営方法だった。ボランティアベースのコミュニティということで、オープンソースプロジェクトのような、ゆるいつながりに近い。とはいえ、なにしろ航空機なので大きなお金も動くしミスがあったら人が死ぬ。そういった作業の一端を、初めて会ったばかりの大学生にもどんどん担当させていく。
　ボランティアベースだとスパルタ式にはいかない。丁寧な言葉で明確に指示をする。搭乗姿勢になった後は細かい指示は出せないので、メンバーそれぞれ自律的に動く必要がある。さらには700mほど離れたテイクオフ側とランディング側で２つのチームが独立して正しく機能する必要がある。八谷さんは、メンバーのスキルを見極めた上で全面的に信頼して担当を依頼する。それでも経験が浅いとミスはあるので、要所には関東から呼んだベテランスタッフを配置する。　
　また、利用させてもらう各種施設やコラボレーション先と付き合うときも、一方的な立場になるのではなく、相手側にもメリットのあるようにして、良い関係を長く続けられるようにする。周りの人たちとお互いにリスペクトした関係性を、わずかな期間で実にたくみに作り上げていってしまう。そのあたりの立ち回り方の秘密について何度か本人に聞いてみたのだが「偶然」とか、「出会いを大切に」とか、いつも普通の言葉でかわされてしまう。いや、それ絶対普通のスキルではないと思う。たぶん、それができれば今頃みんな、空を飛んでる。
　
　M-02Jは地面に映る影が非現実的なくらい美しい。この影を見る限り、八谷さんは完全に鳥だ。僕がこのプロジェクトに参加して撮影した全天球映像は、ハコスコアプリの「きみはテト2」で見ることができるので、ぜひ自分の目で確認してほしい。

　　　
　そんなOpenSkyプロジェクトであるが、2015年以降は参加できていない。時間的に都合がつかなかった、というのが直接的な理由ではある。本当の理由は、八谷さんを見て、なにかひとつ自分の大きなプロジェクトを始めたくなってしまったからだ。人間とコンピュータが融け合うSFを実現するプロジェクト。そのために働きながら大学院に入りなおし、土日はすべて研究の時間にあてるようにした。なにもかも手探りの状態なので、10年以上かかるかもしれない。
　
　OpenSkyプロジェクトの方は、今年無事目標だった場周飛行を成功させていた。クラウドファンディング支援者向けのテストフライト報告会が開かれ、その会場で久しぶりに八谷さんとお会いすることができた。プロジェクトは僕が参加していたときにくらべて、さらに加速していた。エンジン出力が倍になり、ずっと鋭角に上昇していた。ナウシカのテーマ曲の生演奏に乗せて、石狩平野のはるか上空で八谷さんは自由自在に飛んでいた。
　

　

ナウシカの飛行具、作ってみた発想・制作・離陸---- メーヴェが飛ぶまでの10年間

作者: 八谷和彦,猪谷千香,あさりよしとお
出版社/メーカー: 幻冬舎
発売日: 2013/09/12
メディア: 単行本
この商品を含むブログ (9件) を見る

*1:H ZETTRIOのMV「Wonderful Flight」で使われているドローン映像はこのとき撮影したものだそうです https://www.youtube.com/watch?v=-mlI_hZAS6U

ブラウザでMMLを演奏するChrome拡張作った

2016-08-22T00:00:00+09:00

ブラウザでMML(Music Macro Language)の文字列を選択してCtrl-Cを押すと音楽が流れるChrome拡張を作りました。
Googleウェブストアからインストールできます。
https://goo.gl/0UJQcT
ソースはこちら
https://github.com/aike/TSSCCjs
実行例
http://youtube.com/watch?v=o-IzrXaqIbM

今から10年くらい前、ネットの掲示板上でMMLによる音楽が盛り上がったことがありました。添付ファイルなどではなく、掲示板のテキストとして直接貼られた10行程度のMMLでも驚くほどリッチな楽曲が再現できるため、いかに短いMMLでリアルな音楽を表現するか、技術の競い合いのような文化が生まれていました。

当時、再生ツールとして使われていたのが、keimさんが作られたTSS Clipboard Player(TSSCPまたはTCP)というWindows用MMLプレイヤーです。これは、とよしまさん制作のT'SoundSystem(TSS)という、PSG、ファミコン、MSX、FM音源などの音を再現できるサウンドドライバを利用したものでした。Ctrl-CでクリップボードにMMLをコピーするだけですぐに音楽が再生されるTSSCPのあまりの使いやすさと、TSSの音の良さに支えられて、掲示板上のMMLは大変盛り上がったようです。（自分は後から知った口なので、当事者ではないんですが）

その後、別の方による偽TCPというツールも出たりしましたが、基本的にTSSCPのMMLがデファクトスタンダードとなって、その上に拡張機能を追加したものになっています。

月日は流れ2016年、Web Musicハッカソン#5で、いまやWeb Audio/Web MIDIのキーマンである、とよしまさんにお会いすることができたので、
「TSSのWeb Audio版ってないの？」
と聞いてみたら、
「あるよ」
とのこと。つまり、OSにかかわらずブラウザのJavaScriptでMMLを再生できる！

「じゃあ、クリップボード APIでMML演奏するツールもあるの？」
「MMLの方言がいろいろ違うし、それはまだなくて……」
え、そうなの？　MMLの方言くらいなんとかなるでしょ、ってことで作りはじめたのがこのツールです。つまりTSSCPのWeb版クローンです。

実装してみたら、意外と大変で。ブラウザのクリップボード APIはセキュリティのために、コピー操作時点でのクリップボードの内容が取得できないことが判明。ぐぬぬ。
まあ、キー操作と選択文字は取れるので、Ctrl-Cを押されたときに選択されている文字を取得すれば同じことはできるか。*1

MMLも難関です。
やるべきことはTSSCP形式のMMLをTSS形式のMMLに変換してTSSに渡すだけだし、どうせMMLの方言といっても、不等号の向きとかそんな程度だろうと思ってたら全然違いました。TSSCPのMMLは圧縮効率を重視したさまざまな拡張がされていて、行の終端は改行ではなくセミコロン、#A〜#Zまでマクロ定義、#FMマクロでFMアルゴリズムの柔軟な定義、といったTSSにない機能を持っています。

たとえばTSSCPのMMLは以下のようなものです。

#TITLE <sample>;t150;#A=%3v15o5cdefg;#FMB(A);A;A;

これを、TSSで再生できるようにするには以下のようなMMLに変換する必要があります。#FMマクロは、MMLの中でもさらに別のシンタックスを持った言語と考えられ、専用のパーサを別途用意する必要がありました。

#TITLE <sample>
#CHANNEL 3
#A t150
#B %3 @i0,0@o1,0v15o5cdefg
#C %3 @i3,0@o0,0v15o5cdefg

また、通常のマクロも、A(7)とすると、5度(7セミトーン)上に移調してマクロ展開するなど、高度な機能があり、これらを忠実に実装しなくては当時のMMLを同じ音で再生することができません。
さらに、偽TCPの拡張命令も難題です、これはTSSでは再生不可能な機能を実装していたりするので拡張コマンドを無視するしかないのですが、MMLは命令同士がセパレータで分割されておらず、また命令の文字数も1〜数文字とまちまちであるため、無視するにしても、ここからここまでが拡張コマンド、というように認識する必要があります。

結局、簡易的な文字列処理ではなく、しっかりパースして抽象構文木を生成してから変換するちょっとしたトランスパイラのプログラムになりました。

だいたいここまでで、当時のMMLは再生できるようになりましたが、まだ同じ音色になりません。よく調べてみると、JS版TSSのバグで発音数制限があったり、JS版ではmlコマンドがサポートされていなかったり、ということあったので、JS版TSSのソースに手を入れて調整した結果、ほぼ同じ音が出るようになりました。*2

非互換部分は以下のとおりです。
・偽TCPの拡張コマンドは非対応
・JS版TSSでは固定波形テーブル音源が未実装のため、%5の音源は無音になる
・oコマンドやlコマンドを未指定時の値が違うっぽい
・Panが左右逆かも
・文法エラーのあるMMLの解釈

再生確認用のサンプルMMLも書いてみたので、Chrome拡張をインストールして聞いてみてください。

#TITLE <TSSCCjs's Theme by aike CC-BY>;
t165;#A=l4dr8d16e16f2.r8gf8e8f8e.d.ec.d.efr8f16g16a2.r8b-a8g8d8fr8fr8fgr8gr8
;#B=d.a2r8g.c+2r8c+.d.ef2.rd.a2r8g.c2r8c+.g.df2.r;#C=l4ar8a16g16a2.r8ga<d8c.
>a.<c>a.a+.<c>a.b-16<c16d2.r8c.>a+ar8ar8a;#D=a.d8>a8.<d8.f8er8e8e8ef8g.a8a+8
ga+8;#E=dgfdgdfd>a<fd>a<f>a<d>a<cgecgcec>a<ec>a<e>a<c>a<dgfdgdfdcgecgcec>b-<
fd>b-<f>b-<d>b-;#F=fgfde.f8g.r8efg8aa+8ac+defgfde.f8g.r8efg8aa+8d2.r;#G=l4d.
>a.<d>b-r8b-.<dc.>g.<c>ar8ar8a<d.>a.<dcr8cr8c>b-r8b-r8b-a16r16a16r16a16r16a1
6r16<e>a<;#H=l16[dagfdfga][c+agfc+fga][eagfefga][dagfdfga];#I=[4arararar]<[d
rdrdrdr]frfrfrfrgrgrgrgr;#J=AeAa+BB;#K=C<cr8cr8c>C<c+r8c+r8c+Da2.rDa.d2r8Da2
.rDa.d2r8;#L=l8Ea<ec>a<e>a<c>a<Ea<ec+>a<e>a<c+>al4<FF>;#M=GGHHHH;#N=l8[8r1]I
[16r1];#O=%3v10ml3q6s5;#P=%3v10mp1,4,1,2,0k1q6s5;#Q=%3q10s3;#FMC3(B2(A));Oo6
$J;Po6$J;Qp1o6v6$J;#FMC3(B2(A));Oo5p2$K;Po5p2$K;Qp2o5v6p2$K;#FMC3(B2(A));Oo5
$L;Po5$L;Qo5v4$L;#FMC4(B2(A));%3o4l4v15$q0s1o3M;%3o4l4v13$q0s3o3M;%3o4l4v4$q
13s1o3M;o6v4q4s4$N;o6v4q4s4k5$N;o6v2q4s4r8.$N;o6v2q4s4k5r8.$N;o8%2q0s50l16v8
$[16arararaaarararaa][16araaaraaaraaaraa];#R=[7rara]ral16s20;%2q0l4o3s12,18v
8$Rarrraaaal4s12Raaaaaaaal4s12Rarrraaaal4s12Raaaaaaaal4s12;%3o4v15s1,-15q1l1
6$[16crrrrrcrcrrrrrcr][16crccrcrccrccrcrc];

*1:そういうわけでClipboard Playerとは名づけてません

*2:いずれも本家にプルリクエストして反映してもらいました

UnityでサイドチェーンしてSEとBGMの自動バランス調整する話

2016-04-15T00:00:00+09:00

最近のUnityは音楽制作用DAWのような機能が充実してて、試しにサイドチェーンできるか調べたらできたのでメモ。
　
サイドチェーンというのは音圧上げないと死ぬ病の人たちが発明した音楽用コンプレッサーの使い方で、キック（バスドラム）の音が鳴った瞬間、それ以外のシンセやベースなどの音量を自動的に下げる、というものです。これにより音圧をギリギリまで上げつつ、キックの音をしっかり目立たせ、バックの音にもンッアッンッアッというリズムを生み出すという一粒で三度美味しいワザです。
　
ゲーム制作でいうと、SEやセリフの音が鳴るときにBGMを自動的に下げるというような、よくある状況に応用できます。
　
早速やってみましょう。
　
UnityのWindowメニューからAudio Mixerを選択します。大丈夫、あなたのPersonal(無償)版でもできますから。
　
全然ミキサーっぽくない表示が出て若干不安になりますが、勇気を出して「＋」印をクリックし、ミキサー名を入力します。ぼくはこれまでの人生でミキサーに名前をつけるような経験は一度もしたことがなかったので少しとまどいましたが、無難に「mixer」としました。

一歩前進しました。でもまだミキサーっぽくないのでGroupsのMasterを選択した状態で「＋」をクリックしてトラックを追加します。トラック名はつけたことがあるので迷いません。「SE」と「BGM」にしました。

Audio Sourceをふたつ作ります。AudioClipとしては数小節分のキックのサンプリングとシンセのサンプリングループを用意します。サンプリングループは自分で作ると大変なので買ってきました。お金って便利。
　
キックの方はOutputを「SE(mixer)」に、シンセの方はOutputを「BGM(mixer)」にします。

　
サイドチェーンをかけずにそのまま混ぜて鳴らすとこんな感じになります。ふーん。

　
サイドチェーンの登場です。
トラックの下の方の「Add ..」をクリックし、SEは「Send」、BGMは「Duck Volume」を選択します。ミキサーっぽくなってきた。

　
SendのReceiveを「BGM\Duck Volume」、Send levelを最大の「0.00 dB」に設定します。

　
Duck VolumeのThresholdやRelease Timeをこんな感じに設定します。Thresholdは左の方にするほど強くかかるので、最初は強めにして効果を耳で確かめてから丁度いいところまで上げていくと分かりやすいかもしれません。

　
サイドチェーンをかけて鳴らすとこんな感じ。キックがしっかり聞こえて、シンセがンッアッンッアッですね。

　
次に別の音をトリガーにしてみます。
ユニティちゃんのボイスを公式サイトからダウンロードしてきました。
　
普通に混ぜるとこんな感じ。もごもご。

　
Duck VolumeのThresholdはさっきより強め。ユニティちゃんが一言しゃべるたびにンッアッってならないようにRelease Timeは長めにします。

　
できた。

　
ね？簡単でしょ。

OSCをMacやWindowsやLinuxやRasPiから送るシンプルツール作った

2016-01-14T00:00:00+09:00

OSC(Open Sound Control)を気軽に送りたくなることってあるじゃないですか。ラズベリーパイからPCへ簡単な通知を送ったりとか。どこのご家庭にもある雰囲気メガネを光らせたいときとか。
　
でもなかなかシンプルなツールが見つからなくて、開発環境入れてコンパイルする必要があったり、音楽や映像を扱う大きなソフトの一機能だったりして、ちょっと気軽な感じがしないものばかりで。そんなわけで、コンパイル不要で実行ファイルひとつだけでOSCメッセージを送れるコマンドを作りました。
　
http://github.com/aike/oscer

　
使い方は簡単。コマンド名の後にホスト名、ポート番号、OSCメッセージを指定するだけ。
　
実行例

oscer localhost 10000 /dummy

　
引数にはInt32、Float32、Stringが指定できます。

oscer 192.168.1.10 12000 /hello 10
oscer 192.168.1.10 13000 /world 3.14
oscer 192.168.1.10 12000 /hello world

　
IPv6も対応。たぶん。

oscer fe80::1%lo0 11000 /foo

golangで書いたので、クロスコンパイルも簡単。
Mac、Win32、Win64、Linux32、Linux64、LinuxARM(Raspberry Pi)用にビルドしておきました。golangは初めて使いましたが生ソケット通信みたいなアプリでも完璧にWrite once, run anywhereなのはびっくり。実行側はgolangをはじめランタイムライブラリ的なものが一切不要なのも嬉しいです。
　
そんなわけで良いOSCライフを。
　
2016.06.13 追記
受信側もほしくなったので受信機能もつけました。

oscer receive 10000

今夜わかるFM音源その2

2015-11-13T00:00:00+09:00

そんなわけで、いくつかreface DXで音色を作ってみます。お題としてはマイク・オールドフィールドのチューブラーベルズ。後半に様々な楽器が同じフレーズを順番に演奏するパートがあり、そこに出てくる楽器をひととおりFM音源で再現してみます。
　
できた音はこんな感じです。全楽器reface DXだけで作成し、録音時のエフェクト加工などもしていません。

　

Grand Piano (0:00)
グランドピアノの音は、アタック付近では倍音の多いノコギリ波、サスティンに従って正弦波のような甘い音になっていきます。前回も紹介したアルゴリズム8番で実装します。アタックが鋭すぎるとピックで弾いたような音になってしまうので、すこしなだらかな立ち上がりとします。
ピアノの音は、ひとつの音ならわりと簡単に作れるものの、低音から高音まで、弱い音から強い音まですべて似せるのはわりと大変です。キーボードスケーリングで低い方の倍音を多めにして力強さを加え、ベロシティセンスで強く弾いたときに倍音が多くなるようにしています。
最後に深いリバーブでボディとコンサートホールの響きを表現します。
reface capture用QRコード
　
Reed and Pipe Organ (0:23)
なんだかよくわからないオルガン系の音です。
普通のパイプオルガンはアルゴリズム12の加算合成や、フィードバックによる矩形波を作ると作りやすいです。ここではもう少しリードの特徴を出すためにフィードバックでノコギリ波を加えてクセのある音にしています。
QRコード
　
Glockenspiel (0:46)
FM音源の得意な金属音。
プリセット4-7 GlassHarpをもとに、EGを金属的なアタックにして調整します。金属音はキャリアに対して3.5倍のFREQのモジュレータという定番の設定ですね。
QRコード
　
Bass Guitar (1:09)
ベースギターはプリセット1-6 DarkBassの音をもとに調整しました。
弦のベースらしいアタック感とサスティンをEGで作るだけでそれらしくなります。モジュレータであるOP2とOP4を下げめにすると落ち着いたベース音です。今回はメロディを弾くため不自然にならない程度に上げてドライブ感を出しています。
QRコード
　
Double Speed Guitar (1:32)
ちょっと風変わりなエレキギターのクリーントーン。
コツコツしたアタックと中高域にクセのあるサスティンは、FM音源では意外と再現が難しいです。瞬間的な矩形波でアタックを、キャリアOP3とモジュレータOP4の周波数比を 2:3 にしてサスティンのクセを表現しています。さらにモジュレータOP4の立ち上がりを少し遅くすることで、弦が共振して遅れて倍音が増える雰囲気を出しました。また、歪んでると気づかないくらい薄くディストーションをかけてアナログ感を出しています。
QRコード
　
Two Slightly Distorted Guitar (1:55)
歪んだギター。
Bass Guitarをオクターブ上げてEFFECTのディストーションをかけるとそれだけで良い感じになります。ギターの歪みは矩形波に近いので、エフェクトをかける前の音もFBで矩形波に近づけると雰囲気が出ます。
今回は原曲風のゴツゴツしたアタックを再現しましたが、人間の弾くギターのアタックはとても多彩なので無理にアタックを強調しない方が良い場合が多いと思います。上手いギタリストのレガート奏法のようななめらかなアタックを出すために、MONOモードにするのもおすすめです。
QRコード
　
Mand...lin (2:17)
マンドリンのトレモロ。
小さめのボディの共鳴を再現するため矩形波に近い波形にします。マンドリンは弦が2本ずつ張ってあるためコーラスエフェクトをかけます。refaceにはトレモロの再現に便利なEG LoopがないのでLFOでがんばります。がんばったけど、あんまり似なかったので深めのリバーブでごまかします。
QRコード
　
Spanish Guitar and Introducing Acoustic Guitar (2:40)
これは原曲でも他の音に混ざってよく聞こえないので普通にアコギの単音ソロ風の音を作ってみました。定番のアルゴリズム8で、ボディが低く響くサスティンとアコギの弦特有のトレブリーな倍音を組み合わせています。これもモジュレータの立ち上がりを少し遅くして共振の隠し味を加えています。また、ベロシティセンスを上げめにしてダイナミクスをつけやすくしました。
QRコード
　
and Tublar Bells! (3:04)
最後にチューブラーベルズ。
プリセットにあるのであんまりすることがないです。プリセットの音は残響が長すぎるので少し調整。
FM音源では金属音が出しやすいものの、どうしても柱時計のような音になりがちなのでモジュレータを上げすぎないなど工夫が必要です。原曲のチュブラーベルズの音はローをカットしたような音なので二つのキャリアの一方をオクターブ上にしてみます。でもやっぱりreface DXだけでは再現が難しいです。
今回はやっていませんが、後からイコライザーをかけてローカットするとそれっぽくなると思います。
QRコード
　

今夜わかるFM音源

2015-11-07T00:00:00+09:00

reface DXいいですね。あえてDX7シリーズに近い音源仕様と、現代的な使いやすい操作性とを組み合わせることで、FM音源本来の音作りの楽しさがあります。とはいえ、先日Web Music Developer Meetup@Sapporoの参加者と話して、こういったイベントに参加するような人でも、FM音源でイメージどおりの音をつくるのは難しいと感じる人が多いようでした。そんなわけで、今回はちょっと実践的な音作り方法について書いてみようと思います。
　

■キャリアとモジュレータ
FM音源はオペレータと呼ばれる発振モジュールを組み合わせて音をつくります。変調される側をキャリア、する側をモジュレータと呼びますが、これは相対的なもので、アルゴリズムによっては変調されたキャリアがまた別のオペレータのモジュレータになることもあります。
　
と、いうようなよくある説明を読んでもなかなか音色にむすびつかないですよね。ここでは、自分の場合の音作りのワークフローを例に説明していきます。

■ハープの作成
最初の例としてハープの音をつくることにします。オーケストラの後ろの方で優雅にポロロンと弾いているあれです。
　
1. アルゴリズムの選定
音色の特徴はアタック時の波形とサスティン時の波形にあらわれやすいです。一般的にアタックは倍音やノイズを多く含み、サスティンは倍音が少ないので、アタックの音色とサスティンの音色を別々につくって最後にバランスをとる、という進め方がおすすめです。

こういった考え方の音作りに一番便利なアルゴリズムは8番です。アタック用とサスティン用にキャリアとモジュレータが一組ずつ使えます。実際プリセットもこれを使っているのが多くて、DXの音として名高いエレピやマリンバのプリセットもこのアルゴリズムです。

図を見てわかるように最終出力につながるオペレータが2個あります。これが1個のアルゴリズムはエグい音用、2個は汎用的、3〜4個になるとオルガンやパッドのような音、というような大まかなイメージです。

2. エンベロープ仮設定
reface DXのEGはDX7と同じくパラメーターが多くて大変です。なので、初期値としてパラメーターを以下のようにしてしまって、通常はR1(A)、 R3(D)、 L3(S)、R4(R)だけ操作するようにしてしまえれば、一般的なシンセのADSRと同じなので作業のとっかかりが楽になります。その後微調整したくなったときにはじめて他のパラメーターを触るようにします。

　L1:127 L2:127 L3:64 L4:0
　R1:127 R2:127 R3:64 R4:64

今回は、減衰音ということでL3=0にして、サスティン用にオペレータ1の減衰時間R3を長めの50に、アタック用にオペレータ3の減衰時間R3を短めの100にします。あとで微調整するのでここではざっくりの設定です。

3. サスティン音の作成
さて、ハープのような弦をはじく楽器（撥弦楽器）の場合、弦の振動は正弦波かそれに近いノコギリ波の軌道を描きます。
https://www.youtube.com/watch?v=6sgI7S_G-XI

これはreface DXの場合、FEEDBACKだけで再現できそうです。まずオペレータ1以外のLEVELを0にします。次にオペレータ1のFEEDBACKをそれっぽい音になるまで上げていきます。40くらいが良さそうです。またこのときEGのR1、R3、R4を微調整します。

ちなみに、キャリアとモジュレータの周波数比の定番としては以下のようなものがあります。reface DXはFEEDBACKでいろいろできてしまいますが、知識として知っておくとなにかと役立ちます。

　・ノコギリ波 1:1　ブラス、ストリングス
　・矩形波 1:2　クラリネット、笛、レトロゲーム
　・金属音 1:3.5

4. アタック音の作成
こんどはオペレータ1のLEVELを0にして、代わりにオペレータ3のレベルを上げてアタック音を調整します。ハープは、指で弾くためアタック時のノイジーな高周波はほぼゼロと考えてよさそうです。
次にハープの構造をググって調べます。奏者のおねえさんが抱えているあたりに、アコースティックギターのような共鳴胴とサウンドホールがあるようです。ということは箱が共鳴するような中域が響く音だと予想できますね。中域が共鳴する音は矩形波で再現しやすいのでオペレータ3のFEEDBACKをマイナス方向に下げていきます。-74にするとそれっぽくなってきました。EGのR1、R3、R4も同様に微調整します。R3は83くらいが良さそうです。

5. エフェクトの設定
　ハープはコンサートホールのようなところで鳴っている音がなじみ深いので、深めのリバーブをかけます。

6.最終調整
サスティン(オペレータ1)とアタック(オペレータ3)とのレベルバランスをとったら完成です。今回はオペレータ2と4は使いませんでした。もう少し倍音を加えたいときに少しずつ上げるようにして使います。

reface capture用QRコード

■ストリングスの作成
次はストリングスを作ってみます。オーケストラ風の存在感のある音を目指します。

1.アルゴリズムの選定
ストリングスの音はバイオリンやチェロなどたくさんの音が一斉に鳴っているところに特徴があります。そんなわけで全部のオペレータを並列に鳴らすアルゴリズム12を選びます。

2.エンベロープ仮設定
ストリングスは持続音でアタックが遅いので全部のオペレータを下のようなエンベロープにします。
　L1:127 L2:127 L3:127 L4:0
　R1:70 R2:127 R3:127 R4:90

3.サスティン音の作成
バイオリンのような弓で弾く擦弦楽器の弦の振動は、典型的なノコギリ波の軌道を描きます。
https://www.youtube.com/watch?v=6JeyiM0YNo4

今回も鳴らすオペレータ以外のレベルをゼロにして、すべてのオペレータひとつずつのFEEDBACKをそれっぽい音になるまで上げていきます。60くらいで良い感じになりました。

4.オクターブの調整
　オーケストラの弦楽器構成を想像して、低域、中域、高域にオペレータを振り分けます。オペレータ1のFREQを0.50、オペレータ2と3のFREQを1.00、オペレータ4のFREQを2.00にします。これで2オクターブに渡るユニゾンになります。

5.厚み・広がりの調整
ピッチやタイミングが正確すぎると、たくさんの音が鳴っているようには聞こえません。プラスマイナス10くらいの範囲で各オペレータのデチューンを設定することで音に広がりが出ます。また、EGのR1(アタック)、R4(リリース)を微調整して適当にばらけさせました。

6.エフェクトの設定
さらにたくさんの音で鳴っている効果をつけるため、コーラスエフェクトをかけます。ふたつめのエフェクトは、こちらもコンサートホールの響きを再現するためリバーブをかけます。各オペレータのレベルバランスも調整したらこんな感じ。

7.最後にひと工夫
これでもかなり良い感じのストリングスですが、アタックのときに弓が弦にこすれるザリッとしたニュアンスを加えてみます。
オペレータ2のFEEDBACKを上げて倍音を加えます。また、オペレータ2のエンベロープを下のようにしてアタックは大きく、サスティンは他よりも小さくなるようにします。

他のオペレータも気持ちR1とFBを増やしてアタック感と倍音を加えます。全体のレベルバランスをとったらできあがり。

ね？簡単でしょ。

次回はピアノの音の作り方とか紹介します。こんなやつ。

QR

aike.hatenablog.com

Processingの本の表紙がなにかおかしい

2015-08-12T00:00:00+09:00

今度Processing言語の良さそうな翻訳本が出るらしいんですが、Amazonで見ると書影がちょっとどうかしてるということで話題になりました。
　

　
はたしてこれがそのまま表紙になるのか、それともとりあえずの仮の画像なのかはよくわかっていません。一般的にこの手のクリエイティブ・コーディングとかジェネラティブ・アートとかいわれるジャンルの書籍は、その題材とする言語自身で出力されたグラフィックを表紙とするのが通例のように思います。はっ、ということは、これはこの書影をProcessingでジェネレートしてみろという出版社からの挑戦状なのでは？
　
そんなわけで描いてみました。パーリンノイズをつかっていて、リロードするたびに輪郭線などが変わります。
http://aikelab.net/processingbook/
　
ソースはこちら。
http://aikelab.net/processingbook/bookimage.pde
　

Processing ビジュアルデザイナーとアーティストのためのプログラミング入門(仮)

Webページに丸を描く5つの方法

2015-07-28T00:00:00+09:00

ひまなのでWebで丸を描く方法についていろいろ考えてみました。TMTOWTDI。

http://aikelab.net/circle

▪文字

<div id="mychar">●</div>

#mychar {
  color: #00f;
  font-size: 120px;
}

▪CSS

    <div id="mydiv"></div>

#mydiv {
  width: 100px;
  height: 100px;
  margin-left: auto;
  margin-right: auto;
  -webkit-border-radius: 50px;
  -moz-border-radius: 50px;
  border-radius: 50px;
  background-color: #00f;
}

▪Canvas

    <canvas id="mycanvas" width="110" height="110"></canvas>

      var canvas = document.querySelector('#mycanvas');
      var ctx = canvas.getContext('2d');
      ctx.fillStyle = '#00f';
      ctx.beginPath();
      ctx.arc(60, 60, 50, 0, Math.PI * 2, true);
      ctx.fill();

▪SVG

    <svg width="110" height="110"
    xmlns="http://www.w3.org/2000/svg"
    xmlns:xlink="http://www.w3.org/1999/xlink">
      <circle cx="50" cy="60" r="50" fill="blue" />
    </svg>

▪WebGL(Three.js)

    <script src="https://cdnjs.cloudflare.com/ajax/libs/three.js/r71/three.min.js"></script>
    <div id="mywebgl"></div>

      // シーンを作成
      var scene = new THREE.Scene();
      // サークルオブジェクトを作成
      var material =  new THREE.MeshBasicMaterial({color:"#0000FF"});
      var geometry = new THREE.CircleGeometry(0.5, 32);
      var mesh = new THREE.Mesh(geometry, material);
      scene.add(mesh);
      //カメラを作成
      var camera = new THREE.PerspectiveCamera(45, 1, 1, 100);
      camera.position.set(0, 0.05, 1.4);
      var renderer = new THREE.WebGLRenderer();
      // レンダラを作成
      renderer.setSize(110, 110);
      renderer.setClearColor("#fff", 1);
      document.querySelector('#mywebgl').appendChild(renderer.domElement);
      renderer.render(scene, camera);

超簡単に3DCGできるJavaScriptライブラリ作った

2015-01-30T00:00:00+09:00

ブラウザでWebGLが使えるようになって3DCGプログラミングはずいぶん身近なものになりました。と書いてるそばから違和感を感じるくらい生のWebGLをJavaScriptで書くのは敷居が高かったりします。できなくはないけど前提となる知識がかなり必要な感じ。
　
three.jsが登場したときは、これで普通に3DCGができるということで一気にひろまりました。とはいえ、それでもまだやることは多く、画面に四角い箱を表示する場合以下のようなプログラムを書くことになります。
　・シーンを作成
　・ライトを作成、位置と向きを設定、シーンに追加
　・カメラを作成、位置と向きを設定、シーンに追加
　・マテリアルを作成、色を指定
　・BoxGeometryを作成、サイズを指定
　・メッシュを作成、位置と向きを設定、シーンに追加
　・レンダラーを作成
　・レンダリングループ処理
これらのひとつでも間違えたりパラメーターが適切でないと箱は表示されません。
　
そんなわけで、超簡単に3DCGが描けるthree.jsのラッパーライブラリを作成しました。
http://aikelab.net/threepiece/
https://github.com/aike/ThreePiece.js
　
■ボックスを表示

var t = new ThreePiece();
t.eval({obj:"box"});

このライブラリの基本的な方針としては、ライトもカメラもデフォルト値を持っていて、何も指定しないとデフォルト値が使われるというものです。オブジェクトを生成すると画面の見やすい位置に見やすい色、見やすい大きさで表示されます。DOMツリー上の位置も、divのIDを指定したらdivの下に生成し、省略するとbodyの直下に生成します。
　
■複数オブジェクトの表示
オブジェクトを追加したり、グリッドを描いたりはこんな感じ。

var t = new ThreePiece();
t.eval([
  {obj:"grid"},
  {obj:"box", x:-1, col:0xffff00},
  {obj:"sphere", x:1, col:0x0000ff}
]);

　
■視点の回転
3DCGは、一方向から見ただけでは、各オブジェクトの位置関係がわかりづらく、またカメラの後ろ側にオブジェクトが生成されていたりということがあったりします。そういうときのパラメーター調整に便利な、視点を回転するrotate()命令を用意しました。

var t = new ThreePiece();
t.eval([
  {obj:"ground"},
  {obj:"box", x:-2, scale:2},
  {obj:"cylinder", x:2, scale:2, col:0x0000FF},
]);
t.rotate();

　
■モデルに名前をつけて操作
モデルに名前をつけて、後から名前で検索して操作することもできます。
また、addHook()を使うことで、レンダリングループに独自の処理を追加できます。

var t = new ThreePiece();
t.eval([
  {obj:"grid"},
  {obj:"box", name:"myobj"}
]);
t.addHook(function(msec) {
  t.obj("myobj").position.x = Math.sin(msec / 1000) * 4;
});

　
■グループ化
モデルが複雑になってくると、複数のモデルをグループ化したり、オブジェクトに変化があったときのみ再描画したり(いわゆるダーティーフラグ)といった機能がほしくなります。

var t = new ThreePiece();
t.define("face", {obj:"group", z:2, data:[
  {obj:"box", col:0xEEEEEE},
  {obj:"circle", w:0.1, z:0.51, x:-0.2, y:0.2, col:0x222222},
  {obj:"circle", w:0.1, z:0.51, x: 0.2, y:0.2, col:0x222222},
  {obj:"plane", w:0.6, h:0.2, z:0.51, y:-0.2, col:0xAA2222}
]});
var data = [
  {obj:"grid"},
  {obj:"face", x:-3, y:0},
  {obj:"face", x: 0, y:0, name:"centerface"},
  {obj:"face", x: 3, y:0}
];
t.useDirtyFlag();
t.eval(data);
var pos = 1;
setInterval(function() {
  pos = 1 - pos;
  t.obj("centerface").position.y = pos;
  t.setDirty();
}, 500);

　
■応用例
がんばればこんなこともできます。

http://aikelab.net/websynthv2/
　
Enjoy!
　

three.jsによるHTML5 3Dグラフィックス〈上〉―ブラウザで実現するOpenGL(WebGL)の世界

作者: 遠藤理平
出版社/メーカー: カットシステム
発売日: 2013/09/01
メディア: 単行本
この商品を含むブログを見る

MOOG モーグ / Minimoog Voyager Select Series Blue/Quarter Sawn

出版社/メーカー: moog
メディア:
この商品を含むブログを見る

WebGLでかっちょいいシンセできたよー

2015-01-25T00:00:00+09:00

ちょうど3年前に当時出始めのWeb Audio APIを使ってウェブブラウザで動くシンセを作りました。その後ブラウザのAPIもいろいろと進化したので、それに合わせてバージョンアップをしてみました。
　

　
http://aikelab.net/websynthv2/
https://github.com/aike/webaudiosynthv2
　
■新バージョンの特徴
・WebGL(three.js、ThreePiece.js)を使った3Dグラフィック
・Web Audio APIに追加されたオシレーターノードを使用してエイリアスノイズを排除
・Web Audio APIのオートメーション機能によるシンプルなGLIDEの実装
・Web MIDI APIでMIDIキーボードから演奏可能
・アスキーキーボードによる演奏
・デモ曲のロングバージョン
　
■実行環境
・最新版のChromeが推奨環境です
・Safariでも動きますが少し重いかもしれません
・FirefoxはWeb Audio APIのオートメーションが未実装のようでGLIDEが効きません
・ん、IE？なにそれ
　
■その他
DTMソフトウェアのGUIは、これまでのような擬似3Dのものから、3DCGソフトで描いたリアルなものが少しずつ増えてきたようです。いまは事前にレンダリングした画像を使っているようですが、いずれリアルタイムレンダリングの3D GUIを使うようになると予想しています。
　
そんなわけで、実験的にリアルタイムレンダリングの3DCGでGUIを実装してみました。まだいろいろもっさりしていて使いにくさはあるものの、簡単に拡大縮小できたり、マウスオーバー時のエフェクトなど2Dにはない面白さも感じられると思います。
　

three.jsによるHTML5 3Dグラフィックス〈上〉―ブラウザで実現するOpenGL(WebGL)の世界

作者: 遠藤理平
出版社/メーカー: カットシステム
発売日: 2013/09/01
メディア: 単行本
この商品を含むブログを見る

MOOG モーグ / Minimoog Voyager Select Series Blue/Quarter Sawn

出版社/メーカー: moog
メディア:
この商品を含むブログを見る

iPhoneでワウペダルを作ったった

2014-11-03T00:00:00+09:00

ワウペダルが好きです。ギターのカッティングにかけて遊んでいるとあっというまに時間が過ぎていきます。そんなわけでどこのご家庭にもあるiPhoneとJavaScriptでワウペダルを作ることにしました。こんなやつ。
　

JavaScriptでiPhoneの加速度センサーとWeb Audio APIを使ったワウペダル作った。 http://t.co/rGDHh5FaWb https://t.co/erfjy9tL80
— aike (@aike1000) 2014, 10月 20

　
■作り方
まず、Web Audio APIでフィルターを作ります。
Biquad Filterを作ってバンドパスフィルターに設定するだけです。簡単。Qの値を少し大きめの4くらいにしておくとワウらしいクセが出ます。あとは0.0〜1.0の引数の値に応じてフィルターの中心周波数をセットする関数setWahPos()を用意しておきます。これが、ペダルの角度が変わったときに呼ばれます。
　

var ctx = new AudioContext();
var wah = ctx.createBiquadFilter();
wah.type = "bandpass";
wah.Q.value = 4;
wah.connect(ctx.destination);
var setWahPos = function(pos) {
    wah.frequency.value = 400 + 3000 * pos;
}
setWahPos(1.0);

　
次にiPhoneの加速度センサーで角度を検知する処理を書きます。
deviceorientationのイベントリスナーを用意するとiPhoneの角度変化イベントを受け取ります。角度情報はalpha、beta、gammaの3方向あり、ペダルとして使用する前後の傾き情報はbetaが対応します。検知した角度を0.0〜1.0の範囲に正規化して指定されたコールバック関数を呼ぶ処理はこんな感じ。
　

var Pedaler = function(callback) {
    var self = this;
    window.addEventListener("deviceorientation", function(e){
        if (e.alpha) {
            self.setAngle(e.alpha, e.beta, e.gamma);
        }
    });
    this.angle = 0;
    this.callback = callback;
}

Pedaler.prototype.setAngle = function(alpha, beta, gamma) {
    var angle = (beta + 20) / 40;
    if (angle < 0.0)
        angle = 0.0;
    else if (angle > 1.0)
        angle = 1.0;

    this.angle = angle;
    if (this.callback)
        this.callback(this.angle);
}

　
上記のPedalerオブジェクトを生成して、コールバック関数でワウのsetWahPos()を指定することで角度と音色を連動させます。
　

$(function() {
    var pedaler = new Pedaler(function(a) {
        setWahPos(a);
    });
})

　
あとはUIと音源処理を書けば完成です。音源は本当はギターをiPhoneにつないで鳴らしたいところですが、WebRTCがまだiOSのブラウザでは使えないのでサンプリング音源をループで鳴らすことにしています。
　
iPhoneWah　http://aikelab.net/iphonewah/
ソースコード　 http://github.com/aike/iphonewah/
　
Pedalerはワウに限らず汎用的なペダルとして使えるように書いてあるので、アイデアとiPhoneを踏み壊す勇気があればいろいろ応用が考えられると思います。

RICOH THETAとJavaScriptでハコスコ用コンテンツを作るの巻

2014-09-30T00:00:00+09:00

ハコスコは、iPhoneさえあればわずか1000円で実現できてしまうヘッドマウントディスプレイです。ただまだ視聴できるコンテンツがそれほど多くありません。
　
そんなわけで今回はRICOH THETAを使ってハコスコ用のコンテンツを自作してしまおうという企画です。
　

　
THETA用オレオレビューアライブラリthview.jsを最近アップデートしました。iPhoneの加速度センサーの情報を見て傾きに合わせて全天球画像を表示します。HTMLとJavaScriptだけなので、本格的な開発環境は不要でテキストエディタとウェブサーバだけあれば誰でも作れます。
※WebGLの関係上、iOSのバージョンは8にする必要があります。
　
デモ1 戸棚の中

　
HTML的にはこんな感じです。

<!DOCTYPE html>
<html lang="ja">
<head>
    <meta charset="UTF-8">
    <title></title>
    <script type="text/javascript" src="three.min.js"></script>
    <script type="text/javascript" src="thview.js"></script>
</head>
<body>
    <div id="image1" style="position:absolute;top:0px;left:0px;"></div>
    <script type="text/javascript" >
        var img1 = new ThView({
            id:'image1',
            file: 'images/photo.jpg',
            width: 980,
            height: 560,
            zoom: 100,
            firstview: 90
        });
    </script>
</body>
</html>

　
また、THETAの公式アプリは最近のアップデートで、一定時間ごとに自動的にシャッターを切るインターバル撮影機能がつきました。そのためthview.jsにも連続写真をパラパラマンガ風に表示する機能をつけました。
　
デモ2 連続写真

<!DOCTYPE html>
<html lang="ja">
<head>
    <meta charset="UTF-8">
    <title></title>
    <script type="text/javascript" src="three.min.js"></script>
    <script type="text/javascript" src="thview.js"></script>
</head>
<body>
    <div id="image1" style="position:absolute;top:0px;left:0px;"></div>
    <script type="text/javascript" >
        var img1 = new ThView({
            id:'image1',
            file: [
                'images/R0010155.JPG',
                'images/R0010156.JPG',
                'images/R0010157.JPG',
                　　　　　：(省略)
                'images/R0010175.JPG'
            ],
            interval: 500,
            width: 980,
            height: 560,
            firstview: -90
        });
    </script>
</body>
</html>

画像はiPhoneのCPUパワー等を考慮して元画像よりも少し小さくした方が良いようです。
　
Oculus Riftみたいに両目で別々の画像を見る方が良いのかもと思ってthview.jsに hmd: true というオプションも用意しましたが、ハコスコの場合は両目で同じ画像を見るのがよさそうでした。
　
デモ3 両目別画像

　
Enjoy!
　

ハコスコ

出版社/メーカー: SR laboratories
メディア: エレクトロニクス
この商品を含むブログを見る

RICOH デジタルカメラ RICOH THETA 360°全天球イメージ撮影デバイス 0175760

出版社/メーカー: リコー
発売日: 2013/11/08
メディア: Camera
この商品を含むブログを見る

IR録ろうぜ！2

2014-09-21T00:00:00+09:00

DTMでよく使われるコンボリューションリバーブやアンプシミュレーターは、現実世界の音響的特徴をWAVファイルのかたちに記録したIR(Impulse Response、インパルス応答)を使って周波数特性や残響をシミュレートします。
　
最近はWeb Audio APIにもコンボルバーがあるので、気軽にIRを使える環境も広がってきたように思います。
　
IRファイルはDTMソフトウェアに付属するものから出自の怪しいものまでいろいろありますが、安心して自由に使えて再配布可能なものとなると意外と少なかったりします。
　
そんなわけで、IRファイルを自作してしまおうというのが今回の主旨です。
　
実はかなり前にプラグインエフェクトからIRを録る手順についてブログに書いたことがあります。今回は実際のアンプからマイク録りしてIRを作ります。
　

　
音響工学的な正確さを求めなければ、すごく簡単に作れるのがわかると思います。
　
このとき作ったIRファイルがこちらです。
ir_impulse.wav
ir_sweep.wav
　
これらをギターの音にかけてみます。
　
これが元のギターの音。かなりライン録りくさい感じがします。

　
クラップ音から作ったIRをかけた音。なんだかちょっとクセのある音ですがアンプっぽくなりました。手を叩いた時の残響が混ざって少しルームリバーブがかかったような音になっています。

　
スイープ音から作ったIRをかけた音。小型アンプとはいえマーシャルの特徴がけっこう出てると思いませんか。

　
IRはそれ自体がWAVなのでIRの波形を加工して残響成分を増減したりEQをかけて整えたりすることもできます。
また、本来IR目的ではない音のWAVファイルをIRとして使って特殊な音を作るようなクリエイティブな方法もあるので自由な発想でいろいろ試してみてください。

ブラウザでVJプログラム書くときのフレームワーク作った

2014-09-13T00:00:00+09:00

JavaScriptでオーディオとビジュアルの扱い方をおぼえると、人類はみなVJアプリを作るようになります。ぼくの周りの５人くらいの人類はそうでした。
　
自分もいろいろビジュアライザーアプリを作ってイベントでブラウザVJやったりしました。ただ、ひとつひとつはそれなりに面白い視覚効果のプログラムでも、それだけでは長時間のイベントに対応できません。通常のVJのように、イベントの進行やDJの音楽の緩急に合わせて効果的な視覚効果を選択して次々と切り替えていきたいところです。
　
そんなわけで、複数の視覚効果をクロスフェードで切り替えられるようなブラウザVJフレームワークを作りました。それぞれの視覚効果や各種の機能をプラグインとして仕様化し、この仕様に合わせれば拡張機能プラグインを自作できるようになっています。
　　
https://github.com/aike/jsdrome
http://aikelab.net/jsdrome/
　

　
■仕様
・複数のビジュアライザーをプラグインとして組み込み
・ビジュアライザー同士のクロスフェード
・非表示状態のビジュアライザーの処理を自動停止
・サウンドファイルの再生
・マイク入力またはサウンドファイルに反応する映像処理
・テキストロゴ表示
・ウェブカメラ入力表示
・キーボード入力による制御
・MIDI入力による制御
・Leap Motion入力による制御
　
現状、以下のようなビジュアライザープラグインがあり、クロスフェードで切り替えられます。

3d-cube.js	キューブ
3d-wave.js	スペクトラムアナライザー
3d-lissajous.js	リサジュー図形
3d-matrix.js	マトリックス
3d-stardust.js	宇宙
danmaku.js	弾幕ビジュアライザー
videoplayer.js	動画プレイヤー
dummy.js	表示テスト

　
以下のプラグインはクロスフェードせずに常時有効となる共通プラグインです。

common/logo.js	テキストロゴ表示
common/musicplayer.js	音楽プレイヤー
common/camera.js	Webカメラ＋エフェクト
common/controlwindow.js	操作パネル表示
common/leap.js	Leap Motionインタフェース

　
プラグインは以下の各イベントに対応するメソッドを実装します。イベント処理が不要の場合は空のメソッドとしておきます。

onStart()	表示開始
onStop()	表示終了
onFade(opacity)	フェードイン/アウト処理 opacityは0〜1
onAudio(moment, period)	マイク入力またはオーディオファイルの音量が定期的に通知される
onKeydown(keycode)	キー押下イベント。フォアグラウンドのプラグインにのみ通知される
onResize(x, y, width, height)	ウィンドウリサイズ処理
onTimer()	描画用タイマーイベント
onMidi(arg1, arg2, arg3)	MIDI入力イベント

　
わりと多機能なので、いずれもう少し詳しく書く予定です。

Webでポリシンセ作るときのテンプレ作った

2014-09-09T00:00:00+09:00

もう半年以上前に作ったやつですけどせっかくなので解説。
　
JavaScriptでプログラミングをやっていると人は誰しもシンセを作りたくなるかと思います。僕も３年くらい前にWeb Audio Synthというのを作りました。
　
いまはウェブブラウザもオーディオやMIDIのAPIが充実してきてシンプルな単音のシンセを作るのは簡単になりました。でもちょっと和音を弾きたくなってポリシンセに拡張しようと思うとこれがけっこう大変だったりします。
同時発音数6ボイスのポリシンセを作るとなったら、ほんとうにモノシンセを6個分実装する必要があります。さらに、和音を弾いている最中に追加で音を重ねるときなど空いているボイスをさがして割り当てるといったオブジェクトプーリングの仕組みが必要になります。
また、いくつかシンセを作っていると、鍵盤のUIやMIDI入力の対応など定型的で毎回同じ作業があることに気づいてきます。
　
そんなわけで、そういった部分をテンプレ的に用意しました。つまり、ボイス（ノートナンバーに応じて単音を生成する処理）の中身を自作すれば、それ以外の和音の処理、鍵盤のUI、ASCIIキーボードイベント処理、MIDIイベント処理、WebMidiLinkイベント処理などはテンプレにまかせてしまえるというものです。

https://github.com/aike/TemplateSynth

　
■シンセの作成例
自分のシンセを作りたい時は js/voice.js を拡張するようにしてください。

メソッド名	処理内容
Voice#noteOn(note, velocity)	発音開始
Voice#changeNote(note)	発音中に音程変更
Voice#noteOff()	発音終了
Voice#setParam(param_id, val)	パラメータ設定（空でも可）

　
デフォルトではサイン波を鳴らすシンセになっています。

var Voice = function(ctx) {
	this.ctx = ctx;
	this.next_node = null;
	this.noteNoToFrequency = function(noteno) {
		return 440.0 * Math.pow(2.0, (noteno - 69.0) / 12.0); 
	}
}

Voice.prototype.noteOn = function(note, velocity) {
	this.osc = this.ctx.createOscillator();
	this.osc.frequency.value = this.noteNoToFrequency(note);
	this.osc.connect(this.next_node);
	this.osc.start(0);
}

　
こんな風に変えるとプレイバックサンプラーになります。

var Voice = function(ctx) {
	this.ctx = ctx;
	this.next_node = null;
	this.noteNoToSpeed = function(noteno) {
		return Math.pow(2.0, (noteno - 69.0) / 12.0); 
	}
	var self = this;
	this.loadwav('sampler.wav', function(buf) { self.buf = buf; });
}

Voice.prototype.loadwav = function(file, callback) {
	var xhr = new XMLHttpRequest();
	xhr.open("GET", file, true);
	xhr.responseType = "arraybuffer";
	var self = this;
	xhr.onload = function() {
		self.ctx.decodeAudioData(xhr.response,function(buf){
			callback(buf);
		}, function(){});
	};
	xhr.send();
}

Voice.prototype.noteOn = function(note, velocity) {
	this.sample = this.ctx.createBufferSource();
	this.sample.buffer = this.buf;
	this.sample.playbackRate.value = this.noteNoToSpeed(note);
	this.sample.connect(this.next_node);
	this.sample.start(0);
}

　
１ボイスにつきデチューンした5個のノコギリ波を鳴らすSuper Saw的なシンセならこんな感じ。

var Voice = function(ctx) {
	this.ctx = ctx;
	this.next_node = null;
	this.noteNoToFrequency = function(noteno) {
		return 440.0 * Math.pow(2.0, (noteno - 69.0) / 12.0); 
	}
	this.osc = new Array(5);
	this.gain = new Array(5);
	for (var i = 0; i < 5; i++) {
		this.gain[i] = this.ctx.createGain();
		this.gain[i].gain.value = 0.3;
	}
}

Voice.prototype.noteOn = function(note, velocity) {
	for (var i = 0; i < 5; i++) {
		this.osc[i] = this.ctx.createOscillator();
		this.osc[i].type = 'sawtooth';
		this.osc[i].detune.value = 10 * i - 20;
		this.osc[i].frequency.value = this.noteNoToFrequency(note);
		this.osc[i].connect(this.gain[i]);
		this.osc[i].start(0);
	}
}

　
最大同時発音数は synth.js で以下のように指定しています。

synth = new Synth(8);

　
MIDI鍵盤から演奏したり、ASCIIキーボードを鍵盤代わりに弾くこともできます。
シンセの発音アルゴリズムを試したりするのに便利なので使ってみてください。
Web Componentsとか使ってるので動作環境は現状Chromeのみだと思います。

全天球ビューワーPaView.jsの動作環境とパノラマ飛行動画

2014-08-24T00:00:00+09:00

先日作った全天球ビューワーPaView.jsですが、できるだけ多くのブラウザで表示できるよう調べてみました。
クロスブラウザで問題になるところは、マウスイベント、WebGLで動画のテクスチャマッピングしているところ、対応動画フォーマットあたりです。
　
■Windows
Windows PCのブラウザは素直なものが多いようで、マウスイベントの処理をブラウザごとに書くくらいで、わりとそのまま動きました。Windows7上のChrome、Firefox、IEで正常に動くことを確認しました。
　
■Mac OS
Macの場合、Safari用のマウスイベント処理を書いたら正常に動きました。Firefoxは.mp4の動画に対応しておらず（特許関係らしいです）、WebMで表示するようにしてみました。サーバ上に.mp4と同名の.webmのファイルを用意しておけば、.mp4を.webmとJSが読み替えて無理矢理表示します。サーバ側も AddType video/webm .webm する必要があるかもしれません。
OS X Mavericks上のChrome、Firefox、Safariで正常に動くことを確認しました。
　
■iOS
iOSはWebGLRendererが使えないっぽいのでテクスチャマッピングがうまくいかず非対応です。
　
■Android
Androidは持っていないので未確認です。たぶんiOSと同じような状況だと思います。
　
先日、メディアアーティストの八谷さんの超小型飛行機にカメラを搭載して撮影した動画をアップしました。空中を飛んでいる風景は全天球パノラマ動画の大きな可能性を感じることができると思います。見てみてください。
　
http://sound.jp/aike/m02j/

※音が出ます。レンタルサーバの仕様上MacのFirefoxには対応していません。

MMDの全天球パノラマ動画を作ってみた

2014-08-07T00:00:00+09:00

THETAからはじまって最近は動画にいたるまで、このところ全天球パノラマに興味を持っていたところ、先日こんなツイートを見かけました。
　

GoPro 6台からの映像を合成することで全球映像ができるのであれば、MMDのカメラを6パターンで出力すれば、できるのかな？
— なヲタ級flagship - SKB06 (@nawota1105) 2014, 7月 20

　
通常、全天球パノラマ動画は6台のGoProで実写撮影した動画を、専用のスティッチングソフトを使って手作業で合成していきます。MMDの場合最初から仮想空間のCGなので、わざわざ6本のムービーとして出力して再合成する意味はあんまりないのですが、スティッチングの練習になりそうだし面白そうなのでやってみました。
　
http://sound.jp/aike/paview/index6.html

FL-chan−TYPEアノマロモデル by アノマロかりんとう / 金剛八式モーション by hino / 鷲宮神社ステージ by リボン犬
　
上のリンク先へ行くと、マウスでカメラを好きな方向に向けられる全天球パノラマ動画が表示されます（上記はキャプチャしたGIFアニメ）。一見リアルタイムレンダリングの3DCGのようにも見えますが、実際はムービーなのでFLちゃんの向こう側を見たりはできません。
　
MMDの出力パラメータはこんな感じです。
出力サイズ：
　640 x 480 px
視野角：
　100
カメラ角度：
　cam1　0, 0, 0
　cam2　0, 180, 0
　cam3　0, 90, -90
　cam4　0, -90, 90
　cam5　90, 180, 90
　cam6　-90, 180, 90

ブラウザで波紋エフェクト出すやつ作った

2014-08-06T00:00:00+09:00

最近プレゼンとかでウェブベースのアプリを実演する機会がわりとあったりします。そのときちょっと不便なのは、マウスをどのように操作して、どこでどういう風にクリックしたのかがいまいち伝わりにくいということで。まあしょうがないかと思ってたんですが。
　
そうしたら次期Androidのマテリアルデザインでは波紋エフェクトが使われるようになるとか。あー、その手があったか。そういえば、スマホじゃなくてPCの世界ではそういうのときどき見たことあるな、と思ってJavaScriptで作ってみました。
　
http://aikelab.net/visibletouch/
https://github.com/aike/VisibleTouch.js
　

　
発想の元はマテリアルデザインの波紋エフェクトですが、プレゼン用ということで最終的にいろいろ違った感じになりました。たぶん探せば同じようなツールはすでにたくさんあって101回目くらいの車輪の再発明だとは思うけど、自分用にぴったりのがほしかったので自作しました。
　
ライブラリのJSファイルは共通部と固有部にわかれていて、読み込む固有ライブラリによってビジュアライズが変わります。
　
visibletouch.js　共通ライブラリ
visibletouchripple.js　固有ライブラリ：波紋エフェクト
visibletouchmouse.js　固有ライブラリ：マウスイラスト表示
visibletouchano.js　固有ライブラリ：「あの楽器」風波紋エフェクト
　

　
波紋エフェクトの仕組みとしては、ウィンドウと同じサイズの透明なキャンバスをあらかじめ最下位レイヤーに置いておいて、クリックされたらキャンバスを最上位レイヤーに移動して波紋アニメーションを描画。波紋が完全にフェードアウトしたら再びキャンバスを最下位レイヤーに戻す、という無理矢理なことをしています。そのため波紋描画中に連続してクリックしたりドラッグしたりすると、いろいろ悲しい思いをすることがあると思います。
　

Invisible Touch

アーティスト: Genesis
出版社/メーカー: Virgin Catalogue
発売日: 2007/10/01
メディア: MP3 ダウンロード
この商品を含むブログを見る

片手間のJavaScriptでもテストがしたい！

2014-08-01T00:00:00+09:00

テストしたくないでござる。テストしたくないでござる。
いやまあきちんと環境が整ってたらテスト書くのもわりと楽だし、プログラム本体書いているときの安心感が全然違うので、それなりの規模のプログラムを書く時は良いんだけど。でも、2〜3日で書くようなちょっとしたブラウザ側だけのJavaScriptプログラムとか、開発環境がインストールされていないPCでも気軽にテストできないかなあというのが今回のテーマ。
　
これだけメジャーなJavaScriptなんだからテストも簡単だろうと思って調べると、ブログとかのサンプルを見てもNode.js前提だったり、Mochaが良さそうだと使おうとしたらアサーションライブラリは別だとか、UIはbrowserifyいるの？いらないの？とか、もじゃもじゃしたヤクの毛にからまって必死で刈り進める感じ。テスト初心者の人にテストコードの書き方を説明するときなんか、たどりつくまでがすごく遠い。
　
そんなわけで、インストール不要でconsole.logのすごい版みたいな感じにプリントデバッグおじさんでも気軽に使える、シンプルなJavaScriptテストのサンプルを作ってみました。
　
https://github.com/aike/MinimumJsTest
　
仕様はこんな感じ。
・ウェブブラウザ上でテストを実施
・Mocha + Chai を使用
・Node.js、npm、Webサーバ、その他ツールのインストール不要
・Node.jsに依存する機能・ライブラリは使えません
　
調べてみると、とりあえず最低限 mocha.js、mocha.css、chai.js の3ファイルだけあればブラウザを使ってテストができそうです。なので、外部ライブラリで使うのはそれらとjQueryのみとします。
　

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8" />
    <title>minimum javascript test example</title>

    <!-- 汎用ライブラリ -->
    <script src="jquery-2.0.3.min.js"></script>

    <!-- テストフレームワーク -->
    <link rel="stylesheet" href="test/mocha.css" />
    <script src="test/mocha.js"></script>
    <script src="test/chai.js"></script>

    <!-- テスト対象プログラム -->
    <script src="main.js"></script>

    <!-- テスト本体 -->
    <script src="test/test.js"></script>
</head>

<body>
    <!-- テスト結果出力用エレメント -->
    <div id="mocha"></div>

    <!-- アプリ本体のエレメント -->
    <div id="message"></div>
</body>
</html>

　
テスト対象の関数はたとえばこんな感じ。

// main.js
//// 引数で受け取った文字列をid="message"のエレメントに挿入する関数
function say(s) {
    $('#message').text(s);
}

　
それに対するテストコードはこんな感じ。

// test.js
$(function() {

//// テストの設定
chai.should();
mocha.setup('bdd');

///// テスト本体
describe('メッセージ出力のテスト', function() {

    it ('引数で指定したメッセージが出力されること', function() {
        say('Hello, world!');
        $('#message').text().should.equal('Hello, world!');
    });

    it ('非同期でもメッセージが出力されること', function(done) {
        setTimeout(function() {
            say('こんにちはこんにちは!!');
            $('#message').text().should.equal('こんにちはこんにちは!!');
            done();
        }, 100);
    });

});

//// テスト実行
mocha.run();

});

　
実行結果

　
テスト実行用アプリは必要に応じて後からちゃんと作ったりするとして、とりあえずざっくり書いたターゲットアプリのindex.htmlでテストを読み込んで実行するような利用イメージです。
　
ターゲットアプリのレイアウトが崩れて問題があるなら、こんなコードを追加するとテスト結果のウィンドウがオーバーラップしてるみたいな表示になります。

//// テストの出力をウィンドウっぽく表示 
$('#mocha')
.css({
    position: 'absolute',
    top: 10,
    right: 20,
    width: 400,
    bottom: 20,
    margin: 0,
    paddingTop: 50,
    overflow: 'scroll',
    backgroundColor: '#ddd',
    boxShadow: '8px 8px 8px rgba(0,0,0,0.3)',
    zIndex: 1000
})
setTimeout(function() {
    $('#mocha-stats')
    .css({
        position: 'absolute',
        top: 5,
        left: 2,
        width: 400,
        height: 40,
        backgroundColor: '#ddd',
        zIndex: 1000
    });
}, 100);

　
実行結果

　
おしまい

全天球パノラマ動画を表示するJavaScriptライブラリ作った

2014-07-26T00:00:00+09:00

複数台のGoProを組み合わせて360度上も下も撮影できる動画カメラが一部で流行りつつあるようです。
こんなやつ。
http://home360.co.jp/freedom360.html
http://freedom360.us/
　
要はRICOH THETAの動画版なんですが、動画ということで機材の価格もだいぶ違うし、複数の動画を合成する作業もまだまだけっこう手間も時間もかかります。
　
そこまで頑張って動画を作っても、公開がまた大変です。フリーのスタンドアロンプレイヤーはありますが(これとか)、見る人にインストールさせるのはちょっと面倒だし、Flashで作られた全天球動画プレイヤーも良いものがいろいろあるものの、自由にダウンロードできて自分のサイトで手軽に使えるものは今はちょっとなさそうです。
　
そんなわけでJavaScriptのThree.jsを使ってさくっと全天球動画プレイヤーを作ってみました。
　
http://sound.jp/aike/paview/
https://github.com/aike/paview.js

音が出ます。Chrome推奨、Firefox不可、SafariはWebGLを有効にする必要があるかも。
　
ドラッグしてカメラの向きを変えたり、ホイールでズームしたりできます。水平の調整やファーストビューの指定もできます。シンプルな作りだし、MITライセンスなので自由に改変して使ってください。
　
※ついでに前回つくったRICOH THETA画像表示用JavaScriptライブラリの方もドラッグでカメラ向きを変えられるようにしました。

RICOH THETA画像を表示するJavaScriptライブラリ作った

2014-01-02T00:00:00+09:00

絶賛通常営業中。
普段からいろいろプログラムは作っているもののこのところ仕事が立て込んでいてブログが全然書けなかったので休み中に棚卸し的に書いていきます。
　
RICOH THETAの画像を公開するとなると公式サイトに上げるのが普通なんですがやっぱりそれなりに不満点もあって、全公開になってしまうとか、ファーストビューが指定できないとか、顔や見せたくないところを加工してから公開したいとかそういうことがやりにくくてアップに躊躇したりということもあったり。
　
そんなわけで、とりあえず自サイトに上げて表示できるようなライブラリをThree.jsを使って作ってみました。まだまだ機能は少ないですが徐々に改善する予定です。
　
本当はJavaScriptで書けばPCでもスマホでも同じように見せられるかと思って作ったんですがiOSのブラウザはWebGLをフルサポートしてないみたいでだめでした。あと、PCでも現行のSafariはなぜかデフォルトでWebGLが無効になっているようでなんだかいろいろがっかりです。このライブラリは人類にはまだ早すぎたのかもしれません。
　
■デモサイト
http://aikelab.net/thview/
　

■機能と制限
自サイトにアップした全天球画像を表示します。
転送速度やプライバシーなどの理由で元画像を縮小しても表示できます。
元画像サイズに関わらず表示エリアの縦横サイズを指定できます。
ファーストビュー、ズーム、自動回転の有無、回転速度などを細かく指定できます。
~~ドラッグして向きを変えることはできません（今のところ）。~~
~~カメラを上下に動かして空や地面を見ることはできません（今のところ）。逆に自分が見えなくて良いかも。~~
自動で水平を補正することはできません。手動で補正することは可能です。
画像は同じサーバ（Same Origin）にある必要があります。そんなわけではてなダイアリーには埋め込めないです。
PCのChromeやFirefoxだと良い感じに見えます。それ以外の環境だといろいろアレな感じ。
　
まあ見ての通り実質50行くらいのライブラリなので気になるところがあれば好きに改造してください。
　
■埋め込み方
シンプルな例

<div id="ph1"></div>
<script type="text/javascript" >
    var img1 = new ThView({id:'ph1', file:'photo.jpg'});
</script>

オプション指定付きの埋め込み例

<div id="ph2"></div>
<script type="text/javascript" >
    var img2 = new ThView({
        id:'ph2',
        file:'photo2.jpg',
        firstview:180,
        zoom:100,
        width:300,
        height:200,
        rotation:true,
        speed:-30});
</script>

　
■オプション一覧

キーワード	意味
id	親エレメント(DIV)のID　(必須)
file	画像ファイル名　(必須)
width	幅のピクセル数
height	縦のピクセル数
rotation	自動回転の有無
speed	回転速度（負の値で反対方向へ回転）
zoom	ズーム
firstview	初期表示位置
degree	軸の角度調整 [x, y, z]

　
■ソースコード
 https://github.com/aike/thview.js
　
2014.07.26 追記
ドラッグして上下左右好きな方向を向けるようにしました

Web Audio APIとWeb MIDI APIでパターンシーケンサー風楽器作った

2013-11-18T00:00:00+09:00

Web Audio APIとWeb MIDI APIの応用例として楽器を作ってみました。
適当にボタンを押すだけでもそれっぽい曲になるので遊んでみてください。
　
http://aikelab.net/webrhy/
http://github.com/aike/webrhy

　
僕はYouTubeのDenkitribeさんやBakaOscillatorさんのパフォーマンスが大好きなんですが、あの域に達するにはそれなりの技術とアレンジ能力が必要でなかなか真似できるものではありません。
　
でも、このアプリをつかうと、わりとそれっぽい演奏が楽しめます。
　

　
それぞれのボタンにはパターンがわりあてられています。適当でかまわないのでリアルタイムにどんどん選んでいってください。なんとなく曲っぽくなるかと思います。慣れてきたら曲の展開や盛り上がりをつくったりもできます。ライブ演奏指向のアプリのため、パターンの並びをソングとしてあらかじめ組むことはできません（いまのところ）。
　
パターンは自作するのではなく、完全にランダムに生成されます。とはいえ、変な音にならないよういろいろ工夫しています。
シンセとベースは主和音や関連和音から音を選んだ単音フレーズにして、音がぶつからずに聞けるようにしています。シンセの方は、アクセント的にスケール音から生成したパターンをおりまぜています。
左端のパターン0はミュートです。その隣のパターン1はかならず主和音であるAmになるようにしたので、ちょっとカオスな感じになってきたらこのボタンを押すと落ち着いた感じに戻ります。
　
ドラムは、表拍の四分音符は必ずキックを鳴らして四つ打ちはくずさないようにしています。その上で右側に行くほど手数が増えて盛り上がるようなフレーズにしています。一番右端のパターンはスネアを連打するフィルインになっています。
　
その他、ショートカットキーとして[ESC]と[RETURN]は全ミュートになります。さんざん盛り上げて、フィルイン→全ミュートみたいにするとエンディングっぽくなります。
　
音源としては、あらかじめ内蔵されているWeb Audio APIを使ったシンセ音源の他、Web MIDI APIでMIDI接続した外部音源も使用できます。
　

　
ウェブオーディオ/MIDIの大きな可能性として、ライブパフォーマンスへの応用があると思っています。おそらく本格的なレコーディング品質のアプリが出そろうにはまだ少し時間がかかり、その前にAbleton LiveやKORG ELECTRIBE、volcaのような楽器と打ち込みの中間的な存在や、VJとの連携といったあたりにWebアプリが得意な分野があるような気がしています。

Web MIDI APIを使ってMIDI鍵盤からブラウザコントロール

2013-11-09T00:00:00+09:00

ウェブブラウザにWeb MIDI APIが少しずつ実装されてきて、Mac OS XのChrome Canary版だとプラグインなしで普通に使えるくらいになってきました。
　
Web MIDI APIを使うとJavaScriptでさまざまなハードウェア音源を鳴らすことができます。ただそれは一側面に過ぎず、重要なのはウェブブラウザ(JavaScript)がついにリアルワールドとつながったということです。WebRTCもウェブと現実世界をつなげる技術ではありますが、MIDIはなにしろ30年も歴史があって、そのシンプルなプロトコル仕様ゆえに当初の演奏情報以外のコントロールにもいろいろ汎用的に使われてたりもします。
　
また、Web MIDI APIは電子楽器を制御して音を鳴らすだけでなく、MIDI鍵盤やターンテーブル型のDJコントローラーのようなハードウェアからの入力を受け付けることができます。ということは、ウェブブラウザを操作することができる膨大なフィジカルコントローラーを手に入れたことになります。しかもそれらは何百年もの人間工学的な蓄積によって操作性が洗練されていて、またライブツアーのようなタフな使われ方にも対応できるだけの耐久性を持っています。
　
そんな可能性の一端を示すウェブページを作ってみました。
　
http://aikelab.net/midizap/

　
Web MIDI APIが使用できる環境で、MIDI鍵盤をつないで弾いてみてください。「ド」の鍵盤を押すとドーナツのページが開き、「レ」の場合はレモンのページが開き、「ミ」はみんなのページが開き……、という風にブラウザをコントロールします。
　
※Web MIDI APIが使えない場合、画面上の白鍵をクリックしても一応動くようにはしてあります。
　
まだまだテスト的なページですが、この先に何か多くの可能性があるような気がして楽しみです。

ツクツクホーシにギターとベースとドラムを重ねてみた

2013-09-21T00:00:00+09:00

もう夏も終わりな感じであれですが。少し前にツクツクホーシのサビの部分がどうのとか鳴き声が「おじいちゃん！」に聞こえるとかちょっと話題になって、じっくり聞いてみたもののよくわかりませんでした。
　
僕からしてみればあれはどうみてもメロスピのギターリフに聞こえるんですが、言葉で言っても伝わらないと思うのでバッキングを重ねてみました。聞いてください。

メンバー紹介
　リードギター　ツクツクホーシ（テンポ、ピッチ、エフェクト等加工なし）
　バックギター　KONTAKT5 + PG01
　ベース　KONTAKT5 + SCARBEE MM BASS
　ドラム　EZ Drummer + dfh

明日また来てください、本物のExcel方眼紙をお見せしますよ

2013-09-19T00:00:00+09:00

「俺はェスァイ」
「SIって？」
「お客様のビジネスに最適なソリューションをインテグレートするんだ」
「でたっ、富士通っぽいことば！！」
「標準機能を組み合わせたパッケージは使いにくいからだよっ！！」

ドス、ドス、ドス、バッ
「この仕様書を作ったのは誰だあっ！！」
「Excelの文書がなにかございましたか」
「なぜセルをこんなに細かくした！！計算など必要のない連中がスプレッドシートを使うからだ。馬鹿どもにExcelを与えるな」
「ははっ」

「そんなことを言うからには、文字やフォームを任意のグリッドにレイアウトできて、顧客も当然のように文書ファイルを開けるソフトウェアがいろいろあるんだろうな」
「ぐぬう」
「Excel方眼紙は帳票デザインが大きな割合を占める日本の業態に即したものなんだ」
「とはいえ俺も一般的なExcel方眼紙が最良とは思わない」
「みなさん、明日またここに来てください、本物のExcel方眼紙をお見せしますよ」

ダウンロード(hoganshi.xlsx)

美味(おい)しんぼの料理本 (ビッグコミックススペシャル)

作者: 雁屋哲,花咲アキラ
出版社/メーカー: 小学館
発売日: 2004/03/30
メディア: コミック
この商品を含むブログを見る

美味しんぼ (1) (小学館文庫)

作者: 雁屋哲,花咲アキラ
出版社/メーカー: 小学館
発売日: 2000/08
メディア: 文庫
この商品を含むブログを見る

HTML5でワードアートするJSライブラリ作った

2013-09-08T00:00:00+09:00

以前は商店街のチラシや自治会のお知らせなんかでよくワードアートが使われていました。もう最近は目にすることも少なくなりましたが、ワードアートのレトロで独特の雰囲気は見る人をなごませるように思います。
そんなわけで、最新のウェブ技術の粋を集めてワードアートを再現するライブラリwordart.jsを作りました。
http://aikelab.net/wordart/

　

　
　
こんな文字列にするといかにもな雰囲気が出ます。

　
　
最先端のインフォメーションもワードアートにするとまるで90年代のようです。

　
　
世界的な大イベントもほらこのとおり、なんだか町内会っぽい。

不思議な円グラフを描くウェブサービス作ったよ

2013-07-18T00:00:00+09:00

最近ツイッター界隈で不思議な円グラフを見かけました。
こんなやつです。

ちょっと調べてみると昨年の報道番組からキャプチャした映像のようです。
　
このグラフを見て、その手があったか！という新鮮な驚きを感じました。これまでの円グラフの常識にとらわれず、円の中心からあえてずらした位置から分割することで飛躍的に表現の幅を向上させています。無味乾燥で機械的なグラフにくらべて製作者の強い思いがぐっと伝わってきます。なんとイノベーティブでなんとワンダーなグラフなのでしょう。
　
でも、このグラフ、実際に描こうと思うとけっこう面倒です。Excelのグラフ機能をみても中心点の位置をずらす方法はなさそうです。
　
そんなわけでゆがんだ円グラフを描くウェブサービスを作りました。

ワンダー・グラフ・ジェネレイター

項目の追加変更はもちろん、中心をずらしたり、楕円形にして項目を強調したりできます。円グラフの秘められた表現力を感じてみてください。
それからレポートで使うとたぶん怒られます。
　

Still Life

アーティスト: Van Der Graaf Generator
出版社/メーカー: Virgin UK
発売日: 2005/06/27
メディア: MP3 ダウンロード
この商品を含むブログを見る

aike’s blog

写真から素数を文字認識するアプリ作ったよ

作ったもの

使い方

使った技術

写真から電話番号を文字認識するアプリ作ったよ

作ったもの

使い方

ユースケース

使った技術

パンはパンでも体の向きによらない3Dパンがでーきた

メーヴェ型飛行具のプロジェクトに参加した話

ブラウザでMMLを演奏するChrome拡張作った

UnityでサイドチェーンしてSEとBGMの自動バランス調整する話

OSCをMacやWindowsやLinuxやRasPiから送るシンプルツール作った

今夜わかるFM音源 その2

今夜わかるFM音源

Processingの本の表紙がなにかおかしい

Webページに丸を描く5つの方法

超簡単に3DCGできるJavaScriptライブラリ作った

WebGLでかっちょいいシンセできたよー

iPhoneでワウペダルを作ったった

RICOH THETAとJavaScriptでハコスコ用コンテンツを作るの巻

IR録ろうぜ！2

ブラウザでVJプログラム書くときのフレームワーク作った

Webでポリシンセ作るときのテンプレ作った

全天球ビューワーPaView.jsの動作環境とパノラマ飛行動画

MMDの全天球パノラマ動画を作ってみた

ブラウザで波紋エフェクト出すやつ作った

片手間のJavaScriptでもテストがしたい！

全天球パノラマ動画を表示するJavaScriptライブラリ作った

RICOH THETA画像を表示するJavaScriptライブラリ作った

Web Audio APIとWeb MIDI APIでパターンシーケンサー風楽器作った

Web MIDI APIを使ってMIDI鍵盤からブラウザコントロール

ツクツクホーシにギターとベースとドラムを重ねてみた

明日また来てください、本物のExcel方眼紙をお見せしますよ

HTML5でワードアートするJSライブラリ作った

不思議な円グラフを描くウェブサービス作ったよ

今夜わかるFM音源その2