by pacochi
2017-01-31 [2017/01/31 21:57:12]
思い付きでやったら思いの外肌色になって?こずりました。
@@ -1,64 +1,79 @@ /* * @title atrix * @description 思い付きでやったら思いの外肌色になって?こずりました。- * @include http://*+ * @include * * @license MIT License * @javascript_url */ // Fork 元の original: https://github.com/MinhasKamal/CreepyCodeCollection/blob/master/matrix_effect.html // これの元: http://cssdeck.com/labs/the-matrix-(function() {+(() => {- const s = 12;- const m = s - 2;- const q = document.createElement('canvas');- const b = q.cloneNode(false);- const c = q.getContext('2d');- const w = q.width = window.screen.width;- const h = q.height = document.body.scrollHeight;- q.style.cssText = 'position: absolute; z-index: 2147483646; absolute; top: 0; left: 0;';- document.body.appendChild(q);- const g = b.getContext('2d');- b.width = 480;- b.height = s;- const o = [].concat(Array.from(Array(s)).map((x, i) => (i + 1) / s),- Array.from(Array(s)).map((x, i) => (s - i) / s));+ const fSize = 12; + const pSize = fSize - 2; + const oStep = 20; + // 元ネタ見たことないからこれの間隔全く分からないけど適当でいいっぽい？ + const o = [].concat(Array.from(Array(oStep)).map((x, i) => (i + 1) / oStep), + Array(oStep).fill(1), + Array.from(Array(oStep)).map((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; // 直接色変えてったらブラウザ持ってかれる重さだった- const f = new Map([[0xDC46, 11], [0xDD8E, 22]]);- let a = 0;- g.fillStyle = '#0F0';+ let bLength = 0; + bContext.fillStyle = '#0F0';- for (let [t, v] of f) {+ // 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 < v; i++) g.fillText(String.fromCharCode(0xD83D, t + i), (i + a) * s, m);- a += v;+ for (let i = 0; i < range; i++) bContext.fillText(String.fromCharCode(0xD83D, lowSurrogate + i), (i + bLength) * fSize, pSize); + bLength += range; }- const d = g.getImageData(0, 0, b.width, b.height);- for (let p = 0; p < d.data.length; p += 4) d.data[p] = d.data[p + 2] = 0;- g.putImageData(d, 0, 0);+ 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 l = Array(256).fill(1);- let n = 0;+ let lettersY = Array(256).fill(1); + let oCount = 0; +- setInterval(() => {+ let drawerId = setInterval(() => {- c.fillStyle = 'rgba(0,0,0,.05)';- c.fillRect(0, 0, w, h);+ mContext.fillStyle = 'rgba(0,0,0,.05)'; + mContext.fillRect(0, 0, monitor.width, monitor.height);- l = l.map((y, i) => {+ lettersY = lettersY.map((y, i) => {- c.drawImage(b, Math.floor(Math.random() * a) * s, 0, s, s, i * m, y, s, s);- return((y > 758 + Math.random() * 10000) ? 0 : y + m);+ 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); });- q.style.opacity = o[n++];- n %= o.length;+ monitor.style.opacity = o[oCount++]; + oCount %= o.length; }, 33);-})();+})();
/*
* @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;
// 元ネタ見たことないからこれの間隔全く分からないけど適当でいいっぽい？
const o = [].concat(Array.from(Array(oStep)).map((x, i) => (i + 1) / oStep),
Array(oStep).fill(1),
Array.from(Array(oStep)).map((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 = o[oCount++];
oCount %= o.length;
}, 33);
})();