colors.jsを使ったデモを追加(HSVそれぞれでセルをグラデーションするテーブル)

http://sorrex.googlecode.com/svn/colors.js.demo2.html

何か有意義な使い方ができそうだと思ったのでとりあえず書いてみた
テーブルのセルが500msごとに一行ずつ書き換わります
一行はHかSかVのグラデーションで、それぞれランダムに範囲(1/24)の中から一つ選んでます


テーブルを作って

	$("#test").append('<div align="center"><table id="fc"></table></div>');
	var t = $("#fc");
	for(var i = 0; i < rows; i++){
		var str = "<tr>";
		for(var j = 0; j < cols; j++){
			str = str + '<td id="' + i + "_" + j + '"></td>';
		}
		str = str + "</tr>";
		$(t).append(str);
	}
	$("td").hover(function(){
		$("#selectColor").empty().append($(this).text());
	},function(){
		$("#selectColor").empty().append("not selected.");
	});


これが、

var director = (function(){
	var actions = [];
	var gens = [];
return {
	addGenerator: function(f){
		gens.push(f);
	},
	Do: function(){
		if(0 == gens.length) return;
		if(0 == actions.length){
			actions = gens[rand(gens.length)]();
		}
		//do
		var action = actions.shift();
		for(var i = 0, i_n = action.length; i < i_n; i++){
			var a = action[i];
			var t = $("#" + a.y + "_" + a.x );
			$(t).css("background-color", "#" + a.color);
			$(t).empty();
			$(t).append('<span class="name">' + a.names + '</span>');
		}
	}
};
})();
director.addGenerator(byV);


一定間隔で

setInterval(director.Do, 300);


こんなのを呼び出して、

function byV(){
	$("#generatorName").empty();
	$("#generatorName").append("byValue");
	var actions = [];
	for(var i = 0; i < rows; i ++){
		var action = [];
		for(var j = 0; j < cols; j ++){
			var hsv = HSV_v[rand(range) + range * j];
			var str = "";
			for(var name in hsv[1].names){
				str += " " + hsv[1].names[name];
			}
			action.push({
				x: j,
				y: i,
				color: hsv[0],
				names: str
			});
		}
		actions.push(action);
	}
	return actions;
}


返ってきたアクションを順にDoする(背景色を変える)


追記
あまりにも重かったので改善しました
firefox3 250ms ->30ms
chrome 100ms -> 10ms
ぐらいになった

		for(var i = 0, i_n = action.length; i < i_n; i++){
			var a = action[i];
			var t = $("#" + a.y + "_" + a.x );
			$(t).css("background-color", "#" + a.color);
			$(t).empty();
			$(t).append('<span class="name">' + a.names + '</span>');
		}




		for(var i = 0, i_n = action.length; i < i_n; i++){
			var a = action[i];
			var t = document.getElementById(a.y + "_" + a.x);
			t.style.backgroundColor = "#" + a.color;
			t.innerHTML = '<span class="name">' + a.names + '</span>';
		}