2012.03.02 yossy a.k.a. 会長
はいどうも～。
雪の日は電車遅延でテンションが下がりがちなエンジニアの吉田です。
あたくし、通勤時間が通常だとだいたい1時間45分なのですが、
電車遅延があると、だいたい2時間を越える程度の通勤時間となり、
会社に到着した時点で、既にぐったりしていたり、していなかったり。
そんな中、家から最寄駅に着いて最初にげんなりするキッカケとなる
のが、駅にある電光掲示板で誇らしげにチラついていらっしゃる
「【横須賀線 遅延】」というオレンジ色の掲示だったりします。
特に、家から駅までダッシュしたあとにお目にかかれたときなんかは、
凄まじい威力を発揮して頂けますね。洗練された脱力感を体験できる。
今回は、この電光掲示板を見た時にテンションが下がる気分を是非
共有したいと思い、HTML5のCanvasを使って表現してみます。
表現してみた結果、こんな感じのものが出来上がりました。
<div id="wrapper1" class="wrapper"> <canvas id='board1' class="board" width="512" height="64"></canvas> </div>
div#wrapper1 {
height: 64px;
width: 578px;
overflow: hidden;
position:relative;
background-color: #000;
}
canvas#board1 {
border: solid 0px #333;
background-color: #000;
position: absolute;
left: 0px;
}
function drawText(){
// canvas要素を取得
var canvas = $('canvas#board1');
var context = canvas.get(0).getContext('2d');
// 一旦canvasをクリア
context.clearRect(0, 0, canvas.width(), canvas.height());
// 灰色の明朝体で「【横須賀線 遅延】」を描く
context.fillStyle = "gray";
context.font = "64px 'ＭＳ 明朝'";
context.textAlign = "left";
context.textBaseline = "top";
context.fillText( "【横須賀線 遅延】", 0, 0);
}
var BLOCK_SIZE = 3;
/**
* ピクセレート処理
*/
function _toMosaic(canvas, context){
var _width = canvas.width();
var _height = canvas.height();
(function(){
var i=0, j=0;
var x=0, y=0, w=0, h=0;
var tiles_w = _width / BLOCK_SIZE;
var tiles_h = _height / BLOCK_SIZE;
var block_image;
for(i=0; i<tiles_w; i++){
for(j=0; j<tiles_h; j++){
w = BLOCK_SIZE;
h = BLOCK_SIZE;
x = (i * w);
y = (j * h);
block_image = context.getImageData(x, y, w, h);
rgb = _getAvgRgb(block_image);
context.fillStyle = 'rgb('+rgb[0]+','+rgb[1]+','+rgb[2]+')';
context.fillRect(x, y, w, h);
}
}
})();
}
/**
* 特定の範囲のRGB平均値を求める
*/
function _getAvgRgb(block_image){
var pixels = block_image.data;
var r=0,g=0,b=0;
var rgb;
// LEDの明るさをブロック内の全ピクセルの平均で算出する
// 各ピクセルは、Red/Green/Blue/Alpha の4個の配列になっている
var len = pixels.length/4;
for(var i=0; i<len; i++){
r += pixels[i*4];
g += pixels[i*4+1];
b += pixels[i*4+2];
}
r = parseInt(r/len,10);
g = parseInt(g/len,10);
b = parseInt(b/len,10);
return [r,g,b];
}
/**
* 明るさをちょっと調整する
*/
function _adjustBlightness(r,g,b){
// 平均値だけだと全体的にぼやけた感じに見えるので、
// 閾値を超えている場合は、さらにちょっと明るくする
var threshold = 20;
if( (r>threshold) && (g>threshold) && (b>threshold) ){
r = r+160;
g = g+160;
b = b+160;
}else{
r = r+20;
g = g+20;
b = b+20;
}
// 光っていないLEDは、うっすらと見えるようにする
if( (r==0) && (g==0) && (b==0) ){
r = 40;
g = 40;
b = 40;
}
return [r,g,b];
}
/**
* RGB値を受け取って、単色化する
*/
function _colorize(r,g,b) {
// 電光掲示板なので、オレンジ色(243, 152, 0)にする
r = parseInt(r / 255 * 243, 10);
g = parseInt(g / 255 * 152, 10);
b = parseInt(b / 255 * 0, 10);
return [r,g,b];
}
/**
* 電光掲示板のような格子状の罫線を引く
*/
function _toBlind(canvas, context){
var _width = canvas.width();
var _height = canvas.height();
(function(){
var i=0, j=0;
var x=0, y=0, w=0, h=0;
var tiles_w = _width / BLOCK_SIZE;
var tiles_h = _height / BLOCK_SIZE;
context.beginPath();
context.lineWidth = 0.9;
// 縦線を引く
for(i=0; i<tiles_w+1; i++){
w = BLOCK_SIZE;
x = (i * w);
context.moveTo(x, 0);
context.lineTo(x, _height);
}
// 横線を引く
for(j=0; j<tiles_h+1; j++){
h = BLOCK_SIZE;
y = (j * h);
context.moveTo(0, y);
context.lineTo(_width, y);
}
context.stroke();
})();
}
/**
* スクロールする
*/
function _doScroll(canvas, context, wrapper){
var wrapper_w = wrapper.width();
var canvas_w = canvas.width();
var x0 = 0;
var x = x0;
setInterval(function(){
if(x < -canvas_w+WRAPPER_WIDTH) x = x0;
canvas.css('left', x+'px');
x -= 3;
}, 20);
}
HTML5のCanvasとJSで電光掲示板 - jsdo.it - share JavaScript, HTML5 and CSS
