タグ

ブックマーク / aike.hatenablog.com (16)

  • 竹内関数が音楽的に聴こえる理由について考えてみた - aike’s blog

    前回のエントリーが予想以上に反響が大きくてびっくりしています。 プログラミング言語好きの僕にとってはヒーローみたいなすごいプログラマーたちにツイートしてもらってびびっていたところ、今日になって竹内先生ご人からのコメントをいただいてしまって気で腰抜かしそうになりました。せっかくなので自分なりに竹内関数が音楽的に聴こえる理由についての考えを書いてみます。 ■ちょっとした工夫 最初に少し種明かしをすると、より音楽的になるように以下のような工夫をしています。 ・ダイアトニックスケール(白鍵)だけを使用し調性の外れた音が出ないようにした ・最小値(-1)をレにわりあてることで少し寂しげなドリアンスケールにした (とはいえ-1の出現頻度が低いのでミからはじまるフリジアンスケール的かも) ・オートアルペジオ、テンポ、音色の設定でミニマルミュージック風にした 上記のことをおこなうと、ただの乱数でもわり

    竹内関数が音楽的に聴こえる理由について考えてみた - aike’s blog
  • 超簡単に3DCGできるJavaScriptライブラリ作った - aike’s blog

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

    超簡単に3DCGできるJavaScriptライブラリ作った - aike’s blog
  • WebGLでかっちょいいシンセできたよー - aike’s blog

    ちょうど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が推奨環境です ・Sa

    WebGLでかっちょいいシンセできたよー - aike’s blog
  • 片手間のJavaScriptでもテストがしたい! - aike’s blog

    テストしたくないでござる。テストしたくないでござる。 いやまあきちんと環境が整ってたらテスト書くのもわりと楽だし、プログラム体書いているときの安心感が全然違うので、それなりの規模のプログラムを書く時は良いんだけど。でも、2〜3日で書くようなちょっとしたブラウザ側だけのJavaScriptプログラムとか、開発環境がインストールされていないPCでも気軽にテストできないかなあというのが今回のテーマ。 これだけメジャーなJavaScriptなんだからテストも簡単だろうと思って調べると、ブログとかのサンプルを見てもNode.js前提だったり、Mochaが良さそうだと使おうとしたらアサーションライブラリは別だとか、UIはbrowserifyいるの?いらないの?とか、もじゃもじゃしたヤクの毛にからまって必死で刈り進める感じ。テスト初心者の人にテストコードの書き方を説明するときなんか、たどりつくまでがす

    片手間のJavaScriptでもテストがしたい! - aike’s blog
  • 全天球パノラマ動画を表示するJavaScriptライブラリ作った - aike’s blog

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

    全天球パノラマ動画を表示するJavaScriptライブラリ作った - aike’s blog
  • 明日また来てください、本物のExcel方眼紙をお見せしますよ - aike’s blog

    「俺はェスァイ」 「SIって?」 「お客様のビジネスに最適なソリューションをインテグレートするんだ」 「でたっ、富士通っぽいことば!!」 「標準機能を組み合わせたパッケージは使いにくいからだよっ!!」 ドス、ドス、ドス、バッ 「この仕様書を作ったのは誰だあっ!!」 「Excelの文書がなにかございましたか」 「なぜセルをこんなに細かくした!!計算など必要のない連中がスプレッドシートを使うからだ。馬鹿どもにExcelを与えるな」 「ははっ」 「そんなことを言うからには、文字やフォームを任意のグリッドにレイアウトできて、顧客も当然のように文書ファイルを開けるソフトウェアがいろいろあるんだろうな」 「ぐぬう」 「Excel方眼紙は帳票デザインが大きな割合を占める日の業態に即したものなんだ」 「とはいえ俺も一般的なExcel方眼紙が最良とは思わない」 「みなさん、明日またここに来てください、

    明日また来てください、本物のExcel方眼紙をお見せしますよ - aike’s blog
  • HTML5でワードアートするJSライブラリ作った - aike’s blog

    以前は商店街のチラシや自治会のお知らせなんかでよくワードアートが使われていました。もう最近は目にすることも少なくなりましたが、ワードアートのレトロで独特の雰囲気は見る人をなごませるように思います。 そんなわけで、最新のウェブ技術の粋を集めてワードアートを再現するライブラリwordart.jsを作りました。 http://aikelab.net/wordart/ こんな文字列にするといかにもな雰囲気が出ます。 最先端のインフォメーションもワードアートにするとまるで90年代のようです。 世界的な大イベントもほらこのとおり、なんだか町内会っぽい。

    HTML5でワードアートするJSライブラリ作った - aike’s blog
  • 不思議な円グラフを描くウェブサービス作ったよ - aike’s blog

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

    不思議な円グラフを描くウェブサービス作ったよ - aike’s blog
  • JavaScriptにsleepを実装しようとして気づいたら新言語を作ってた話 - aike’s blog

    あのですね、JavaScriptにsleep()とかwait()みたいなのってほしいじゃないですか。で、調べてみると標準にはなくて作れるには作れるけどブラウザ依存だったりビジーループだったりJava Applet併用だったりしてがっかりするじゃないですか。 ぼくは1年半くらい前に「竹内関数で音楽生成」っていうエントリーを書いたんですが、当然これをJavaScriptで計算しながら音を鳴らすページを作りたくなりますよね。ですよね。こう見えても昔はN88-BASICでCMD PLAYとかばりばり使ってたくちなんで、そのくらい簡単だと思うじゃないですか。そしたらもう当時はAudio APIも出たばかりで情報もすくなくてブラウザ依存で、しかもJavaScriptでsleepできないしふんだりけったりで最初の一歩も踏み出せない状態。 そんなわけでなんとか手はないかとこの1年以上ずっと試行錯誤してきて

    JavaScriptにsleepを実装しようとして気づいたら新言語を作ってた話 - aike’s blog
  • KORG MS-20で音作るよー その1 - aike’s blog

    近頃の若いもんはアナログシンセの音作りの基を知らなくてけしからん、と思ったりします。まあそれも無理もないことで、昔はYAMAHA CS01やRoland SH-101のような入門者用のシンプルなシンセがありましたが、最近のシンセはパラメータが複雑で、多彩な音が作れる反面使いこなすには難しいものが多い気がします。 そんなわけでまもなく発売されるMS-20 mini。シンプルなわりに音作りの幅が広くとてもバランスの良いシンセです。とはいえ、これもでたらめに触るだけではなかなか使いこなせないと思うので簡単に解説してみます。(画像と音はソフトシンセ版のLegacy Collectionを元にしています) ■基設定 とりあえず基の設定。パッチはなにもせず、フィルターも全開です。最初はここから2個のオシレーター(VCO)とエンベロープ・ジェネレーター(EG)だけを使ってみるとわかりやすいと思いま

    KORG MS-20で音作るよー その1 - aike’s blog
  • VSTプラグイン作家のためのWeb Audio API入門 〜 adelayの作成 - aike’s blog

    全国100人くらいのVSTプラグイン作家の方こんばんは。今日は皆さんおなじみのadelayのウェブブラウザバージョンを作ってみたいと思います。最近のウェブブラウザはAudio APIが急速に充実してきて簡単に音声信号処理ができるようになってきました。 adelayといえばVST 2.X SDKのサンプルコードとして大変なじみ深く、こんなシンプルなコードであのディレイが作れてしまうのかというインパクトもあり、プラグイン作家であればアルゴリズムをそらで暗唱できるくらい体に染み付いているかと思います。(←大げさ) 一方、Web Audio APIで用意されているDelayNodeは単に入力信号を遅延させて再生するものでDry/Wetのバランス設定やFeedbackもありません。ディレイプログラムはGainNodeなどと組み合わせて作ることが想定されているものと思いますが入門者が学習するにはちょっ

    VSTプラグイン作家のためのWeb Audio API入門 〜 adelayの作成 - aike’s blog
  • Webシンセ同士で同期演奏しようぜ! - aike’s blog

    僕と同じようにブラウザで動くシンセを開発しているg200kgさんがすごい技術を考案しました。 お客様の中にWebシンセプログラマはいらっしゃいませんか | g200kg Music & Software どういうことかというと、HTML5のpostMessageで簡易的なMIDIメッセージをクロスドメインで送ってWebシンセ同士で同期させるというものです。シンセ側は以下のようなわずか数十行のJavaScriptを追加するだけでスレーブとして制御してもらえちゃいます。 http://aikelab.net/websynth/websynth_message.js 動画をとったのでまずは見てみてください。g200kgさんのサイトから、僕のWebAudioSynthとg200kgさんのWebModularを制御して同期演奏しています。 すごい時代になった……。 Google API Expert

    Webシンセ同士で同期演奏しようぜ! - aike’s blog
  • ヤター!ウェブブラウザで動くシンセできたよー - aike’s blog

    最近のHTML5やWebブラウザのAPIの進化はけっこうすごくて、普通にサウンドプログラミングもできるようになってきました。そんなわけでシンセサイザーアプリを作ってみました。 サウンドを扱う方法はいくつかあるみたいですが、Google Chromeで使えるWeb Audio APIがEQやディレイなどあらかじめ用意されていて良さげなので使いました。 http://aikelab.net/websynth/ まだ、バグもけっこうあるのでじょじょにブラッシュアップしていきます。 Chrome以外では動かないと思うので試せない人はこちらの動画をどうぞ。 Google API Expertが解説するHTML5ガイドブック 作者: 羽田野太巳,白石俊平,古籏一浩,太田昌吾 出版社/メーカー: インプレスジャパン 発売日: 2010/09/16 メディア: 単行(ソフトカバー) この商品を含むブログ

    ヤター!ウェブブラウザで動くシンセできたよー - aike’s blog
  • 竹内関数で音楽生成 - aike’s blog

    Lisperの人ならみんな知ってる竹内関数(たらいまわし関数)という関数があります。 定義としてはこんな感じ。 そのシンプルな定義からは想像もつかないほど複雑で膨大な再帰呼び出しがおこなわれるとても興味深い関数です。たとえば引数にTarai(10,5,0)を与えると343,073回も再帰呼び出しされたりします。 この関数呼び出しの引数がどのように変化するか知りたくてプログラムを書いて調べてみたところ、Tarai(10,5,0)の場合は3つの引数がそれぞれ0〜10(xは-1〜10)の間で少しずつ変化するなかで、2つの値を固定してひとつの値が下降していくような挙動があったりして、なんだか音楽の3和音のコード進行を思わせるような動き方です。 そういうことなら、ということで実際に音にして聴いてみました。Tarai関数が呼ばれるたびに引数のx、y、zを、0=ミ、1=ファ、2=ソ、……、のように音に割

    竹内関数で音楽生成 - aike’s blog
  • FL StudioとJavaScriptでサウンドプログラミング - aike’s blog

    FL Studioにはオーディオ編集ツールとして評判の高いEdisonが付属しています。VST版も販売されているので単品で購入すれば他社のDAWでも使用できるようです。 あまり知られていないことですがEdisonはプラグインを読み込んでオーディオ編集機能を拡張することができます。さらに知られていないことですが、このプラグインはスクリプト言語を使って簡単に書くことができます。スクリプト言語としてはPascal、Basicの他にみんな大好きJavaScriptも使えます。 そんなわけで今回はJavaScriptを使って簡単なサウンド加工プラグインを作ってみます。 ■編集ツールプラグインのメリット DTMのプラグインというとVST Effectのようなものがよく使われますが、VSTはリアルタイムで音を加工するためにプログラミング上非常に厳しい時間的制約があり、あまり重い処理はできません。また、1

    FL StudioとJavaScriptでサウンドプログラミング - aike’s blog
  • プログラマーが知っておくべきうつ病の知識 - aike’s blog

    少し前にITproにプログラマーは「こころの病」にかかる比率が高いという記事が載っていましたが、あらためて言われるまでもなくプログラマーがストレスで精神を病んで離脱するケースは自分の周りを見ても非常に多いです。こんな状況であればプログラマーに対する危険手当やプログラマー専用うつ保険とかあっても良いと思うのですがなかなか社会は変わらないようです。 このような状況に対抗するにはプログラマー自身が自衛のために知識を得ることだと思います。プログラマーの武器は知識であり、ハックする好奇心なのだから、あらかじめ十分な知識を身につけて不当なストレスに対して有利に戦いをすべきなのです。 1.判断力低下は想像以上に怖い うつで一番恐ろしいのは、気分が憂になることではなく、判断力が低下することです。 判断力が落ちるとどうなるかと言うと、自分が健康なのかどうか判断できなくなり、仕事を休むべきなのかどうかで判断

    プログラマーが知っておくべきうつ病の知識 - aike’s blog
  • 1