chromaCodes

Readme
JavaScript 160 lines
HTML 24 lines
CSS 46 lines

jQueryとCSSの勉強用
UTF-8 3バイトで表すことのできる文字のバイト列 → HTMLの 24ビットRGB指定へ

chromaCodes
jQuery v1.6.2

// forked from etorov's "もじいろ" http://jsdo.it/etorov/s3LN
/**************************************************/
// ChromaCodes本体のクラス（ChromaCodesUtilsクラスも必要）
var ChromaCodes = function(html_settings){
    // プライベートメンバ
    var _r_i = 0, _g_i = 1, _b_i = 2;
    var _color_set_i = -1;
    var _color_set = [
	[0, 1, 2], //dark sky
        [0, 2, 1], //light sky
        [2, 0, 1], //dark forest
        [1, 0, 2], //light forest
        [2, 1, 0], //dark fruit
        [1, 2, 0] //light fruit
    ];
    var _color = _color_set[0];
    
    // 初期化
    if(html_settings === undefined){
	alert("Error while initialize: HTML options required");
    }else{
	this.Utils = new ChromaCodesUtils(html_settings);
	this.Settings = this.Utils.Settings;
    }
    
    // プライベートメンバをいじるパブリックメソッド
    this.setColorIndex = function(i){
	_color_set_i = i;
    };
    
    this.setColor = function(){
	if(_color_set_i < 0){ // ランダム
	    _color_indexes = this.Utils.shuffle([0, 1, 2]);
	}else{
	    _color_indexes = _color_set[_color_set_i].concat(); // clone()の代わり
	}
	
    	_r_i = _color_indexes.pop();
    	_g_i = _color_indexes.pop();
    	_b_i = _color_indexes.pop();
    };
    
    // アクセサ
    this.r_i = function(i){
	if(i == undefined){
	    return _r_i;
	}else{
	    _r_i = i;
	}
    };
    
    this.g_i = function(i){
	if(i == undefined){
	    return _g_i;
	}else{
	    _g_i = i;
	}
    };
    
    this.b_i = function(i){
	if(i == undefined){
	    return _b_i;
	}else{
	    _b_i = i;
	}
    };
};

// 文字のUTF-8コードを返す
ChromaCodes.prototype.getUTF8Code = function(ch){
    var charCode = ch.charCodeAt(0);
    var utf8code = [];
    
    if(charCode < 2048){
        utf8code[0] = charCode.toString(16);
        utf8code[1] = utf8code[0];
        utf8code[2] = utf8code[0];
    // UTF-8 2バイトは放置
    }else{
        utf8code[0] = (((charCode & 61440)>>12)+224).toString(16);
        utf8code[1] = (((charCode & 4032)>>6)+128).toString(16);
        utf8code[2] = ((charCode & 63)+128).toString(16);
    }
    // UTF-8 4バイト以上は無視
    
    return utf8code[this.r_i()]+utf8code[this.g_i()]+utf8code[this.b_i()];
};

// 一文字ずつ色を変えて描画
ChromaCodes.prototype.drawString = function(str){
    this.setColor();
    
    var str_length = str.length;
    for(var i=0; i<str_length; i++){
        $("<div>").attr({"style":"background-color:#"+this.getUTF8Code(str[i])}).text(str[i]).animate({width: "100%"}, 2500*((i+1)/str_length)).appendTo(this.Settings.world);
    }
};

/**************************************************/
// ユーティリティ用クラス
var ChromaCodesUtils = function(settings){
    this.Settings = settings;
    
    /* Fisher-Yates: http://hail2u.net/blog/coding/shuffle-array-in-javascript.html */
    this.shuffle = function (list) {
	var i = list.length;
	
	while (--i) {
	    var j = Math.floor(Math.random() * (i + 1));
	    if (i == j) continue;
	    
	    var k = list[i];
	    list[i] = list[j];
	    list[j] = k;
  	}
	
	return list;
    };
    
    this.clearCanvas = function(){
	$(this.Settings.world).html("");
	$(this.Settings.text_input).val("");
    };
    
    this.scrollBottom = function(){
	$('html, body').animate({ scrollTop: $(this.Settings.world).height() }, 'normal');
    };
};

/**************************************************/

var ChromaCodesSettings = {
    "world": "#world",
    "color_menu" : "#color_set",
    "text_input" : "#input_text"
};

$(document).ready(function(){
    var chroma = new ChromaCodes(ChromaCodesSettings);
    
    chroma.drawString("日本語で入力すると綺麗かも");
    
    // UI
    $(chroma.Settings.text_input).keyup(function(e){
	if(e.keyCode == 13){
	  chroma.drawString($(this).val());
	  $(this).val("");
	  chroma.Utils.scrollBottom();
	}
    });
    
    $(chroma.Settings.color_menu).change(function(e){
	chroma.setColorIndex(parseInt($(this).val(), 10));
    });
    
    $("#clear_button").click(function(e){
	chroma.Utils.clearCanvas();
    });
});

chromaCodes

jQueryとCSSの勉強用 UTF-8 3バイトで表すことのできる文字のバイト列 → HTMLの 24ビットRGB指定へ// forked from etorov's "もじいろ" http://jsdo.it/etorov/s3LN /**************************************************/ // ChromaCodes本体のクラス（ChromaCodesUtilsクラスも必要） var ChromaCodes = function(html_settings){ // プライベートメンバ var _r_i = 0, _g_i = 1, _b_i = 2; var _color_set_i = -1; var _color_set = [ [0, 1, 2], //dark sky [0, 2, 1], //light sky [2, 0, 1], //dark forest [1, 0, 2], //light forest [2, 1, 0], //dark fruit [1, 2, 0] //light fruit ]; var _color = _color_set[0]; // 初期化 if(html_settings === undefined){ alert("Error while initialize: HTML options required"); }else{ this.Utils = new ChromaCodesUtils(html_settings); this.Settings = this.Utils.Settings; } // プライベートメンバをいじるパブリックメソッド this.setColorIndex = function(i){ _color_set_i = i; }; this.setColor = function(){ if(_color_set_i < 0){ // ランダム _color_indexes = this.Utils.shuffle([0, 1, 2]); }else{ _color_indexes = _color_set[_color_set_i].concat(); // clone()の代わり } _r_i = _color_indexes.pop(); _g_i = _color_indexes.pop(); _b_i = _color_indexes.pop(); }; // アクセサ this.r_i = function(i){ if(i == undefined){ return _r_i; }else{ _r_i = i; } }; this.g_i = function(i){ if(i == undefined){ return _g_i; }else{ _g_i = i; } }; this.b_i = function(i){ if(i == undefined){ return _b_i; }else{ _b_i = i; } }; }; // 文字のUTF-8コードを返す ChromaCodes.prototype.getUTF8Code = function(ch){ var charCode = ch.charCodeAt(0); var utf8code = []; if(charCode < 2048){ utf8code[0] = charCode.toString(16); utf8code[1] = utf8code[0]; utf8code[2] = utf8code[0]; // UTF-8 2バイトは放置 }else{ utf8code[0] = (((charCode & 61440)>>12)+224).toString(16); utf8code[1] = (((charCode & 4032)>>6)+128).toString(16); utf8code[2] = ((charCode & 63)+128).toString(16); } // UTF-8 4バイト以上は無視 return utf8code[this.r_i()]+utf8code[this.g_i()]+utf8code[this.b_i()]; }; // 一文字ずつ色を変えて描画 ChromaCodes.prototype.drawString = function(str){ this.setColor(); var str_length = str.length; for(var i=0; i<str_length; i++){ $("<div>").attr({"style":"background-color:#"+this.getUTF8Code(str[i])}).text(str[i]).animate({width: "100%"}, 2500*((i+1)/str_length)).appendTo(this.Settings.world); } }; /**************************************************/ // ユーティリティ用クラス var ChromaCodesUtils = function(settings){ this.Settings = settings; /* Fisher-Yates: http://hail2u.net/blog/coding/shuffle-array-in-javascript.html */ this.shuffle = function (list) { var i = list.length; while (--i) { var j = Math.floor(Math.random() * (i + 1)); if (i == j) continue; var k = list[i]; list[i] = list[j]; list[j] = k; } return list; }; this.clearCanvas = function(){ $(this.Settings.world).html(""); $(this.Settings.text_input).val(""); }; this.scrollBottom = function(){ $('html, body').animate({ scrollTop: $(this.Settings.world).height() }, 'normal'); }; }; /**************************************************/ var ChromaCodesSettings = { "world": "#world", "color_menu" : "#color_set", "text_input" : "#input_text" }; $(document).ready(function(){ var chroma = new ChromaCodes(ChromaCodesSettings); chroma.drawString("日本語で入力すると綺麗かも"); // UI $(chroma.Settings.text_input).keyup(function(e){ if(e.keyCode == 13){ chroma.drawString($(this).val()); $(this).val(""); chroma.Utils.scrollBottom(); } }); $(chroma.Settings.color_menu).change(function(e){ chroma.setColorIndex(parseInt($(this).val(), 10)); }); $("#clear_button").click(function(e){ chroma.Utils.clearCanvas(); }); }); <link href='http://fonts.googleapis.com/css?family=Marck+Script' rel='stylesheet' type='text/css'> <div> <div id="world"></div> <div id="canvas_bg">chromaCodes</div> <div id="input_area"> <input type="text" id="input_text" /> Color set: <select id ="color_set"> <option value="-1">Random</option> <option value="0">Sky1</option> <option value="1">Sky2</option> <option value="2">Forest1</option> <option value="3">Forest2</option> <option value="4">Fruit1</option> <option value="5">Fruit2</option> </select> <input type="button" id="clear_button" value="clear" /> </div> </div> body { background-color: #ffffff; font-size: small; margin: 10px; } #input_area{ height: 20px; position: fixed; left: 35px; bottom: 5px; } #input_text{ width: 200px; } #world{ margin-bottom: 25px; } #world > div{ color: #ffffff; padding-left: 6px; } #world > div:first-child{ border-radius: 0px 10px 0px 0px; /*左上から時計回り*/ } #world > div:last-child{ border-radius: 0px 0px 0px 10px; } #canvas_bg{ text-align: center; font-family: 'Marck Script', cursive; font-size: 40px; font-weight: bold; width:100%; position:fixed; top:40%; z-index:-1; }