by pacochi
2017-01-31 [2017/01/31 21:57:12]
思い付きでやったら思いの外肌色になって?こずりました。
/*
* @title atrix
* @description 思い付きでやったら思いの外肌色になって?こずりました。
* @include *
* @license MIT License
* @javascript_url
*/
// Fork 元の original: https://github.com/MinhasKamal/CreepyCodeCollection/blob/master/matrix_effect.html
// これの元: http://cssdeck.com/labs/the-matrix
(() => {
const fSize = 12;
const pSize = fSize - 2;
const oStep = 20;
// チェーン繋がるのとか教えてもらった
// http://h.hatena.ne.jp/noromanba/315966606049671942
const opacity = Array.from(Array(oStep), (x, i) => (i + 1) / oStep)
.concat(Array(oStep).fill(1))
.concat(Array.from(Array(oStep), (x, i) => (oStep - i) / oStep));
const monitor = document.createElement('canvas');
const buffer = monitor.cloneNode(false);
const mContext = monitor.getContext('2d');
const bContext = buffer.getContext('2d');
monitor.width = window.innerWidth;
monitor.height = window.innerHeight;
monitor.style.cssText = 'position: absolute; z-index: 2147483646; top: 0; left: 0;';
document.body.appendChild(monitor);
// リロードで消すのがめんどくなった
monitor.addEventListener('dblclick', e => {
clearInterval(drawerId);
document.body.removeChild(monitor);
e.stopPropagation();
}, false);
buffer.width = 480;
buffer.height = fSize;
// 直接色変えてったらブラウザ持ってかれる重さだった
let bLength = 0;
bContext.fillStyle = '#0F0';
// http://www.asahi-net.or.jp/~ax2s-kmtn/ref/unicode/u1f300.html#u1f446
// http://www.asahi-net.or.jp/~ax2s-kmtn/ref/unicode/u1f300.html#u1f58e
for (let [lowSurrogate, range] of new Map([[0xDC46, 11], [0xDD8E, 22]])) {
for (let i = 0; i < range; i++) bContext.fillText(String.fromCharCode(0xD83D, lowSurrogate + i), (i + bLength) * fSize, pSize);
bLength += range;
}
const bData = bContext.getImageData(0, 0, buffer.width, buffer.height);
for (let p = 0; p < bData.data.length; p += 4) bData.data[p] = bData.data[p + 2] = 0;
bContext.putImageData(bData, 0, 0);
let lettersY = Array(256).fill(1);
let oCount = 0;
let drawerId = setInterval(() => {
mContext.fillStyle = 'rgba(0,0,0,.05)';
mContext.fillRect(0, 0, monitor.width, monitor.height);
lettersY = lettersY.map((y, i) => {
mContext.drawImage(buffer, Math.floor(Math.random() * bLength) * fSize, 0, fSize, fSize, i * pSize, y, fSize, fSize);
return((y > monitor.height + Math.random() * 10000) ? 0 : y + pSize);
});
monitor.style.opacity = opacity[oCount++];
oCount %= opacity.length;
}, 33);
scrollTo(0, 0);
})();