atrix

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

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

@@ -1,51 +1,64 @@
 /*
- * @title matrix
- * @javascript_url
- * @description my bookmarklet
+ * @title atrix
+ * @description 思い付きでやったら思いの外肌色になって?こずりました。
  * @include http://*
  * @license MIT License
- * @require 
+ * @javascript_url 
  */
 
-// original: https://github.com/MinhasKamal/CreepyCodeCollection/blob/master/matrix_effect.html
-
+// Fork 元の original: https://github.com/MinhasKamal/CreepyCodeCollection/blob/master/matrix_effect.html
+// これの元: http://cssdeck.com/labs/the-matrix
 (function() {
-  let q = document.createElement('canvas');
-  document.body.appendChild(q);
-  let s=window.screen;
-  let w=q.width=s.width;
-  let h=q.height=document.body.scrollHeight;
-  let p=Array(256).join(1).split('');
-  let c=q.getContext("2d");
-  let m=Math;
-  // q.style.height = `${document.body.scrollHeight}px`;
-  q.style.position = 'absolute';
-  q.style.top = q.style.left = '0';
-  q.style.zIndex = '99999';
-  let opacity = 0;
-  let inc = true;
-  setInterval(() => {
-    c.fillStyle="rgba(0,0,0,0.05)";
-    c.fillRect(0,0,w,h);
-    c.fillStyle="rgba(0,255,0,1)";
-    if (inc) {
-      opacity += 10;
-      q.style.opacity = `${opacity/100}`;
-      if (opacity >= 100) {
-        inc = false;
-      }
-    } else {
-      opacity -= 10;
-      q.style.opacity = `${opacity/100}`;
-      if (opacity <= 0) {
-        inc = true;
-      }
-    }
-    p=p.map((v,i) => {
-      let r=m.random();
-      c.fillText(String.fromCharCode(m.floor(2720+r*33)),i*10,v);
-      v+=10;
-      return v>768+r*1e4?0:v
-    })
-  },33);
-}())
+
+	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 f = new Map([[0xDC46, 11], [0xDD8E, 22]]);
+	let a = 0;
+	g.fillStyle = '#0F0';
+
+	for (let [t, v] of f) {
+
+		for (let i = 0; i < v; i++) g.fillText(String.fromCharCode(0xD83D, t + i), (i + a) * s, m);
+		a += v;
+
+	}
+
+	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);
+
+	let l = Array(256).fill(1);
+	let n = 0;
+
+	setInterval(() => {
+
+		c.fillStyle = 'rgba(0,0,0,.05)';
+		c.fillRect(0, 0, w, h);
+
+		l = l.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);
+
+		});
+
+		q.style.opacity = o[n++];
+		n %= o.length;
+
+	}, 33);
+
+})();

• /*
   * @title atrix
   * @description 思い付きでやったら思いの外肌色になって?こずりました。
   * @include http://*
   * @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 f = new Map([[0xDC46, 11], [0xDD8E, 22]]);
  	let a = 0;
  	g.fillStyle = '#0F0';
  
  	for (let [t, v] of f) {
  
  		for (let i = 0; i < v; i++) g.fillText(String.fromCharCode(0xD83D, t + i), (i + a) * s, m);
  		a += v;
  
  	}
  
  	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);
  
  	let l = Array(256).fill(1);
  	let n = 0;
  
  	setInterval(() => {
  
  		c.fillStyle = 'rgba(0,0,0,.05)';
  		c.fillRect(0, 0, w, h);
  
  		l = l.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);
  
  		});
  
  		q.style.opacity = o[n++];
  		n %= o.length;
  
  	}, 33);
  
  })();

• Permalink RAW Packed Userscript LOADER Metadata ?

  Permalink

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

  RAW

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

  Packed

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

  Userscript

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

  Loader

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

  Metadata

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