Page MenuHomeWolfplex
Files F408504

No OneTemporary
Actions

View Options

diff --git a/matrix-message/black_denim.png b/matrix-message/black_denim.png
new file mode 100644
index 0000000..ee1a4f5
Binary files /dev/null and b/matrix-message/black_denim.png differ
diff --git a/matrix-message/index.html b/matrix-message/index.html
new file mode 100644
index 0000000..bfa4476
--- /dev/null
+++ b/matrix-message/index.html
@@ -0,0 +1,55 @@
+<!DOCTYPE html>
+
+<!-- paulirish.com/2008/conditional-stylesheets-vs-css-hacks-answer-neither/ -->
+<!--[if lt IE 7]> <html class="no-js lt-ie9 lt-ie8 lt-ie7" lang="en"> <![endif]-->
+<!--[if IE 7]> <html class="no-js lt-ie9 lt-ie8" lang="en"> <![endif]-->
+<!--[if IE 8]> <html class="no-js lt-ie9" lang="en"> <![endif]-->
+<!--[if gt IE 8]><!--> <html class="no-js" lang="en"> <!--<![endif]-->
+<head>
+ <meta charset="utf-8" />
+
+ <!-- Set the viewport width to device width for mobile -->
+ <meta name="viewport" content="width=device-width" />
+
+ <title>Matrix Message | Assets</title>
+ <link rel="stylesheet" href="//cdnjs.cloudflare.com/ajax/libs/foundation/3.2.5/stylesheets/foundation.min.css">
+ <script src="//cdnjs.cloudflare.com/ajax/libs/foundation/3.2.5/javascripts/modernizr.foundation.min.js"></script>
+
+ <!-- IE Fix for HTML5 Tags -->
+ <!--[if lt IE 9]>
+ <script src="//cdnjs.cloudflare.com/ajax/libs/html5shiv/3.6.2/html5shiv.js"></script>
+ <![endif]-->
+
+</head>
+<body>
+
+ <!-- Main Page Content -->
+ <div class="row">
+ <!-- Contact Details -->
+ <div class="nine columns">
+
+ <h3>Assets</h3>
+ <p>This web directory contains assets to serve a Matrix animated background with a content message box.</p>
+ <p>More generally, this website serves static resources for our web and application content.</p>
+ </div>
+ </div>
+ <!-- End Main Content -->
+
+
+ <footer class="row">
+ <div class="twelve columns">
+ <hr />
+ <div class="row">
+ <div class="six columns">
+ 2018
+ </div>
+ <div class="six columns">
+ <ul class="link-list right">
+ <li><a href="http://www.wolfplex.org/">Wolfplex</a></li>
+ </ul>
+ </div>
+ </div>
+ </div>
+ </footer>
+</body>
+</html>
diff --git a/matrix-message/matrix-message.css b/matrix-message/matrix-message.css
new file mode 100644
index 0000000..9311b36
--- /dev/null
+++ b/matrix-message/matrix-message.css
@@ -0,0 +1,90 @@
+@charset "utf-8";
+
+/* -------------------------------------------------------------
+ Wolfplex
+ - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
+ Author: Sébastien Santoro aka Dereckson
+ Tags: black green matrix cyberpunk
+ Filename: matrix-message.css
+ Created: 2018-10-29
+ Licence: Creative Commons BY 4.0
+ ------------------------------------------------------------- */
+
+/* -------------------------------------------------------------
+ General style
+ - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - */
+
+body {
+ background-color: #090909;
+ background-image: url("black_denim.png");
+}
+
+/* -------------------------------------------------------------
+ Matrix rain canvas
+ - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - */
+
+#background {
+ position: fixed;
+ z-index : -1;
+}
+
+/* -------------------------------------------------------------
+ Message style
+ - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - */
+
+.message {
+ position: absolute;
+
+ padding: 1em 1em;
+
+ background-color: rgba(0, 0, 0, 0.8);
+ color: #51a303;
+
+ font-family: 'Ropa Sans', sans-serif;
+ font-size: 18px;
+
+ z-index: 10;
+}
+
+.message a {
+ color: #62c108;
+ text-decoration: none;
+}
+
+.message h1, .message h2 {
+ color: #a20604;
+ font-weight: 400;
+}
+
+.message h1 {
+ font-size: 36px;
+}
+
+.message h2 {
+ font-size: 27px;
+}
+
+.message ul {
+ line-height: 1.8em;
+}
+
+/* -------------------------------------------------------------
+ Media queries
+
+ :: Position the message at the top left for > 40em
+ - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - */
+
+@media screen and (min-width: 40em) {
+ .message {
+ margin-top: 5vh;
+ margin-left: 3vw;
+
+ box-shadow: 8px 10px 30px 0px rgba(80, 163, 3, 0.5);
+
+ border-radius: 5px 5px 5px 5px;
+ -moz-border-radius: 5px 5px 5px 5px;
+ -webkit-border-radius: 5px 5px 5px 5px;
+
+ float: left;
+ }
+}
diff --git a/matrix-message/matrix-rain.js b/matrix-message/matrix-rain.js
new file mode 100644
index 0000000..90d708b
--- /dev/null
+++ b/matrix-message/matrix-rain.js
@@ -0,0 +1,242 @@
+/* -------------------------------------------------------------
+ Matrix rain
+ - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
+ Maintainer: Sébastien Santoro aka Dereckson
+ Tags: black green matrix cyberpunk
+ Filename: matrix-rain.js
+ Created: 2015-10-29
+ ------------------------------------------------------------- */
+
+/* -------------------------------------------------------------
+ Matrix rain class
+
+ Author: Collin Henderson
+ Created: 2011-05-09
+ Source: https://github.com/syropian/HTML5-Matrix-Code-Rain
+
+ Draw Matrix rain effect in a canvas
+ - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - */
+
+class MatrixRain {
+
+ constructor(elementId) {
+ this.canvas = document.getElementById(elementId);
+ this.context = this.canvas.getContext('2d');
+ this.context.globalCompositeOperation = 'lighter';
+
+ this.canvas.width = window.innerWidth;
+ this.canvas.height = window.innerHeight;
+
+ this._stripCount = 120;
+ this._frameDelay = 70; // ms
+ this._stripX = [];
+ this._stripY = [];
+ this._dY = [];
+ this._stripFontSize = [];
+ this._textStrip = ['诶', '比', '西', '迪', '伊', '吉', '艾', '杰', '开', '哦', '屁', '提', '维'];
+ this._colors = ['#cefbe4', '#81ec72', '#5cd646', '#54d13c', '#4ccc32', '#43c728'];
+ }
+
+ start() {
+ this.initializeStrip();
+ this.draw(this);
+ }
+
+ initializeStrip() {
+ for (let i = 0; i < this._stripCount; i++) {
+ this.seedStrip(i);
+ }
+
+ this.context.shadowBlur = 8;
+ this.context.shadowColor = '#94f475';
+ this.context.textBaseline = 'top';
+ this.context.textAlign = 'center';
+ }
+
+ seedStrip(i) {
+ this._stripX[i] = Math.floor(Math.random() * this.canvas.width);
+ this._stripY[i] = -100;
+ this._dY[i] = Math.floor(Math.random() * 7) + 3;
+ this._stripFontSize[i] = Math.floor(Math.random() * 16) + 8;
+ }
+
+ draw() {
+ this.clearCanvas();
+
+ for (let i = 0; i < this._stripCount; i++) {
+ this.context.font = this._stripFontSize[i] + 'px MatrixCode';
+
+ if (this._stripY[i] > this.canvas.height + 320) {
+ this.seedStrip(i);
+ }
+ this.drawStrip(this._stripX[i], this._stripY[i]);
+
+ this._stripY[i] += this._dY[i];
+ }
+
+ this.redraw();
+ }
+
+ redraw() {
+ let that = this;
+ setTimeout(function() {
+ that.draw()
+ }, this._frameDelay);
+ }
+
+ drawStrip(x, y) {
+ for (let i = 0; i <= 20; i++) {
+ const character = this.getRandomCharacter();
+
+ if (this.context.fillText) {
+ this.updateFillStyle(i);
+ }
+
+ this.context.fillText(character, x, y);
+
+ y -= this._stripFontSize[i];
+ }
+ }
+
+ clearCanvas() {
+ this.context.clearRect(0, 0, this.canvas.width, this.canvas.height);
+ this.context.shadowOffsetX = this.context.shadowOffsetY = 0;
+ }
+
+ getRandomCharacter() {
+ return this._textStrip[Math.floor(Math.random() * this._textStrip.length)];
+ }
+
+ updateFillStyle(characterPosition) {
+ const breakpoints = [0, 1, 3, 7, 13, 17];
+
+ for (let i = 0 ; i < 6 ; i++) {
+ if (characterPosition === breakpoints[i]) {
+ this.context.fillStyle = this._colors[i];
+ break;
+ }
+ }
+ }
+}
+
+/* -------------------------------------------------------------
+ Matrix storm class
+
+ Author: Ebram Marzouk
+ Source: https://codepen.io/P3R0/pen/MwgoKv
+
+ Draw Matrix rain animation in a canvas
+
+ Used in browser lagging with the Collin code, like Firefox
+ - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - */
+
+class MatrixStorm {
+ constructor(elementId) {
+ this._canvas = document.getElementById(elementId);
+ this._context = this._canvas.getContext('2d');
+
+ this._canvas.height = window.innerHeight;
+ this._canvas.width = window.innerWidth;
+
+ this._characters = ['田', '由', '甲', '申', '甴', '电', '甶', '男', '甸', '甹', '町', '画', '甼', '甽', '甾', '甿', '畀', '畁', '畂', '畃', '畄', '畅', '畆', '畇', '畈', '畉', '畊', '畋', '界', '畍', '畎', '畏', '畐', '畑'];
+ this._font_size = 18;
+ this._columns = Math.floor(this._canvas.width / this._font_size);
+ this._drops = new Array(this._columns).fill(1);
+
+ this._frameDelay = 33;
+ }
+
+ start() {
+ this.draw();
+ }
+
+ draw() {
+ this.repaint();
+
+ this._context.fillStyle = "#0F0"; //green text
+ this._context.font = this._font_size + "px arial";
+
+ for(let i = 0; i < this._drops.length; i++) {
+ this.drawDrop(i)
+ }
+
+ this.redraw();
+ }
+
+ repaint() {
+ this._context.fillStyle = "rgba(0, 0, 0, 0.05)";
+ this._context.fillRect(0, 0, this._canvas.width, this._canvas.height);
+ }
+
+ drawDrop(i) {
+ const text = this.getRandomCharacter();
+ this._context.fillText(text, i * this._font_size, this._drops[i] * this._font_size);
+
+ this.moveDrop(i);
+ }
+
+ moveDrop(i) {
+ //sending the drop back to the top randomly after it has crossed the screen
+ //adding a randomness to the reset to make the _drops scattered on the Y axis
+ if(this.isSetToBeSentBackToTheTop(this._drops[i])) {
+ this._drops[i] = 0;
+ } else {
+ this._drops[i]++;
+ }
+ }
+
+ isSetToBeSentBackToTheTop(drop) {
+ return drop * this._font_size > this._canvas.height && Math.random() > 0.975
+ }
+
+ redraw() {
+ let that = this;
+ setTimeout(function() {
+ that.draw()
+ }, this._frameDelay);
+ }
+
+ getRandomCharacter() {
+ return this._characters[Math.floor(Math.random() * this._characters.length)]
+ }
+}
+
+/* -------------------------------------------------------------
+ Load version
+ - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - */
+
+class MatrixRainLoader {
+ constructor(element) {
+ this.element = element;
+ }
+
+ load() {
+ if (MatrixRainLoader.isChrome() || MatrixRainLoader.isEdge() ) {
+ this.loadMatrixRain();
+ } else {
+ this.loadMatrixStorm();
+ }
+ }
+
+ loadMatrixRain() {
+ let animation = new MatrixRain(this.element);
+ animation.start();
+ }
+
+ loadMatrixStorm() {
+ let animation = new MatrixStorm(this.element);
+ animation.start();
+ }
+
+ static isChrome() {
+ // noinspection JSUnresolvedVariable
+ return typeof chrome !== 'undefined';
+ }
+
+ static isEdge() {
+ return navigator.appVersion.indexOf("Edge") !== -1;
+ }
+}
+
+let loader = new MatrixRainLoader("background");
+loader.load();

File Metadata

Mime Type
text/x-diff
Expires
Mon, Jun 9, 3:07 PM (1 w, 2 d ago)
Storage Engine
blob
Storage Format
Raw Data
Storage Handle
46400
Default Alt Text
(11 KB)

Event Timeline