Skip to content

Commit 576aa95

Browse files
committed
Consolidated Matrix JS file so it can be viewed in coder, and made edit button more prominent
1 parent 44c16bd commit 576aa95

File tree

4 files changed

+227
-216
lines changed

4 files changed

+227
-216
lines changed

coder-apps/common/rva_coderdojo_matrix/static/css/index.css

Lines changed: 11 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -24,4 +24,14 @@ body {
2424
right: 0;
2525
width: 90%;
2626
max-width: 800px;
27-
}
27+
}
28+
29+
/* This is a color hack to make the Google Coder controls more prominent */
30+
#coder_basicnav {
31+
color: rgba(238,238,0,.8);
32+
background-color: rgba(0, 255, 0, .4);
33+
}
34+
#coder_basicnav .coder_home a {
35+
color: rgba(238,238,0,.8);
36+
}
37+
/* End of color hack */

coder-apps/common/rva_coderdojo_matrix/static/js/index.js

Lines changed: 216 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -21,7 +21,8 @@ $(document).ready(function () {
2121
// - rgb(redColor, greenColor, blueColor)
2222
// - Colors can go from 0 [dark] to 255 [bright]
2323
// - So rgb(255, 0, 255) will be bright purple (red + blue).
24-
matrixRain.setFontColor('#00FF00');
24+
// rgb(0, 255, 0) = Bright green
25+
matrixRain.setFontColor('rgb(0, 255, 0)');
2526

2627
// Start running the matrix rain animation!
2728
matrixRain.start();
@@ -36,4 +37,217 @@ $(document).ready(function () {
3637
// Attaches the RVA coder dojo image to the page as a regular html <img>
3738
document.body.appendChild(fallback);
3839
}
39-
});
40+
});
41+
42+
// Original matrix-rain code from: http://thecodeplayer.com/walkthrough/matrix-rain-animation-html5-canvas-javascript
43+
// (refactored and enhanced by RVA Coder Dojo)
44+
45+
// We are using a Javascript style of coding to create a call called "MatrixRain" here.
46+
function MatrixRain (containerId) {
47+
48+
// This will insert a <div> into the page and give it the id 'matrix-canvas-stack'
49+
this.canvasStackDiv = document.createElement('div');
50+
this.canvasStackDiv.id='matrix-canvas-stack';
51+
52+
// If the user of this class passes in a containerId value, then we will place the
53+
// 'matrix-canvas-stack' inside the provided container element in the page.
54+
// this lets the user position the matrix rain logo wherever they want on the page.
55+
if (containerId != null && document.getElementById(containerId) != null) {
56+
this.container = document.getElementById(containerId);
57+
this.container.appendChild(this.canvasStackDiv);
58+
}
59+
else // If not, we just drop the 'matrix-canvas-stack' as the last element in the page.
60+
document.body.appendChild(this.canvasStackDiv);
61+
62+
// These next values are defaults which can be changed using
63+
// the set method defined later on.
64+
65+
// this is the default speed for the rain.
66+
this.renderDelay = 50;
67+
68+
// This will be the URL for the overlay image (if you have one) default is no image.
69+
this.imageURL = null;
70+
71+
// This can be a link to jump to if the user clicks on the logo. default is none
72+
this.gotoURL = null;
73+
74+
// These are just random looking matrix characters by default. They can be changed.
75+
this.matrixText = '田由甲申甴电甶男甸甹町画甼甽甾甿畀畁畂畃畄畅畆畇畈畉畊畋界畍畎畏畐畑';
76+
77+
// This is the default font size for the matrix rain letters.
78+
this.fontSize=8;
79+
80+
// This is the default color (bright green)
81+
this.fontColor='rgb(0,255,0)';
82+
};
83+
84+
// Call setGotoURL to create a landing web page to go to when the user clicks on the rain.
85+
MatrixRain.prototype.setGotoURL = function(gotoURL) {
86+
if (gotoURL != null) {
87+
this.gotoURL = gotoURL;
88+
}
89+
};
90+
91+
// Call setText to put your own secret message in the rain.
92+
MatrixRain.prototype.setText = function (textIn) {
93+
if (textIn != null)
94+
this.matrixText = textIn;
95+
};
96+
97+
// Call setDelay with a number. Bigger numbers make the rain animate slower.
98+
// Smaller numbers make it go faster.
99+
MatrixRain.prototype.setDelay = function (delayIn) {
100+
if (delayIn != null && delayIn >= 0)
101+
this.renderDelay = delayIn;
102+
};
103+
104+
// Call setImageURL to create an overlay image for the rain. Only the transparent portions of
105+
// the image will show the rain.
106+
MatrixRain.prototype.setImageURL = function (imageURL) {
107+
if (imageURL != undefined)
108+
this.imageURL = imageURL;
109+
};
110+
111+
// Call setFontSize to change how big or small the letters are that make up your secret message.
112+
MatrixRain.prototype.setFontSize = function (fontSize) {
113+
if (fontSize != undefined && fontSize > 0)
114+
this.fontSize = fontSize;
115+
};
116+
117+
// Call setFontColor to change what color the text is in your secret message.
118+
MatrixRain.prototype.setFontColor = function (fontColor) {
119+
if (fontColor != undefined)
120+
this.fontColor = fontColor;
121+
};
122+
123+
// This helps to resize the canvas.
124+
MatrixRain.prototype.resize = function (width, height) {
125+
this.matrixCanvas.width=width;
126+
this.matrixCanvas.height= height;
127+
if (this.matrixOverlay != undefined) {
128+
this.matrixOverlay.width=width;
129+
this.matrixOverlay.height=height;
130+
}
131+
};
132+
133+
// This creates an HTML 5 canvas element with the provided name (id), height and width.
134+
MatrixRain.prototype.createCanvas = function (id, width, height) {
135+
var newCanvas = document.createElement('canvas');
136+
newCanvas.id = id;
137+
if (width != null)
138+
newCanvas.width = width;
139+
if (height != null)
140+
newCanvas.height = height;
141+
142+
// sets the alignment so the layers will overlap.
143+
newCanvas.style.position="absolute";
144+
newCanvas.style.backgroundColor="transparent";
145+
146+
return newCanvas;
147+
};
148+
149+
// This is the function to start the matrix rain animation. Call it
150+
// after you have created a MatrixRain javascript object, and called
151+
// all the setters you want to configure your rain. For example:
152+
// var matrixRain = new MatrixRain();
153+
// matrixRain.setText('Hello World');
154+
// matrixRain.setFontSize(12);
155+
// matrixRain.start();
156+
MatrixRain.prototype.start = function() {
157+
this.matrixCanvas = this.createCanvas('matrix-canvas');
158+
this.matrixCanvas.style.zIndex=0;
159+
this.matrixCanvas.style.background="black";
160+
this.canvasStackDiv.appendChild(this.matrixCanvas);
161+
if (this.imageURL != null) {
162+
img = new Image();
163+
img.matrix = this;
164+
img.onerror = function() {
165+
this.matrix.startRain();
166+
window.console && console.log('Could not load image: ' + this.imageURL);
167+
};
168+
img.onload = function() {
169+
this.matrix.addOverlay(img);
170+
this.matrix.startRain();
171+
};
172+
img.src = this.imageURL;
173+
}
174+
else {
175+
this.startRain();
176+
}
177+
};
178+
179+
// This function adds the overlay image as an HTML 5 canvas on top of the rain animation
180+
// It is sized to be the same height and width as the rain animation.
181+
MatrixRain.prototype.addOverlay = function(image) {
182+
this.matrixOverlay = this.createCanvas('matrix-overlay', image.width, image.height);
183+
this.matrixOverlay.style.zIndex=10;
184+
this.canvasStackDiv.appendChild(this.matrixOverlay);
185+
this.resize(image.width, image.height);
186+
var context = this.matrixOverlay.getContext('2d');
187+
context.drawImage(image, 0,0);
188+
};
189+
190+
// This will do the initial setup for the matrix rain data.
191+
MatrixRain.prototype.startRain = function() {
192+
this.mtxCtx = this.matrixCanvas.getContext('2d');
193+
194+
this.matrixText = this.matrixText.split("");
195+
196+
// How many characters across the canvas
197+
this.columns = this.matrixCanvas.width / this.fontSize;
198+
this.drops = [];
199+
200+
// Where to start in the matrix code
201+
// This allows for readable text messages to rain down.
202+
this.textIndex = [];
203+
204+
for (var x = 0; x < this.columns; x++) {
205+
this.drops[x] = this.matrixCanvas.height + 1;
206+
this.textIndex[x] = Math.floor(Math.random() * this.matrixText.length);
207+
}
208+
209+
// this is a poor hack to attach to the global namespace for the callback
210+
window.MatrixRainInstance = this;
211+
212+
// This sets a timer to wait until "renderDelay" expires
213+
// then call the "render()" function (defined below)
214+
// this process repeats forever until the user leaves the page.
215+
setInterval(this.render, this.renderDelay);
216+
};
217+
218+
// This function is the animation for the matrix rain.
219+
MatrixRain.prototype.render = function() {
220+
221+
// This gets access to the matrix rain class
222+
var _this = window.MatrixRainInstance;
223+
224+
// Fill the canvas with a very transparent black.
225+
// This is what causes the letters to slowly fade out.
226+
_this.mtxCtx.fillStyle="rgba(0,0,0,0.05)";
227+
_this.mtxCtx.fillRect(0, 0, _this.matrixCanvas.width, _this.matrixCanvas.height);
228+
229+
// Now set the color and font size for the matrix text
230+
_this.mtxCtx.fillStyle = _this.fontColor;
231+
_this.mtxCtx.font = _this.fontSize + "px arial";
232+
233+
// Loop over each of the drops
234+
for (var i=0; i < _this.drops.length; i++) {
235+
236+
// Start adding text to the canvas
237+
_this.textIndex[i] = (_this.textIndex[i] + 1) % _this.matrixText.length;
238+
var text = _this.matrixText[_this.textIndex[i]];
239+
240+
// x = i * fontSize, y = value of drops[i]*fontSize
241+
_this.mtxCtx.fillText(text, i*_this.fontSize, _this.drops[i]*_this.fontSize);
242+
243+
// reset a drop after it hits the bottom and have it start to drop from the top.
244+
if (_this.drops[i] * _this.fontSize > _this.matrixCanvas.height && Math.random() > 0.875) {
245+
_this.drops[i] = 0;
246+
}
247+
248+
// bump Y coordinate
249+
_this.drops[i]++;
250+
}
251+
};
252+
253+

0 commit comments

Comments
 (0)