atrix

by pacochi 2017-01-31 [2017/01/31 21:57:12]
(Forked from matrix by yuta25)

思い付きでやったら思いの外肌色になって?こずりました。

@@ -14,7 +14,7 @@
 	const pSize = fSize - 2;
 	const oStep = 20;
 	// 元ネタ見たことないからこれの間隔全く分からないけど適当でいいっぽい？
-	const o = [].concat(Array.from(Array(oStep)).map((x, i) => (i + 1) / oStep),
+	const opacity = [].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));
 
@@ -71,8 +71,8 @@
 
 		});
 
-		monitor.style.opacity = o[oCount++];
-		oCount %= o.length;
+		monitor.style.opacity = opacity[oCount++];
+		oCount %= opacity.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 opacity = [].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 = opacity[oCount++];
  		oCount %= opacity.length;
  
  	}, 33);
  
  })();
  

• Permalink RAW Packed Userscript LOADER Metadata ?

  Permalink

  このページへの個別リンクです。

  RAW

  書かれたコードへの直接のリンクです。

  Packed

  文字列が圧縮された書かれたコードへのリンクです。

  Userscript

  Greasemonkey 等で利用する場合の .user.js へのリンクです。

  Loader

  @require やソースコードが長い場合に多段ロードする Loader コミのコードへのリンクです。

  Metadata

  コード中にコメントで @xxx と書かれたメタデータの JSON です。