r/matrix
@@ -8,6 +8,7 @@
* @contributor jargonjustin https://www.reddit.com/r/programming/comments/1ag0c3/
* @contributor NonNonHeinous, OptionalField, echeese and maschnitz
* @contributor yuta25 http://let.hatelabo.jp/yuta25/let/hJmeu-js5vps (Fork of)
+ * @contributor a-kuma3 http://h.hatena.ne.jp/a-kuma3/315649928894883680
* @license TBD (as-is); see the bottom
* @javascript_url
*/
@@ -43,12 +44,32 @@
ctx.fillStyle = 'rgba(0, 0, 0, 0.05)';
ctx.fillRect(0, 0, canvas.width, canvas.height);
ctx.fillStyle = 'rgba(0, 255, 0, 1)';
+ // id:yuta25 code is Trapezoidal (~=Triangle) wave
+ //
// opacity range: 0-1
- // Unit Circle and Radian based cyclic algorithm, like a ^^^^^^^^
- canvas.style.opacity = Math.abs(Math.cos(degree * Math.PI / 180));
- degree = (degree % 360) + 10;
+ // Unit Circle and Radian based cyclic waveform algorithm;
+ // TBD Pulse, Sawtooth, Square, Triangle, and Trapezoidal wave
+ // https://commons.wikimedia.org/wiki/File%3AWaveforms.svg
+ const RADIAN = degree * Math.PI / 180;
+ // pseudo Trapezoidal waveform, force canonical 0-1 by opacity
+ // https://www.google.com/search?q=cos(x)%2B0.5
+ //canvas.style.opacity = Math.cos(RADIAN)) + 0.5;
+ /*/
+ // Sine wave w/ abs, like a yuta25 code
+ // https://www.google.com/search?q=abs(cos(x))^2
+ canvas.style.opacity = Math.pow(Math.abs(Math.cos(RADIAN)), 2);
+ /*/
+ // slower Sine wave than abs-methods
+ // https://www.google.com/search?q=((cos(x)%2B1)/2
+ // thx id:a-kuma3
+ // http://h.hatena.ne.jp/a-kuma3/315649928894883680
+ canvas.style.opacity = ((Math.cos(RADIAN)) + 1) / 2;
+ //*/
+ const OMEGA = 5;
+ // modulo for avoid +Infinity
+ degree = (degree % 360) + OMEGA;
- // XXX too much Magic Numbers; hints c.f.
+ // TODO deobfuscate Magic Numbers; hints c.f.
// https://news.ycombinator.com/item?id=5388575
// https://jsfiddle.net/tburette/w6npr/5/
// https://jsfiddle.net/muV99/1/
@@ -112,4 +133,8 @@
// http://www.wtfpl.net/about/
// http://www.wtfpl.net/txt/copying/
// http://let.hatelabo.jp/noromanba/let/hJmevPLog7ty
+//
+// ### Waveform algorithm by a-kuma3
+// Unknown (as-is)
+// http://h.hatena.ne.jp/a-kuma3/315649928894883680
/*
* @title r/matrix
* @description Neo's-eyes simulator
* @include http://*
* @include https://*
* @contributor http://timelessname.com/sandbox/matrix_orig.html
* @contributor http://timelessname.com/sandbox/matrix.html
* @contributor jargonjustin https://www.reddit.com/r/programming/comments/1ag0c3/
* @contributor NonNonHeinous, OptionalField, echeese and maschnitz
* @contributor yuta25 http://let.hatelabo.jp/yuta25/let/hJmeu-js5vps (Fork of)
* @contributor a-kuma3 http://h.hatena.ne.jp/a-kuma3/315649928894883680
* @license TBD (as-is); see the bottom
* @javascript_url
*/
// remember '00s web
// Matrix digital rain c.f.
// https://www.google.com/search?q=matrix+rain+javascript
// https://en.wikipedia.org/wiki/Matrix_digital_rain
//
// perhaps parent code c.f.
// http://timelessname.com/sandbox/matrix_orig.html
// http://timelessname.com/sandbox/matrix.html
// https://www.reddit.com/r/programming/comments/1ag0c3/someone_posted_an_htmljavascript_implementation/
// https://news.ycombinator.com/item?id=5388444
(() => {
'use strict';
const canvas = document.createElement('canvas');
canvas.width = window.screen.width;
canvas.height = document.body.scrollHeight;
//canvas.style.height = `${document.body.scrollHeight}px`;
canvas.style.position = 'absolute';
canvas.style.top = canvas.style.left = '0';
canvas.style.zIndex = Number.MAX_SAFE_INTEGER || Number.MAX_VALUE;
document.body.appendChild(canvas);
const ctx = canvas.getContext('2d');
let degree = 0;
let texts = Array(256).fill(1);
setInterval(() => {
ctx.fillStyle = 'rgba(0, 0, 0, 0.05)';
ctx.fillRect(0, 0, canvas.width, canvas.height);
ctx.fillStyle = 'rgba(0, 255, 0, 1)';
// id:yuta25 code is Trapezoidal (~=Triangle) wave
//
// opacity range: 0-1
// Unit Circle and Radian based cyclic waveform algorithm;
// TBD Pulse, Sawtooth, Square, Triangle, and Trapezoidal wave
// https://commons.wikimedia.org/wiki/File%3AWaveforms.svg
const RADIAN = degree * Math.PI / 180;
// pseudo Trapezoidal waveform, force canonical 0-1 by opacity
// https://www.google.com/search?q=cos(x)%2B0.5
//canvas.style.opacity = Math.cos(RADIAN)) + 0.5;
/*/
// Sine wave w/ abs, like a yuta25 code
// https://www.google.com/search?q=abs(cos(x))^2
canvas.style.opacity = Math.pow(Math.abs(Math.cos(RADIAN)), 2);
/*/
// slower Sine wave than abs-methods
// https://www.google.com/search?q=((cos(x)%2B1)/2
// thx id:a-kuma3
// http://h.hatena.ne.jp/a-kuma3/315649928894883680
canvas.style.opacity = ((Math.cos(RADIAN)) + 1) / 2;
//*/
const OMEGA = 5;
// modulo for avoid +Infinity
degree = (degree % 360) + OMEGA;
// TODO deobfuscate Magic Numbers; hints c.f.
// https://news.ycombinator.com/item?id=5388575
// https://jsfiddle.net/tburette/w6npr/5/
// https://jsfiddle.net/muV99/1/
// https://news.ycombinator.com/item?id=5392479
texts = texts.map((val, idx) => {
const rand = Math.random();
ctx.fillText(String.fromCharCode(Math.floor(2720 + rand * 33)), idx * 10, val);
val += 10;
return val > 768 + rand * 1e4 ? 0 : val;
});
}, 33);
})();
// # License/Fork Tree
//
// unknown origin
//
// ## timelessname.com
// Unknown (as-is)
// first code?
// http://timelessname.com/sandbox/matrix_orig.html
// Last-Modified: Sun, 17 Mar 2013 05:14:57 GMT
// Sun Mar 17 05:14:57 2013 UTC
//
// Unknown (as-is)
// http://timelessname.com/sandbox/matrix.html
// Last-Modified: Sun, 17 Mar 2013 05:59:49 GMT
// Sun Mar 17 05:59:49 2013 UTC
//
// ## on Hacker News
// Unknown (as-is)
// https://news.ycombinator.com/item?id=5388444
// post: 1414 days ago (no timestamp)
// Sun Mar 17 07:37:02 2013 UTC
//
// ## on /r/programming
// https://www.reddit.com/r/programming/comments/1ag0c3/someone_posted_an_htmljavascript_implementation/
//
// ### posted by /u/jargonjustin
// Unknown (as-is)
// https://www.reddit.com/r/programming/comments/1ag0c3/someone_posted_an_htmljavascript_implementation/c8x2fjx/
// datetime:
// Sun Mar 17 03:29:36 2013 UTC
//
// ### merged by /u/NonNonHeinous
// Unknown (as-is)
// /u/jargonjustin, /u/OptionalField, /u/echeese, and /u/maschnitz (and/or more redditors?)
// https://www.reddit.com/r/programming/comments/1ag0c3/someone_posted_an_htmljavascript_implementation/c8x3vov/
//
// ## just a collect by MinhasKamal from merged code
// Unknown (as-is)
// https://github.com/MinhasKamal/CreepyCodeCollection/blob/master/README.md
// https://github.com/MinhasKamal/CreepyCodeCollection/blob/master/matrix_effect.html
//
// ### pure js port and mod by yuta25
// MIT License https://opensource.org/licenses/MIT
// http://let.hatelabo.jp/yuta25/let/hJmeu-js5vps
//
// ### re-mod by noromanba the Genin translator
// WTFPL (Do What the Fuck You Want to Public License)
// http://www.wtfpl.net/about/
// http://www.wtfpl.net/txt/copying/
// http://let.hatelabo.jp/noromanba/let/hJmevPLog7ty
//
// ### Waveform algorithm by a-kuma3
// Unknown (as-is)
// http://h.hatena.ne.jp/a-kuma3/315649928894883680
- Permalink
- このページへの個別リンクです。
- RAW
- 書かれたコードへの直接のリンクです。
- Packed
- 文字列が圧縮された書かれたコードへのリンクです。
- Userscript
- Greasemonkey 等で利用する場合の .user.js へのリンクです。
- Loader
- @require やソースコードが長い場合に多段ロードする Loader コミのコードへのリンクです。
- Metadata
- コード中にコメントで @xxx と書かれたメタデータの JSON です。
