Ruby製クレヨンでお絵描きしようよ!

ブログを下記に移転しました。デザイン変更により移転先では記事が一層読みやすくなっていますので、よろしければ移動をお願い致します。

Ruby製クレヨンでお絵描きしようよ! : melborne.github.com

                                                                                                            • -

Crayolas


米国にCrayolaというクレヨンの老舗メーカーがあります*1
創業以来その色数を増やしていって
現在ではその標準カラーは133色もあるそうです
さらに12以上のスペシャルセットがあって
それらを合わせると色数は300を超えます


ウィキペディアCrayola社クレヨンのページがあって
そこにほぼ全色のカラーコードが掲載されていることを
情報サイト*2を通して知りました


List of Crayola crayon colors - Wikipedia


ファンタスティック!
Color Loverとしてはこれを無視できません


そんなわけで..


Rubyの勉強を兼ねましてこれらのカラーコードを取得する
crayolaというライブラリをRubyで書きました (‥;)
混色など一部は対象外ですが9セット275色に対応しています

crayolaの使い方

以下のように使います

>> Crayola::Crayola.color_names
=> ["Almond", "Antique Brass", "Apricot", "Aquamarine", "Asparagus", "Atomic Tangerine", "Banana Mania", "Beaver", "Bittersweet", "Black", "Blizzard Blue", "Blue", "Blue Bell", "Blue Gray", "Blue Green", "Blue Violet", "Blush", "Brick Red", "Brown", "Burnt Orange", "Burnt Sienna", "Cadet Blue", "Canary", "Caribbean Green", "Carnation Pink" ... "Eerie Black", "Black Shadows", "Fiery Rose", "Sizzling Sunset", "Heat Wave", "Lemon Glacier", "Spring Frost", "Absolute Zero", "Winter Sky", "Frostbite"]
>> wild_strawberry = Crayola::Crayola.color('Wild Strawberry')
=> #<struct Crayola::Color series="Standard Colors", name="Wild Strawberry", hex="#FF43A4", rgb=[255, 67, 164], issue=1990, retired=nil, notes=nil>
>> wild_strawberry.members #=> [:series, :name, :hex, :rgb, :issue, :retired, :notes]
>> wild_strawberry.series #=> "Standard Colors"
>> wild_strawberry.name #=> "Wild Strawberry"
>> wild_strawberry.hex #=> "#FF43A4"
>> wild_strawberry.rgb #=> [255, 67, 164]
>> wild_strawberry.issue #=> 1990
>> 
>> Crayola::Crayola.series
=> ["Standard Colors", "Silver Swirls", "Magic Scent", "Gem Tones", "Pearl Brite", "Metallic FX", "Silly Scents", "Heads 'n Tails", "Extreme Twistables Colors"]
>> 
>> Crayola::Crayola.colors_in_series("Gem Tones").map(&:name)
=> ["Amethyst", "Citrine", "Emerald", "Jade", "Jasper", "Lapis Lazuli", "Malachite", "Moonstone", "Onyx", "Peridot", "Pink Pearl", "Rose Quartz", "Ruby", "Sapphire", "Smokey Topaz", "Tiger's Eye"]
>> Crayola::Crayola.color("Ruby").hex #=> "#DC0646"
>> 


EggplantとかJazzberry JamとかPiggy Pinkとか
Quick SilverとかTulipとかBig Foot Feetとか
Princess PerfumeとかOrange SodaとかDeep Space Sparkleとか
一体どんな色が出てくるのかワクワクしますね


これらたくさんの色を使って
お絵描きができたらさぞ楽しいでしょうね..


そんなわけで..


crayolaカラーを使ったお絵描きデモを作ってみました
どっちかって言うとHTML5のデモのような気もしますが..


http://crayovas.heroku.com/



右上の絵はもちろんルビーです
説明するまでもありません

crayovasの使い方

  1. キャンバス上でマウスを一度クリックし、クリックを離した状態でマウスを移動して線を描きます
  2. 終了点で再度クリックして描画を終えます
  3. よくあるマウスドラッグ中に描画する方式ではないので、最初は戸惑うかも知れません
  4. キャンバス下のカラーパレットで任意の色をクリックして色を選びます
  5. 初期状態でStandard Colorsのカラーパレットが表示されています。他のシリーズを表示するにはそのシリーズ名をクリックします
  6. 線の太さは右上の太さを示す数字をクリックして選択します
  7. 消しゴムは右上のERASEをクリックして、ペンと同じように開始点でクリック、終了点でクリックして使います。RESETですべての絵を消します
  8. 直近に使用したカラーは上に表示されます。表示をクリックしても色を選択できます


遊んでくれたらうれしいです


ソースコードは以下にあります


GitHub - melborne/crayola: Crayola Color set library
GitHub - melborne/crayovas: HTML5 Canvas Demo with crayola library


(追記:2011-2-10) crayovasのupdateに合せて記述を変更しました。