Plumo: pure Ruby + WEBrick + Comet + Canvas で手軽にお絵描き

f:id:sonota88:20190430115342p:plain

自分が使うのに必要なものを最低限雑に実装してパッと出した、という感じのものです。API 固まってないです。

sonota88/plumo
https://github.com/sonota88/plumo

コンセプト的なもの

  • (動きのある)2Dグラフィックを手軽にやりたくなる時がある
    • 何か思いついたときにサッとやりたいので、pure ruby
      • インストールとかでトラブらないように(なるべく yak shaving したくない)
  • トラブルなくサッと使えるというのが最優先で、パフォーマンス、機能はそこそこで良い
    • ちゃんとやりたくなったら他のちゃんとしたものを使いましょう。 こいつはてきとーです。
  • ちょっとしたプログラムにちょっとしたグラフィック機能を付けたいことがある
    • そういう場合に手軽に組み込んで使いたい

使い方

gem install plumo
# sample.rb

require 'plumo'

# 幅、高さ(ピクセル)を指定して new
plumo = Plumo.new(200, 200)

# サーバ起動
plumo.start

# 描画色を指定
plumo.color "#0f0"

loop do
  # 始点と終点を指定して線を引く
  plumo.line 0, 0, rand * 200, rand * 200

  sleep 1
end
# 実行
ruby sample.rb

# ブラウザで http://localhost:9080/ を開く
# Ctrl-C で終了

何か挙動がおかしいとかあったらブラウザをリロードしたり、 プログラムを止めて実行し直したりしてください(適当)。

Canvas の命令を直接実行する

Plumo#draw を使うと直接 Canvas の命令を実行できます。

plumo.draw(
  [:strokeStyle, "#f00"],
  [:fillStyle, "#ff0"],
  [:fillRect, x, y, w, h]
)

これを使えば何でもできる。命令と引数はそのまま渡すだけなので詳しくは Canvas のリファレンスを参照(丸投げ)。

上のサンプルの Plumo#line とかはこれのラッパーです。

しくみ

Plumo を使ったプログラム
 |
Plumo の API
 |
Thread::SizedQueue
 |
WEBrick::HttpServer
 |
 | Comet
 |
Web browser

サンプル

リポジトリの examples/ 以下にいくつかサンプルを入れています。 git clone して次のように実行してみてください:

ruby examples/game_of_life.rb

今のところ(v0.0.4 では)他の gem に依存していないので、この方法で試すだけなら gem install や bundle install は不要です。

あと、一番上に貼ってある画像は examples/random.rb で描いたものです。