Skip to content

Commit 0cbfc25

Browse files
IPdotSetAFIPdotSetAF
committed
refactored mask names
1 parent c8e97f3 commit 0cbfc25

2 files changed

Lines changed: 43 additions & 43 deletions

File tree

‎index.html‎

Lines changed: 3 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -10,9 +10,9 @@
1010
</head>
1111

1212
<body>
13-
<canvas id="m1" class="mask"></canvas>
14-
<canvas id="m2" class="mask"></canvas>
15-
<canvas id="neomatrix"></canvas>
13+
<canvas id="mask" class="mask"></canvas>
14+
<canvas id="color-overlay" class="mask"></canvas>
15+
<canvas id="neo-matrix"></canvas>
1616
<p id="debug"></p>
1717
<div id="gui"></div>
1818
</body>

‎index.js‎

Lines changed: 40 additions & 40 deletions
Original file line numberDiff line numberDiff line change
@@ -286,12 +286,12 @@ window.onload = function () {
286286
var AudioTimeout = false, LastSoundTime = new Date(), isSilent = false, frequencyArray, frequencyArrayLength = 128, column_frequency;
287287
var column_hue, row_hue;
288288
var font_fraction;
289-
var mask1Dom = document.getElementById("m1");
290-
var mask1 = mask1Dom.getContext("2d");
291-
var mask2Dom = document.getElementById("m2");
292-
var mask2 = mask2Dom.getContext("2d");
293-
var c = document.getElementById("neomatrix");
294-
var ctx = c.getContext("2d");
289+
var maskDom = document.getElementById("mask");
290+
var mask = maskDom.getContext("2d");
291+
var colorOverlayDom = document.getElementById("color-overlay");
292+
var colorOverlay = colorOverlayDom.getContext("2d");
293+
var neoMatrixDom = document.getElementById("neo-matrix");
294+
var neoMatrix = neoMatrixDom.getContext("2d");
295295

296296
updateCanvasSize();
297297
updateCharSet();
@@ -300,12 +300,12 @@ window.onload = function () {
300300
startAnimating();
301301

302302
function updateCanvasSize() {
303-
c.height = window.innerHeight;
304-
c.width = window.innerWidth;
305-
mask1Dom.height = window.innerHeight;
306-
mask1Dom.width = window.innerWidth;
307-
mask2Dom.height = window.innerHeight;
308-
mask2Dom.width = window.innerWidth;
303+
neoMatrixDom.height = window.innerHeight;
304+
neoMatrixDom.width = window.innerWidth;
305+
maskDom.height = window.innerHeight;
306+
maskDom.width = window.innerWidth;
307+
colorOverlayDom.height = window.innerHeight;
308+
colorOverlayDom.width = window.innerWidth;
309309
}
310310

311311
function updateLogo() {
@@ -345,21 +345,21 @@ window.onload = function () {
345345
}
346346

347347
function updateMask() {
348-
mask1.globalCompositeOperation = 'source-over';
349-
mask1.clearRect(0, 0, c.width, c.height);
350-
mask1.fillStyle = "rgba(0, 0, 0, " + options.trailLength + ")";
351-
mask1.fillRect(0, 0, c.width, c.height);
348+
mask.globalCompositeOperation = 'source-over';
349+
mask.clearRect(0, 0, neoMatrixDom.width, neoMatrixDom.height);
350+
mask.fillStyle = "rgba(0, 0, 0, " + options.trailLength + ")";
351+
mask.fillRect(0, 0, neoMatrixDom.width, neoMatrixDom.height);
352352

353-
mask1.globalCompositeOperation = 'destination-out';
353+
mask.globalCompositeOperation = 'destination-out';
354354

355355
if (logo) {
356-
let logo_width = (c.height / 2) * (logo.width / logo.height) * options.ui_logo_scale;
357-
let logo_height = (c.height / 2) * options.ui_logo_scale;
356+
let logo_width = (neoMatrixDom.height / 2) * (logo.width / logo.height) * options.ui_logo_scale;
357+
let logo_height = (neoMatrixDom.height / 2) * options.ui_logo_scale;
358358

359-
mask1.drawImage(logo, c.width / 2 - logo_width / 2 + options.ui_logo_positionX, c.height / 2 - logo_height / 2 + options.ui_logo_positionY, logo_width, logo_height);
359+
mask.drawImage(logo, neoMatrixDom.width / 2 - logo_width / 2 + options.ui_logo_positionX, neoMatrixDom.height / 2 - logo_height / 2 + options.ui_logo_positionY, logo_width, logo_height);
360360

361-
mask2.clearRect(0, 0, c.width, c.height);
362-
mask2.drawImage(logo, c.width / 2 - logo_width / 2 + options.ui_logo_positionX, c.height / 2 - logo_height / 2 + options.ui_logo_positionY, logo_width, logo_height);
361+
colorOverlay.clearRect(0, 0, neoMatrixDom.width, neoMatrixDom.height);
362+
colorOverlay.drawImage(logo, neoMatrixDom.width / 2 - logo_width / 2 + options.ui_logo_positionX, neoMatrixDom.height / 2 - logo_height / 2 + options.ui_logo_positionY, logo_width, logo_height);
363363
}
364364

365365
switch (options.ui_clock_clock) {
@@ -378,19 +378,19 @@ window.onload = function () {
378378
}
379379

380380
function drawTextOnMask(text, x, y, scale) {
381-
mask1.font = options.ui_font_size * 5 * scale + "px neo-matrix";
382-
mask1.fillStyle = "#FFF";
383-
mask1.fillText(text, options.ui_font_size * x - font_fraction, options.ui_font_size * y + font_fraction);
381+
mask.font = options.ui_font_size * 5 * scale + "px neo-matrix";
382+
mask.fillStyle = "#FFF";
383+
mask.fillText(text, options.ui_font_size * x - font_fraction, options.ui_font_size * y + font_fraction);
384384
}
385385

386386
function drawMask() {
387-
ctx.globalCompositeOperation = 'source-over';
388-
ctx.drawImage(mask1Dom, 0, 0);
387+
neoMatrix.globalCompositeOperation = 'source-over';
388+
neoMatrix.drawImage(maskDom, 0, 0);
389389

390390
if (logo && options.ui_logo_preserveColor) {
391-
ctx.globalCompositeOperation = 'source-atop';
392-
ctx.drawImage(mask2Dom, 0, 0);
393-
ctx.globalCompositeOperation = 'source-over';
391+
neoMatrix.globalCompositeOperation = 'source-atop';
392+
neoMatrix.drawImage(colorOverlayDom, 0, 0);
393+
neoMatrix.globalCompositeOperation = 'source-over';
394394
}
395395
}
396396

@@ -411,7 +411,7 @@ window.onload = function () {
411411
else
412412
font_name = fonts[parseInt(options.ui_font_font) - 1];
413413

414-
ctx.font = options.ui_font_size + "px " + font_name;
414+
neoMatrix.font = options.ui_font_size + "px " + font_name;
415415
font_fraction = options.ui_font_size / 4;
416416

417417
updateGrid();
@@ -420,8 +420,8 @@ window.onload = function () {
420420
}
421421

422422
function updateGrid() {
423-
columns = c.width / options.ui_font_size;
424-
rows = c.height / options.ui_font_size;
423+
columns = neoMatrixDom.width / options.ui_font_size;
424+
rows = neoMatrixDom.height / options.ui_font_size;
425425
column_hue = Math.floor(360 / columns);
426426
row_hue = Math.floor(360 / rows);
427427
column_frequency = frequencyArrayLength / (columns * 2);
@@ -479,20 +479,20 @@ window.onload = function () {
479479
lightness = 100;
480480

481481
if (options.ui_color_highlightFirstCharacter) {
482-
ctx.clearRect(i * options.ui_font_size, ((drops[i][0] - 2) * options.ui_font_size) + font_fraction, options.ui_font_size, options.ui_font_size);
482+
neoMatrix.clearRect(i * options.ui_font_size, ((drops[i][0] - 2) * options.ui_font_size) + font_fraction, options.ui_font_size, options.ui_font_size);
483483

484484
var tmp = drops[i][0] - 1;
485-
ctx.fillStyle = calculateColor(i, tmp, drop_chars[i][1]);
486-
ctx.fillText(drop_chars[i][0], i * options.ui_font_size, tmp * options.ui_font_size);
485+
neoMatrix.fillStyle = calculateColor(i, tmp, drop_chars[i][1]);
486+
neoMatrix.fillText(drop_chars[i][0], i * options.ui_font_size, tmp * options.ui_font_size);
487487

488-
ctx.fillStyle = "#FFF";
488+
neoMatrix.fillStyle = "#FFF";
489489
}
490490
else
491-
ctx.fillStyle = calculateColor(i, drops[i][0], lightness);
491+
neoMatrix.fillStyle = calculateColor(i, drops[i][0], lightness);
492492

493-
ctx.clearRect(i * options.ui_font_size, ((drops[i][0] - 1) * options.ui_font_size) + font_fraction, options.ui_font_size, options.ui_font_size);
493+
neoMatrix.clearRect(i * options.ui_font_size, ((drops[i][0] - 1) * options.ui_font_size) + font_fraction, options.ui_font_size, options.ui_font_size);
494494
drop_chars[i] = [character, lightness];
495-
ctx.fillText(character, i * options.ui_font_size, drops[i][0] * options.ui_font_size);
495+
neoMatrix.fillText(character, i * options.ui_font_size, drops[i][0] * options.ui_font_size);
496496

497497
if (drops[i][0] > rows && Math.random() > probability)
498498
drops[i] = [0, 0, 0];

0 commit comments

Comments
 (0)