atrix

  • /*
     * @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);
    
    })();
    
  • Permalink
    このページへの個別リンクです。
    RAW
    書かれたコードへの直接のリンクです。
    Packed
    文字列が圧縮された書かれたコードへのリンクです。
    Userscript
    Greasemonkey 等で利用する場合の .user.js へのリンクです。
    Loader
    @require やソースコードが長い場合に多段ロードする Loader コミのコードへのリンクです。
    Metadata
    コード中にコメントで @xxx と書かれたメタデータの JSON です。

History

  1. 2017/01/31 21:57:12 - 2017-01-31
  2. 2017/01/31 20:10:36 - 2017-01-31
  3. 2017/01/31 13:10:04 - 2017-01-31
  4. 2017/01/30 14:18:22 - 2017-01-30
  5. 2017/01/30 14:17:20 - 2017-01-30