タグ

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

  • 不思議な円グラフを描くウェブサービス作ったよ - 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
  • Web楽器をMIDI鍵盤やDAWから鳴らす方法 - aike’s blog

    最近はウェブブラウザのAudio APIが充実してきて、JavaScriptだけで実装されているウェブ楽器が増えてきました。なかにはかなり格的な音が出るシンセサイザーなどもあり、そういった楽器をUSB-MIDIキーボードやDAWから鳴らせれば楽しいだろうなと思って以前調べて実現することができました。 g200kgさんの提唱するWebMidiLinkに準拠したウェブ楽器であれば以下の方法で鍵盤やDAWから鳴らすことができます。 ■USB-MIDIキーボードからウェブ楽器を鳴らす方法 USB-MIDIキーボードからウェブ楽器を鳴らすには以下のソフトウェアを使います。 Jazz Plugin MIDIデバイスとブラウザを中継するプラグイン。 これを入れるとJavaScriptからMIDIデバイス信号を取得できるようになります。 Jazz2WML JazzPluginが検知したMIDI入力をWe

    Web楽器をMIDI鍵盤やDAWから鳴らす方法 - aike’s blog
  • JavaScriptで正規表現練習ゲーム作った - aike’s blog

    特に何か目的があるわけじゃないんですが、JavaScriptの練習のためにゲームを作ってみました。 Regex Of The Dead タイピングゲームのように正規表現を練習するためのシンプルなゲームです。ゾンビと一般人が迫ってくるのでゾンビの名前にだけマッチするように正規表現を入力して倒していきます。 HTML5の流れでオーディオ、グラフィック、フォントHTML/JavaScriptで簡単に扱えるようになり、さらにenchant.jsのようなゲームエンジンも充実してきて、ゲームJavaScriptだけで気軽に作れるようになってきたようです。 そんなわけで試しに書いてみたのがRegex Of The Deadです。プログラミングは長いことやっているもののゲームを作ったのは大学のとき以来かもしれません。 最初、何か良さそうなゲームエンジンがないものかいくつか調査しましたが、こういったタイ

    JavaScriptで正規表現練習ゲーム作った - aike’s blog
  • Web Audio APIでギター音源作ったよ - aike’s blog

    Web Audio APIを使ってメタルなエレキギターのパワーコードの音を鳴らすウェブ楽器を作りました。ASCIIキーボードでリフを弾いてるだけでちょっと楽しいです。 http://aikelab.net/pg01/ Web Audioを使ったシンセはいくつか作られてきましたが、サンプラー系の格的な音源があまりないので試しに作ってみました。サンプラーといっても録音機能はないのでいわゆるRomplerです。 最近のモダンなサンプラーにはたいてい以下のような機能がついています。 ・ベロシティレイヤー ・ラウンドロビン ・リリーストリガ ベロシティレイヤーとは、鍵盤を叩く強さ(正確には速度)によって再生サンプルを切り替えるもので、大きい音ほど倍音が増えるような楽器の表現に欠かせません。 ラウンドロビンは、同じ音程の音を連続的に鳴らすときサンプラー特有の機械的な音にならないように、同じ音程のサン

    Web Audio APIでギター音源作ったよ - 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
  • 1