
スマフォでも持ち歩けるようにしてみた。
存在するRGBカラーを全て詰め込んだ本 : ギズモード・ジャパン8×8×8インチ(約20×20×20センチ)のこの本は、印刷するのが困難なRGB色全てを網羅した本
Demo
canvas
をサポートしてるブラウザーで動きます。IE9もOK(ただしスライダーが出ない)- クリックしてアニメ
- スライダーで「ページめくり」
- スライダーは
input[type=range]
で実装しているので、未実装のブラウザーだときちんと出ません(主にFirefoxとIE)。手抜き失礼
iPhone 5の新"Retina Long"ディスプレイではsRGB全て発色できるとのことなので、これでご確認を。
Dan the Colorful JavaScriper
Demo Source
HTML
JavaScript
(function (global) { 'use strict'; var $ = function (id) { return document.getElementById(id) }; /* RGB */ var rgb = $('rgbcube'), blue = $('blue'), rgbinfo = $('rgbinfo'); var rgbdraw = function (b) { var ctx = rgb.getContext("2d"), imgdata = ctx.createImageData(256, 256), data = imgdata.data, pxl = 0; for (var g = 0; g < 256; g++) { for (var r = 0; r < 256; r++) { data[pxl] = r; data[pxl + 1] = g; data[pxl + 2] = b; data[pxl + 3] = 255; pxl += 4; } } ctx.putImageData(imgdata, 0, 0); blue.value = b; rgbinfo.innerHTML = 'B = ' + b; }; rgb.addEventListener('click', function () { var b = 0, started = Date.now(); setTimeout(function animate() { rgbdraw(b); if (++b < 256) setTimeout(animate, 0); else rgbinfo.innerHTML = 256 / (Date.now() - started) * 1e3 + 'fps'; }, 0); }, false); blue.addEventListener('change', function () { rgbdraw(this.value * 1); }, false); rgbdraw(0); /* YCbCr */ var ycbcr = $('ycbcrcube'), luma = $('luma'), ycbcrinfo = $('ycbcrinfo'); var ycbcrdraw = function (y) { var ctx = ycbcr.getContext("2d"), imgdata = ctx.createImageData(256, 256), data = imgdata.data, pxl = 0; for (var cb = -128; cb < 128; cb++) { for (var cr = -128; cr < 128; cr++) { data[pxl] = y + 1.40200 * cr; data[pxl + 1] = y - 0.34414 * cb - 0.71414 * cr; data[pxl + 2] = y + 1.77200 * cb; data[pxl + 3] = 255; pxl += 4; } } ctx.putImageData(imgdata, 0, 0); luma.value = y; ycbcrinfo.innerHTML = 'Y = ' + y; }; ycbcr.addEventListener('click', function () { var y = 0, started = Date.now(); setTimeout(function animate() { ycbcrdraw(y); if (++y < 256) setTimeout(animate, 0); else ycbcrinfo.innerHTML = 256 / (Date.now() - started) * 1e3 + 'fps'; }, 0); }, false); luma.addEventListener('change', function () { ycbcrdraw(this.value * 1); }, false); ycbcrdraw(0); })(this);
このブログにコメントするにはログインが必要です。
さんログアウト
この記事には許可ユーザしかコメントができません。