画面内に自由につぶやける

2010年3月16日 13:56

twitter+αというイメージで作成した、PHP+JavaScriptの作品紹介です。画面内のどこにでも、色を指定して短文をつぶやくことができます。大きさは時系列順になっており、古くなるほど小さく、薄く変化します。パスワードは「１２３４」となってますので、お試しください。

→murmur

TrackBacks（0）

JavaScriptによる色空間

ペイントでパレットにない色を作成するとき開く画面がありますよね。カラフルなあれです。カラーピッカーって言うらしいですが...、あれをJavaScriptを使って再現しようと思います。使う知識はHSVとRGBについての知識で、RGBは文字通りRed、Blue、Greenですが、HSVとは何でしょう？僕も初めて知ったのですが、Hue、Saturation、Valueの頭文字で、それぞれ色相、彩度、明度のことらしいです。ペイントで使っているのはHSVとはちょっとばかし違うようですが、まぁ細かいことは気にせずやっていきたいと思います。さてさて問題なのはペイントではHSVで色を表していますが、HTMLではRGB（１６進数で例えば#FF0000は赤）でしか表せない点ですね。よってHSVからRGBへと変換しなければなりません。そこでまずはHSVについてお勉強しましょう。

図1 錯体のHSV色空間
（Wikipedia: HSV色空間より抜粋）

HSVはそれぞれ以下のように定義します。

H: 0～360
S: 0.0～1.0
V: 0.0～1.0

Hについては図を見ての通りぐるっと一周３６０度です。その他は0～１の範囲にあるパラメータとします。さて、しかしながらこのHが曲者でして...、Hは色相ですのでペイントでやってみると、たとえば左上の点から上に沿って右に進ませていくっていう操作に当たります。このときRGBをじっくり観察してみると、

R　⇒　Y　⇒　G　⇒　C　⇒　B　⇒　M

（Y：Yellow、C：Cyan、M：Magenta）と移り変わります。要は、まずRを255に保ったままGが0から255へ変化、後Gを255に保ったままRが255から0へ変化...（以下略）と動きます。プログラムし辛い...、ヤダヤダ。と思っているところにWikipedia様が登場です。

$H_i = \lfloor { H \over 60 } \rfloor mod 6$

$f = { H \over 60 } - H_i$

$p = V ( 1 - S ) \,$

$q = V ( 1 - f S ) \,$

$t = V ( 1 - ( 1 - f ) S ) \,$

$\mbox{if } H_i = 0 \rightarrow R = V, G = t, B = p \,$

$\mbox{if } H_i = 1 \rightarrow R = q, G = V, B = p \,$

$\mbox{if } H_i = 2 \rightarrow R = p, G = V, B = t \,$

$\mbox{if } H_i = 3 \rightarrow R = p, G = q, B = V \,$

$\mbox{if } H_i = 4 \rightarrow R = t, G = p, B = V \,$

$\mbox{if } H_i = 5 \rightarrow R = V, G = p, B = q \,$

（Wikipedia: HSV色空間より抜粋）

なんと！こんな便利な変換式があるんですね。この計算のミソは、はじめにHiを60で割ってあげるところにあります。すると0～6（0/60～360/60）になるのですが、この値をガウス記号（床関数、floor）で切り捨ててあげちゃうんです。つまり、0、1、2、3、4、5のどれかにしちゃうというわけですが...、すると、この数字がそれぞれRYGCBMのどれかに当たることになります！なるほど、これで場合分けをすればいいのか...。ちなみにmod6（６で割ったときの余り）を求めているのは、色相が0～360ではない角度（１０００度とか）になった場合を考慮してのものです。さてさて、この数字による場合分けを行ってしまえばめでたくHMKをRGBに変換することができるので、以下にソースを示します。

// HSVtoRGB変換
function HSVtoRGB(H, S, V) {
    var ret = [0, 0, 0];

    // 引数チェック
    if(S < 0 || S > 1 || V < 0 || V > 1) return ret;
    var Hi = Math.floor(H/60) % 6;
    var f  = (H/60) - Hi;

    // RGB
    V = V * 255;
    var p = Math.round(V * (1 - S));
    var q = Math.round(V * (1 - f*S));
    var t = Math.round(V * (1 - (1 - f)*S));

    V = Math.round(V);

    // 色相による場合わけ
    switch(Hi) {
        case 0: ret = [V, t, p]; break;
        case 1: ret = [q, V, p]; break;
        case 2: ret = [p, V, t]; break;
        case 3: ret = [p, q, V]; break;
        case 4: ret = [t, p, V]; break;
        case 5: ret = [V, p, q]; break;
    }
    return ret;
}

こんな感じで配列でRGBを返します。どうせならペイントみたいなインターフェースを作ってしまいましょう。これを頭に#をつけた１６進数コードであらわされたRGBの文字列に変換する関数を付け加えます。

function RGBto16(RGB) {
     var R = (RGB[0] < 16) ? "0" + RGB[0].toString(16): RGB[0].toString(16);
    var G = (RGB[1] < 16) ? "0" + RGB[1].toString(16): RGB[1].toString(16);
    var B = (RGB[2] < 16) ? "0" + RGB[2].toString(16): RGB[2].toString(16);
    return ("#" + R + G + B);
}

function getClr(H, S, V) {
    return RGBto16(HSVtoRGB(H,S,V));
}

ここでtoString()を使いましたが、これは与えた引数を基数とした数字を返してくれます。16なので16進数のコードが返ってくるわけです。んー、便利。また、3項演算子を用いて、もし、15=fのように16進数に直した時1文字になってしまうとき、頭に0をつけて2文字にするようにします。この関数とHSVtoRGB()をまとめてやってくれるgetClr()を定義しました。この関数を使って色を設定します。表示部は以下のようになります。

これを書くと下のようになります。

ちなみに、上の例ではペイントに合わせるため、getClrの第3引数を(2+j)/3としました。もし、ここが1だった場合は下はグレーではなく真白になります。
さて、それではペイントライクなカラーピッカーの完成版のソースコードとサンプルを示します。

// パラメータ
di = 6;        // 横の刻み（0～360）
dj = 0.04;    // 縦の刻み（0～1）

// HSVtoRGB変換
function HSVtoRGB(H, S, V) {
    var ret = [0, 0, 0];

    // 引数チェック
    if(S < 0 || S > 1 || V < 0 || V > 1) return ret;
    var Hi = Math.floor(H/60) % 6;
    var f  = (H/60) - Hi;

    // RGB
    V = V * 255;
    var p = Math.round(V * (1 - S));
    var q = Math.round(V * (1 - f*S));
    var t = Math.round(V * (1 - (1 - f)*S));

    V = Math.round(V);

    // 色相による場合わけ
    switch(Hi) {
        case 0: ret = [V, t, p]; break;
        case 1: ret = [q, V, p]; break;
        case 2: ret = [p, V, t]; break;
        case 3: ret = [p, q, V]; break;
        case 4: ret = [t, p, V]; break;
        case 5: ret = [V, p, q]; break;
    }
    return ret;
}

// 16進数変換
function RGBto16(RGB) {
    var R = (RGB[0] < 16) ? "0" + RGB[0].toString(16): RGB[0].toString(16);
    var G = (RGB[1] < 16) ? "0" + RGB[1].toString(16): RGB[1].toString(16);
    var B = (RGB[2] < 16) ? "0" + RGB[2].toString(16): RGB[2].toString(16);
    return ("#" + R + G + B);
}

// まとめ
function getClr(H, S, V) {
    return RGBto16(HSVtoRGB(H,S,V));
}

// カラーコード取得用グローバル変数
_H = 0;
_S = 0;
// VBar変更
function changeVBar(H, S) {
    _H = H; _S = S;
    id=0;
    for(j=1; j>=0; j-=dj) {
        document.getElementById("b_"+ id).bgColor = getClr(H,S,j);
        id++;
    }
}

// カラーコード取得
function setClr(V) {
    with(document.getElementById("gtnClr")) {
        bgColor = getClr(_H, _S, V);
        style.color = getClr(_H, 0, 1 - V);
        innerHTML = getClr(_H, _S, V);
    }
}



    
<table class="color_table" border="0" cellpadding="0" cellspacing="0">
<script type="text/javascript">
for(j=1; j>=0; j-=dj) {
    document.write("<tr>");
    for(i=0; i<360; i+=di) { 
        document.write('<td onclick="changeVBar(' + i + ',' + j + ')" bgcolor="' + getClr(i,j,1) + '"> </td>');
    }
    document.write("</tr>");
}
</script>
</table>
    
<table class="color_table VBar" border="0" cellpadding="0" cellspacing="0">
<script type="text/javascript">
id = 0;
for(j=1; j>=0; j-=dj) {
    document.write('<tr>');
    document.write('<td id="b_' + id + '" onclick="setClr(' + j + ')" bgcolor="' + getClr(0,1,j) + '"> </td>');
    document.write("</tr>");
    id++;
}
</script>
</table>
    
    color

sample:

color

①でかい領域のどこかをクリック
②縦長の領域のどこかをクリック

って感じです。個人的には満足です。
しかしながら世の中は広いようで...、ライブラリを使ったりしてちょーすごいカラーピッカーもあります。

球体版（Color Sphere）:
http://www.colorjack.com/software/dhtml+color+sphere.html

Saiみたいなやつ（JQuery color picker）:
http://acko.net/dev/farbtastic

他にもYahoo!UIとかにもありましたし、フォトショライクなものもありました。ムムム、勉強しないと最先端にはなかなか追いつけませんね。

TrackBacks（0）

javascriptによる人間工学シミュレーション

2008年11月10日 01:11

なぞと大層なタイトルをつけてみましたが、やったことはコレです。

prototype.jsによってjavascriptでクラスを実現し、道を歩く人の簡単なAIを作成しました。prototype.jsを用いてクラスを作成するには、

var Human = Class.create();

このように記述します。クラスの定義については、

Human.prototype = {
initialize: function(obj,x,y,vx,vy) {
～
},
move: function() {
～
}
};

こんな感じです。initializeがコンストラクタで、この中にフィールドを入れます。メソッドはprototypeの中に放り込んでやればおｋです。他にも記述の仕方はありますが、僕の場合は面倒くさいんでこれで統一しています。ちなみにプログラム自体は、場合分け処理が適当なので見ての通りうまく避けてくれませんｗ。誰かうまい処理考えてくれないかなー...。以下全ソースです。

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<html lang="ja">
<head>
<meta http-equiv="Content-Type" content="text/html;">
<meta http-equiv="content-script-type" content="text/JavaScript">
<title>人間工学シミュレーション</title>
<meta http-equiv="Content-Type" content="text/html; charset=Shift-JIS">
<style type="text/css"></style>
<script type="text/javascript" src="pt.js"></script>
<script type="text/javascript">
// ---------- 初期設定 ----------
// ウインドウサイズと道幅
var WinSizeW = 360, WinSizeH = 360;
var StreetW = WinSizeH/2;
var StreetL = (WinSizeW - StreetW)/2;
var StreetR = StreetL + StreetW;

// 描画間隔(ms)
var t = 10;

// 速度幅
var vy = 5;
var vx = 0;

// 人
var num = 8; // 人数
var size = 8;
var human = Array(num);
var human2 = Array(num);

// ---------- 初期化 ----------
// 初期化関数
function init() {
createStreet(); // 道の描画
for(i=0; i<num; i++) {
var left = StreetL + Math.floor(StreetW * Math.random());
var vx0 = Math.floor(vx * Math.random());
var vy0 = Math.floor(1 + vy * Math.random());
human[i] = new Human($('human_p' + i), left, 0, vx0, vy0);
human[i].move();

left = StreetL + Math.floor(StreetW * Math.random());
vx0 = Math.floor(vx * Math.random());
vy0 = Math.floor(1 + vy * Math.random());
human2[i] = new Human($('human_m' + i), left, WinSizeH, vx0, -vy0);
human2[i].move();
}

// タイマーの実行
Timer();
}

// 道の生成
function createStreet() {
var vertical = $('vertical');
Element.setStyle(vertical,
{
'left' : StreetL+ "px",
'top' : 0 + "px",
'width' : StreetW + "px",
'height': WinSizeH + "px"
});
}

// humanクラス
var Human = Class.create();

// クラスの中身
Human.prototype = {
initialize: function(obj,x,y,vx,vy) { // コンストラクタ（ここでメンバ変数も指定）
this.obj = obj;
this.x = x;
this.y = y;
this.vx = vx;
this.vy = vy;
Element.setStyle(this.obj, // 実際の移動 / 体裁整え
{
   'left': x + "px",
   'top' : y + "px",
   'font-size': size + "px",
   'line-height': size + "px"
});
},
move: function() { // 移動の記述
if(this.y > WinSizeH || this.y < 0) { // 下から出たら
   var left = StreetL + Math.floor(StreetW * Math.random()); // 開始位置指定
   var tb = this.vy / Math.abs(this.vy); // 進んでた向き
   var vx0 = Math.floor(vx * Math.random()); // 初速度
   var vy0 = tb * Math.floor(1 + vy * Math.random()); // 初速度
   if(tb>0) this.y = 0; // 上に戻す
   else this.y = WinSizeH; // 下に戻す
   this.x = left; // 初期位置に持っていく
   this.vx = vx0; // 初速度指定
   this.vy = vy0; // 初速度指定
}
if(this.x < StreetL) { // 道の外に出たら
   this.vx = -this.vx; // 速度逆
   this.x += size;
} else if(this.x > StreetR) {
   this.vx = -this.vx;
   this.x -= size;
}
this.x += this.vx; // 進む
this.y += this.vy; // 進む
this.vx = 0; // 速度初期化
Element.setStyle(this.obj, // 実際の移動
{
   'left': this.x + "px",
   'top' : this.y + "px"
});
},
// --------- ここが衝突判定 ---------
// this: 自分　　　obj: 相手
conflict: function( obj ) {
// --------- ここから判断の記述 ---------
var tb = this.vy / Math.abs(this.vy);
var lx = (obj.x - this.x); // x方向距離
var ly = tb*(obj.y - this.y); // y方向距離
var lf = tb*((obj.y + 10*obj.vy) - (this.y + 10*this.vy)); // 10時間後の距離

if(
   ly > 0 &&   // 後ろにいて
   Math.abs(lx) < 3*size && // かつ3人分の幅の中に入っていて
   lf < 0    // 10時間後抜かしてるとき時
) {
   var lr = this.x - obj.x; // 右か左かの符号用
   if(!lr) lr = 0.5 - Math.random() // 真ん中だったらどっちか
   lr = lr / Math.abs(lr);   // 1か-1にする
   var to = obj.x + lr*3*size; // 抜かす際の移動幅
   this.vx += Math.floor((to - this.x)/3 + 0.5); // 3時間後に抜かす速度
}
// ------------- ここまで -------------
}
};

// 画面更新関数
function winDraw() {
for(i=0; i<num; i++) {
for(j=0; j<num; j++) {
   if(i!=j) human[i].conflict(human[j]);
   if(i!=j) human[i].conflict(human2[j]);
   if(i!=j) human2[i].conflict(human[j]);
   if(i!=j) human2[i].conflict(human2[j]);
}
}
for(i=0; i<num; i++) {
human[i].move();
human2[i].move();
}
}

// タイマー
function Timer() {
winDraw();
setTimeout("Timer()", t);
}
--></script>
</head>
<body>
<div id="area">
<div id="vertical" class="street"></div>
<script type="text/javascript">
for(i=0; i<num; i++) {
document.write('<div id="human_p' + i + '" class="human">●</div>');
document.write('<div id="human_m' + i + '" class="human human2">●</div>');
}
</script>
</div>
</body>
<script type="text/javascript">init();</script>
</html>

TrackBacks（0）

<table class="color_table" border="0" cellpadding="0" cellspacing="0"> <script type="text/javascript"> for(j=1; j>=0; j-=dj) { document.write("<tr>"); for(i=0; i<360; i+=di) { document.write('<td onclick="changeVBar(' + i + ',' + j + ')" bgcolor="' + getClr(i,j,1) + '"> </td>'); } document.write("</tr>"); } </script> </table>	<table class="color_table VBar" border="0" cellpadding="0" cellspacing="0"> <script type="text/javascript"> id = 0; for(j=1; j>=0; j-=dj) { document.write('<tr>'); document.write('<td id="b_' + id + '" onclick="setClr(' + j + ')" bgcolor="' + getClr(0,1,j) + '"> </td>'); document.write("</tr>"); id++; } </script> </table>
color

画面内に自由につぶやける

2010年3月16日 13:56

JavaScriptによる色空間

2008年11月30日 01:17

javascriptによる人間工学シミュレーション

2008年11月10日 01:11