netswitch!: Category image processing

WebSDL - Ruby/SDL × WebSocket/Canvas

nanki — Wed, 23 Jun 2010 02:42:00 +0900

Ruby勉強会@関西44の懇親会にて @cyross, @KazkiMatz さんらとSDLをWebSocketと組み合わせて…という話をしていておもしろそうだったので実装してみた。

青は@nanki, 赤は@ujm

Ruby/SDLの画面描画を全て文字列としてシリアライズし、WebSocketで送信、Canvasに描画する。
ブラウザ上で発生したイベントをWebSocketで送信、SDLのイベントモデルの中に還元してやる。

というのが基本的な仕組み。

# samples/sample1.rb
require 'rubygems'
gem 'rubysdl'
require 'sdl'
require 'websdl'

class TestFrame < Frame
  attr_reader :mx, :my, :color

  def initialize
    @color = 0xff000000 | (1..3).inject(0){|r,i|r << 8 | rand(0xff)}
    @mx = -100
    @my = -100
  end

  def open_screen
    SDL::Screen.open(640, 480, 32, SDL::HWSURFACE || SDL::DOUBLEBUF)
  end

  def mainloop(screen)
    screen.fill_rect(0, 0, screen.w, screen.h, 0)

    while event = SDL::Event.poll
      @mx, @my = event.x, event.y if SDL::Event::MouseMotion === event
    end

    frames.each do |f|
      screen.fill_rect(f.mx - 15, f.my - 15, 30, 30, f.color)
    end

    screen.flip
  end
end


SDL = WebSDL if ARGV.first == 'web'

SDL.init(SDL::INIT_VIDEO)
SDL.run(TestFrame, :host => '0.0.0.0', :port => 3000)

上記のようなコードで、

$ rsdl -Ilib samples/sample1.rb

ではSDLのウィンドウが起動し、

$ ruby -Ilib samples/sample1.rb web

でWebSDL版が起動するようになっている。 WebSDL版はsamples/test.html をWebSocket, Canvasに対応したブラウザで開く。

ただCanvasを使うだけでは芸が無いので、マルチユーザに対応、ユーザ間の情報共有にも対応してみた。

言うまでもなくProof of Conceptの段階であり、SDLの機能もdraw_rect, MouseMotion くらいしか実装していない。

また、0.1秒毎に更新しているのがかっこわるいが、適切なイベントに基づいた処理をすれば、パズルゲームやアドベンチャーゲームなど頻繁に画面更新のないものなら実用的なものができる可能性がある。ウェブへぇボタンとかね。

問題点

一方、SDLのAPIは同期的なものもあり、SDL::Surface#get_pixel (画面上のピクセルの色を返す) などは現在の方法では実現が困難である。

参考:

死のイメージ

nanki — Thu, 25 Feb 2010 10:02:00 +0900

初めて人の死に接したのは、ひいおばあちゃんのお葬式で、4〜5歳くらいだった。
今でも覚えているが、別に悲しいことではなかった。
誰だかわかっていなかったし、親戚の家で行われた式だったが、その家にはお気に入りのおもちゃ群があって、僕が騒がないように親戚のお兄さんが遊んでくれた。

棺に花を詰め、霊柩車に載せて、火葬場まで行って、遺体が焼かれるのを見守った。
死んだ、というのはわかっていたが、生きている姿を見たことがなかったからか、眠っているような遺体をみんなで囲む会が催された、というだけだった。

それからしばらくして、バイオリンの練習をサボったかどで母親に怒られ、ふてくされて、布団にくるまりながら泣いている時に、初めて死を意識した。
といっても、母親に殺されそうになったとか、あまりのひどい仕打ちに自殺を考えたとかではなく、母親の言い放った、空からひいおばあちゃんが見てるぞ、というような意味の言葉について考えていた。

全くくだらない脅しを言ったものだと思うけど、カーテンの隙間から曇った夜空を覗いてみて、今日は曇ってるから大丈夫だな、と思ったのを覚えている。

曇った空と、閉まったカーテンで、脅しの効果はなかったが、その言葉から、死んだ後も意識が存続し続けるのだ、という概念を感じ取ったに違いない。

当時知り得た知識から、死とは、

眠るようなもので、
息をしてなくて、
しゃべれない、
燃やされる、
埋められる

というものだった。

意識の主体が、脳という物理的容器に束縛されていて(この認識の正しさは主張しないが)、燃やされたらなくなってしまうということすらわかってなかったので、眠りながら、息を止めて(ここまではやってみた)、燃やされて、埋められる、その間中ずっと喋れないのが何十年も(永遠に!)続くのを想像して怖くなり、全然泣き止まなくて、この時ばかりは厳しくしすぎたと思ったのか、その晩だけは母親は優しかった、と思うのは美化された記憶かもしれない。

今では、死はそういうものではない、とわかってはいるものの、あの時見た死のイメージは今でも残っていて、死に対しては悲しさよりも恐怖、時には憤りすら覚える。

gem install opencv

nanki — Sun, 15 Mar 2009 05:28:00 +0900

portなどでopencvを入れて、普通にやるとcxcore.h がないとか文句言われるので、

⿶ sudo gem install opencv -- --with-opencv-include=/opt/local/include/opencv

とやったらいけた。

参考:

opencvのrubyバインディングが入らない - 橋本詳解

Web用画像処理言語purlにGyazoモジュール追加

nanki — Thu, 30 Oct 2008 18:11:00 +0900

purl にGyazoモジュールを追加しました。

デフォルト環境にはロードされないので、自分でロードする必要があります。

Purl::Purl.new のあたり。

# app/controllers/purl_controller.rb
class PurlController < ApplicationController
  caches_page :filter

  def filter
    begin
      result = Purl::StackMachine.new(
        params[:commands], Purl::Purl.new{|p| p.load_feature Purl::Features::Gyazo}).run
      send_data(result[-2], :type => result[-1], :disposition => 'inline')
    rescue => e
      render :status => 500, :text => 'error'
    end
  end
end

コード例

/purl/(a7d96c2ff64900f507ef9c8dab99f983):gyazo:5:round:5:5:5:5:extend:5:dropshadow:to.png

参考:

決定版! Rails用画像添付プラグインpurl

決定版! Rails用画像添付プラグインpurl

nanki — Thu, 23 Oct 2008 10:15:00 +0900

Rails pluginとして動く言語、purlを公開しました。

purl はクライアントサイドから柔軟な画像処理を行うために開発されました。サムネイルの生成などを行うプラグインはいくつかありますが、そのどれよりも強力で汎用性、拡張性があります。

セットアップ

Rails2.1以上では、

$ script/plugin install git://github.com/nanki/purl.git

それ未満では、

$ git clone git://github.com/nanki/purl.git -- vendor/plugins/purl

gitが無い環境なら、githubのdownloadからファイルを落として、vendor/plugins/ に配置してください。

依存ライブラリ

必須: ImageMagick, rmagick
あった方がいい: cairo, rcairo

その他

purl のデフォルトの環境では、画像の保存にデータベースを利用します。 imagesテーブルに、blob型のdataカラムを追加してください。

# app/models/image.rb
class Image < ActiveRecord::Base
  attr_readonly :data
end

その上で、ImageController#upload などに以下のように記述します。

# app/controllers/image_controller.rb
class ImageController < ApplicationController
  def upload
    Image.create(:data => params[:data].read)
  end
end

さらに、config/routes.rbを書き替え、purl が実行されるようにします。書く場所は先頭に近い方がいいと思います。

# config/routes.rb
  map.connect 'purl/:commands',
    :controller => 'purl', :action => 'filter', :commands => /.*/

# app/controllers/purl_controller.rb
class PurlController < ApplicationController
  caches_page :filter

  def filter
    begin
      result = Purl::StackMachine.new(
        params[:commands], Purl::Purl.new).run
      send_data(result[-2], :type => result[-1], :disposition => 'inline')
    rescue => e
      render :status => 500, :text => 'error'
    end
  end
end

そんなこんなでセットアップは終わり。

言語

purl はURL上で記述されることを前提としています。常にワンライナーであれ！

文法

purl は逆ポーランド記法を採用しています。データと命令を書かれた順番にスタックマシンにプッシュしていき、命令が実行された結果がスタックマシン上につまれていきます。命令列は最初に:で区切られ、数字としてパースできるものは数字へ、()で囲われた部分は文字列へと変換されます。

ポリシー

デフォルトで用意される全ての命令は、外部の値に依存しません。つまり、命令列が決まれば実行結果は確定します。このポリシーにより、全ての実行結果がキャッシュ可能になります。

サンプルコード

画像をそのまま表示

次の例では、load はスタック上に既にある数字1を消費して、ID=1のImage#dataをデータベースからロードして、スタック上にプッシュします。 to.png では、スタック上の画像データをPNG形式のバイト列に変換し、mimetypeとともにスタック上に積みます。

/purl/1:load:to.png

画像の形式を変換

次の例では、画像をGIF形式に変換しています。

/purl/1:load:to.gif

画像のリサイズ

次の例では、画像を100x100にリサイズしています。リサイズ用の命令は、何種類か用意されており、高さを一定に保つ resize.heightや、上限を指定する、resize.upto などがあります。

/purl/1:load:100:100:resize:to.png

画像の合成

次の例ではふたつの画像を合成しています。

/purl/1:load:9:load:composite:to.png

次の例では順番を入れ替えています。

/purl/1:load:9:load:swap:composite:to.png

スタックに積んだ後すぐにpopすると、単純に無視されるので、コメントとして使えます。キャッシュのライフサイクルコントロールなどに使えると思います。

/purl/1:load:(daily):pop:to.png

図形の描画

詳しくは解説しませんが、試験的にcairoの描画機能をベースにした図形描画命令を用意しています。 ctx命令で、指定したサイズのcairoコンテキストを準備し、xtc命令で実際にサーフェースへの描画を実行します。

/purl/80:80:ctx:40:40:moveto:40:40:40:-20:20:arc.ccw:1:0.3:0:rgb:fill:60:20:4:circle:0:0:0:rgb:fill:xtc:to.png

制限

実行結果をファイルとしてキャッシュする場合、ファイルシステムによる字数制限を受けます。

拡張

拡張は命令モジュールの追加という形で行います。詳しくはソースコード見てください。

今後

無名関数的なもの。
外部から直接呼び出せない命令とか？
エラーメッセージとか？

参考:

ライフゲーム辞書 - Life Lexicon.dictionary

nanki — Sat, 12 Apr 2008 08:40:00 +0900

前回作成したライフゲーム辞書をちょこっと調整して、Quartz Compositionもより普通の書き方をするように直してみたので公開。 (前のは、一フレーム前を取るためにJavaScriptのMathオブジェクトにプロパティを作って…)

LifeLexicon.zip を展開してできたLife Lexicon.dictionary を ~/Library/Dictionaries 以下に移動。
Dictionary.appを再起動。

主な使い方は、宇宙(動いてる黒いの)を左クリックでリセット、AppleRemoteで停止、ステップ再生など。

download: LifeLexicon.zip(OS X 10.5用)

参考:

netswitch! | OSXのユーザ辞書の作り方

Purl 実行環境!

nanki — Sat, 23 Feb 2008 21:47:00 +0900

:区切りの逆ポーランド記法言語、purlのランタイムを公開。

http://purl.netswitch.jp/purl/1:load:3:shadow:medium:to.png
上の画像のURLがそのままソースコードになっています。

こちらから画像をアップロードすると、統合開発環境に飛びます。

こんなかんじ

→

といったことが、URLだけで実現可能。

プログラミング言語 purl を ruby で実装

nanki — Thu, 21 Feb 2008 01:40:00 +0900

言語処理系を実装するのは、初めて（だと思う）

PostScript などと同じ逆ポーランド風の言語で、画像処理用途。

以下purlのソース。

2:load:dup:2:shadow:swap:composite:geom:1:load:100:100:4:pull:4:pull:crop:swap:composite:to.png

:がリテラルの区切り、その他は数字と演算子。上のコードでは、2番の画像をロードして、ドロップシャドウしたものに1番の画像を背景として合成している。

ソースコード中に改行は入れられない。何故ならコードはURLの一部だから…

OSXのユーザ辞書の作り方

nanki — Mon, 26 Nov 2007 04:20:00 +0900

Leopardからは、小学館の辞書データとWikipediaが追加されて、とっても便利なDictionary.app.

たぶん、キーボード使用を前提とした小気味よいインターフェースがいいんだと思う。慣れてしまうと、もう生のWikipediaを使う気はなかなか起きない。

こうなると、なんでもかんでも、同じインターフェースで済ませたくなるもので、そんな時に、こんな検索しにくいページを見たら、「Dictionary.appで検索できて然るべき」と思ってしまうのが自然な流れ。

というわけで、ライフゲームの辞書、Life LexiconをDictionary.app用に変換します。

まずは、テンプレートをコピーしてくる。試しにmakeすると、あっさり辞書が作られる。 make installすれば、~/Library/Dictionaries 以下にコピーされ、Dictionary.appから検索できる状態になる。(Dictionary.appの環境設定で有効にしないとだめかも)

$ cp -r /Developer/Examples/Dictionary Development Kit/project_templates dict
$ cd dict
$ make
"""/Developer/Extras/Dictionary Development Kit"/bin"/build_dict.sh"  "My Dictionary" MyDictionary.xml MyDictionary.css MyInfo.plist
- Building My Dictionary.dictionary.
- Cleaning objects directory.
- Preparing dictionary template.
- Preprocessing dictionary sources.
- Extracting index data.
- Preparing dictionary bundle.
- Adding body data.
- Preparing index data.
- Building key_text index.
- Building reference index.
- Fixing dictionary property.
- Copying CSS.
- Copying other resources.
- Finished building ./objects/My Dictionary.dictionary.
echo "Done."
Done.

重要なのは、MyDictionary.xmlファイル。辞書の元となるデータをパースして、XMLファイルを作ってやる。

<?xml version="1.0" encoding="UTF-8"?>                                                                               
<d:dictionary xmlns="http://www.w3.org/1999/xhtml" xmlns:d="http://www.apple.com/DTDs/DictionaryService-1.0.rng">    
  <d:entry id="blinker puffer" d:title="blinker puffer">                                                             
    <d:index d:value="blinker puffer" d:title="blinker puffer" />                                                    
    <d:index d:value="puffer" d:title="blinker puffer" />                                                            
    <h1><span class="headword">blinker puffer</span></h1>                                                            
    <span class="meaning">Any <a href="x-dictionary:r:puffer">puffer</a> whose output is <a href="x-dictionary:r:blinker">blinker</a>s.  However, the term is particularly used for p8 c/2 puffers.  ....
    </span>
  </d:entry>
  <!-- 以下d:entry の山 -->
</d:dictionary>

意味はほとんど見た目通り。
それぞれの項目は、インデックスと内容のXHTMLで構成される。他の単語を参照する、href=”x-dictionary:r:ID”とかが特徴的か。上の例では「blinker puffer」という単語に対して、pufferでも検索に引っかかって欲しいので、indexに加えてある。

パースしてXMLを吐くコードは、汎用性がないのでここには載せないが、今回は以下のようなLifeを表す図を、rcairoでpng画像に変換もしている。

OO..
O..O
..OO

画像などのリソースは、dict/OtherResources 以下の適当な場所に置いておき、普通のHTMLのように、<img>タグを使って埋め込む。

<p><img src="Images/blinker%20puffer_0.png"/></p>

これで、

$ make
$ make install

すれば、ユーザ辞書の完成。

続き

さて、これだけで終わりではもったいないので、先日作ったQuartz Compositionを組み込めないか、頑張ってみる。

HTMLにQuartz Compositionを組み込むのは簡単で、EMBEDタグを使って、

<embed id="composition" type="application/x-quartzcomposer" src="LifeLexicon.qtz" width="300px" height="300px" />

とする。

これで、普通のムービーならスタートするのだけど、ライフゲームなので第0世代の画像を渡してやらないといけない。

Quartz ComposerのWebKitプラグインにはJavaScript APIが用意されていて、publishしたパラメータを設定できるようになっている。が、文字列しか設定できないようだ。画像はどうやって渡すのだろう。

調べてみると、Compositionの中で、Image Downloaderというパッチを使うらしい。 Image Downloaderは指定されたURLの画像をImageとして出力するパッチ。なるほど。 ImageDownloaderの入力を、imageLocationという名前でPublishして・・・

var composition = document.getElementById("composition");
composition.setInputValue("imageLocation", "fullpath.png");

こんな感じになるのかな。しかし、フルパス指定じゃないといけないのが面倒だなぁ・・・

先生、こちらにできあがったものが用意してあります。

結局、location.href と、EMBEDに勝手に付け加えたimage属性から、フルパスを取得する仕組みに。文中のSpaceはCompositionというか、Universeというか。

//LifeLexicon.js
(function () {
  var waitForSpaces = function (spaces) {
    if (spaces.length == 0) return;

    if (spaces[0].loaded && spaces[0].loaded()) {
      var space = spaces.shift();
      var base = location.href.substr(0, location.href.lastIndexOf("/"))
      space.setInputValue("imageLocation", base + space.getAttribute('image'));
    } 

    with ({callee: arguments.callee}) {
      setTimeout(function () {callee(spaces)}, 100);
    }
  };

  var arrayFromNodeList = function (nodelist) {
    var result = [];
    for (var i = 0; i < nodelist.length; i++) {
      result.push(nodelist.item(i));
    }
    return result;
  };

  waitForSpaces(arrayFromNodeList(document.getElementsByTagName('EMBED'))); 
})();

なぜか、<script src="LifeLexicon.js">だと読み込まれないので、

<script>
  var tag = document.createElement("SCRIPT");
  tag.src = "./LifeLexicon.js";
  document.getElementsByTagName("HEAD")[0].appendChild(tag);
</script>

というコードも、<d:entry>内に埋め込むように。

これで「生きた」LifeLexiconが完成。

CREDITをどこかに入れないと配布できないらしいので、欲しい人には直接送ります。いないだろうけど。

誰か、Ruby Reference Manualをこれで。

参考:

Quartz Composer - Conway's Game of Life - 宇宙大決戦

nanki — Sun, 18 Nov 2007 04:17:00 +0900

9月から半分Macユーザになったので、Macの開発環境も触ってみよう思い、まずは楽しそうなQuartz Composerに手を出してみた。

基本的には、Patchと呼ばれる部品をつなぎ合わせてプログラミングしていくものだが、ProgrammableなPatchも三種類(JavaScript, GLSL, Kernel Language?)用意されていて、後者二つは最近流行?のベクトル指向な言語。

以前から、GPUのシェーダ言語でライフゲームを書いて見たかったので、テーマはライフゲームに決定。 KOF2007の懇親会で、小波先生、池上さんとライフゲームの話題で盛り上がったのも理由。

メインとなるKernel Languageのコードは以下。画像のある一点の色を決めるコードを書けば、あとは勝手にベクトル化してくれているはず。
(たぶん、ベクトル化のために)普通のif文は使えないので、compare関数を使う。

kernel __color conway(sampler image)
{
    float self = sample(image, samplerCoord(image)).r;

    float lives;
    lives  = sample(image, samplerCoord(image) + vec2( 1, -1)).r;
    lives += sample(image, samplerCoord(image) + vec2( 0, -1)).r;
    lives += sample(image, samplerCoord(image) + vec2(-1, -1)).r;
    lives += sample(image, samplerCoord(image) + vec2( 1,  0)).r;
    lives += sample(image, samplerCoord(image) + vec2(-1,  0)).r;
    lives += sample(image, samplerCoord(image) + vec2( 1,  1)).r;
    lives += sample(image, samplerCoord(image) + vec2( 0,  1)).r;
    lives += sample(image, samplerCoord(image) + vec2(-1,  1)).r;

    const float dead  = 0.0;
    const float alive = 1.0;
    float compare4 = compare(lives - 3.5, alive, dead);

    float r = compare(
        self - 0.5,
        compare(lives - 2.5, dead, compare4),
        compare(lives - 1.5, dead, compare4)
    );

    return __color(r, r, r, 1);
}

それから、1step前の状態が必要なので、JavaScriptで以下のようなPatchも作成。フレームをまたがって値を保持するには、ObjectかMathのプロパティに値を入れておけばよい。

function (__image output) main (__image input, __image initial, __number dummy) {
  var result = {output: Object.prev || initial};
  Object.prev = input;
  return result;
}

後は適当にPatchを組み合わせていけば、完成。
Apple Remoteでコントロールしたり、スクリーンセーバにしたり、1フレームで3step進めたりしなければ、もうちょっと単純になる。

ライフゲームのルールについてはWikipediaを参照していただくとして、自分の周囲9マスから次の状態を決定する、という非常にローカルで単純なルールから、あまりに複雑で大域的な発展が繰り広げられる様は、宇宙や生命といった壮大なものを連想させる。

ライフゲーマー必見！ものすごい勢いで宇宙を浸食するmaxと、MITが開発したグライダーガンの、宇宙を賭けた闘い。

参考:

ライフゲーム - Wikipedia