Skip to content

Commit dfd42a8

Browse files
IPdotSetAFIPdotSetAF
committed
added small text support (clock and message)
added font_fraction_y and x
1 parent 255697f commit dfd42a8

File tree

2 files changed

+63
-17
lines changed

2 files changed

+63
-17
lines changed

‎index.css‎

50 Bytes
Binary file not shown.

‎index.js‎

Lines changed: 63 additions & 17 deletions
Original file line numberDiff line numberDiff line change
@@ -291,9 +291,9 @@ window.onload = function () {
291291

292292
window.addEventListener('resize', function () {
293293
updateCanvasSize();
294+
updateGrid();
294295
updateMask();
295296
updateFont();
296-
updateGrid();
297297
initialAnimation();
298298
}, false);
299299

@@ -311,10 +311,10 @@ window.onload = function () {
311311
var logo = null, logos = ["ipaf", "kali-1", "kali-2", "ubuntu-1", "ubuntu-2", "windows-11", "windows-10-8", "windows-7", "visual-studio", "vs-code", "unity-1", "unity-2", "unreal", "python", "blazor", "docker", "flutter", "git", "blender", "angular", "c-sharp", "c-plus-plus", "qt"];
312312
var debug = document.getElementById("debug"), logs = [];
313313
var hour = "", minute = "";
314-
var startTime, now, then, elapsed, letters, columns, rows, drops;
314+
var startTime, now, then, elapsed, letters, columns, rows, drops, staticChars;
315315
var AudioTimeout = false, LastSoundTime = new Date(), isSilent = false, frequencyArray, frequencyArrayLength = 128, column_frequency;
316316
var column_hue, row_hue;
317-
var font_fraction;
317+
var font_offset_y, font_offset_x;
318318
var maskDom = document.getElementById("mask");
319319
var mask = maskDom.getContext("2d");
320320
var colorOverlayDom = document.getElementById("color-overlay");
@@ -389,6 +389,8 @@ window.onload = function () {
389389

390390
//MARK: Mask
391391
function updateMask() {
392+
clearStaticChars();
393+
392394
mask.globalCompositeOperation = 'source-over';
393395
mask.clearRect(0, 0, neoMatrixDom.width, neoMatrixDom.height);
394396
mask.fillStyle = "rgba(0, 0, 0, " + options.trailLength + ")";
@@ -408,32 +410,63 @@ window.onload = function () {
408410

409411
switch (options.ui_clock_clock) {
410412
case "1": {
411-
let center = [Math.floor((columns - 17 * options.ui_clock_scale) / 2), Math.floor((rows + 5 * options.ui_clock_scale) / 2)];
412-
drawTextOnMask(hour + ":" + minute, center[0] + options.ui_clock_positionX, center[1] + options.ui_clock_positionY, options.ui_clock_scale);
413+
if (options.ui_clock_scale > 0) {
414+
let center = [Math.floor((columns - 17 * options.ui_clock_scale) / 2), Math.floor((rows + 5 * options.ui_clock_scale) / 2)];
415+
drawTextOnMask(hour + ":" + minute, center[0] + options.ui_clock_positionX, center[1] + options.ui_clock_positionY, options.ui_clock_scale);
416+
} else {
417+
let center = [Math.floor((columns - 5) / 2), Math.floor(rows / 2)];
418+
drawTextOnMatrix(hour + ":" + minute, center[0] + options.ui_clock_positionX, center[1] + options.ui_clock_positionY);
419+
}
413420
break;
414421
}
415422
case "2": {
416-
let center = [Math.floor((columns - 7 * options.ui_clock_scale) / 2), Math.floor((rows + options.ui_clock_scale) / 2)];
417-
drawTextOnMask(hour + "\\n" + minute, center[0] + options.ui_clock_positionX, center[1] + options.ui_clock_positionY - 1 * options.ui_clock_scale, options.ui_clock_scale);
423+
if (options.ui_clock_scale > 0) {
424+
let center = [Math.floor((columns - 7 * options.ui_clock_scale) / 2), Math.floor((rows + options.ui_clock_scale) / 2)];
425+
drawTextOnMask(hour + "\\n" + minute, center[0] + options.ui_clock_positionX, center[1] + options.ui_clock_positionY - 1 * options.ui_clock_scale, options.ui_clock_scale);
426+
} else {
427+
let center = [Math.floor((columns - 2) / 2), Math.floor((rows - 2) / 2)];
428+
drawTextOnMatrix(hour + "\\n" + minute, center[0] + options.ui_clock_positionX, center[1] + options.ui_clock_positionY);
429+
}
418430
break;
419431
}
420432
}
421433

422434
if (options.ui_message_message) {
423-
let position = [0, 5 * options.ui_message_scale];
424-
drawTextOnMask(options.ui_message_text, position[0] + options.ui_message_positionX, position[1] + options.ui_message_positionY, options.ui_message_scale);
435+
if (options.ui_message_scale > 0) {
436+
let position = [0, 5 * options.ui_message_scale];
437+
drawTextOnMask(options.ui_message_text, position[0] + options.ui_message_positionX, position[1] + options.ui_message_positionY, options.ui_message_scale);
438+
} else
439+
drawTextOnMatrix(options.ui_message_text, options.ui_message_positionX, options.ui_message_positionY);
425440
}
426441
}
427442

428-
function drawTextOnMask(text, x, y, scale) {
429-
mask.font = options.ui_font_size * 5 * scale + "px neo-matrix";
443+
function drawTextOnMatrix(text, x, y) {
430444
mask.fillStyle = "#FFF";
431445
lines = text.split("\\n");
446+
447+
var maxChars = 0;
448+
for (let i = 0; i < lines.length; i++)
449+
if (lines[i].length > maxChars)
450+
maxChars = lines[i].length;
451+
452+
x = clamp(0, columns - maxChars, x);
453+
y = clamp(0, rows - lines.length, y);
454+
432455
for (let i = 0; i < lines.length; i++) {
433-
mask.fillText(lines[i], options.ui_font_size * x - font_fraction, options.ui_font_size * y + font_fraction + (6 * i * options.ui_font_size * scale));
456+
mask.fillRect(x * options.ui_font_size - font_offset_x, (y + i) * options.ui_font_size + font_offset_y, lines[i].length * options.ui_font_size, options.ui_font_size);
457+
for (let j = 0; j < lines[i].length; j++)
458+
staticChars[x + j][y + i + 1] = lines[i][j];
434459
}
435460
}
436461

462+
function drawTextOnMask(text, x, y, scale) {
463+
mask.font = options.ui_font_size * 5 * scale + "px neo-matrix";
464+
mask.fillStyle = "#FFF";
465+
lines = text.split("\\n");
466+
for (let i = 0; i < lines.length; i++)
467+
mask.fillText(lines[i], options.ui_font_size * x - font_offset_x, options.ui_font_size * y + font_offset_y + (6 * i * options.ui_font_size * scale));
468+
}
469+
437470
function drawMask() {
438471
neoMatrix.globalCompositeOperation = 'source-over';
439472
neoMatrix.drawImage(maskDom, 0, 0);
@@ -465,7 +498,8 @@ window.onload = function () {
465498
font_name = fonts[parseInt(options.ui_font_font) - 1];
466499

467500
neoMatrix.font = options.ui_font_size + "px " + font_name;
468-
font_fraction = options.ui_font_size / 4;
501+
font_offset_y = options.ui_font_size / 8;
502+
font_offset_x = options.ui_font_size / 16;
469503

470504
updateGrid();
471505
updateMask();
@@ -479,6 +513,16 @@ window.onload = function () {
479513
column_hue = Math.floor(360 / columns);
480514
row_hue = Math.floor(360 / rows);
481515
column_frequency = frequencyArrayLength / (columns * 2);
516+
clearStaticChars();
517+
}
518+
519+
function clearStaticChars() {
520+
staticChars = [];
521+
for (let i = 0; i < columns; i++) {
522+
staticChars[i] = [];
523+
for (let j = 0; j < rows; j++)
524+
staticChars[i][j] = null;
525+
}
482526
}
483527

484528
//MARK: Initial Animation
@@ -554,14 +598,14 @@ window.onload = function () {
554598
}
555599

556600
for (var j = 0; j < options.ui_rain_dropCount; j++) {
557-
var character = calculateCharacter(drops[i][j]);
601+
var character = calculateCharacter(drops[i][j], i);
558602
var lightness = audio_lightness;
559603

560604
if (drops[i][j][1] > 0)
561605
lightness = 100;
562606

563607
if (options.ui_color_highlightFirstCharacter) {
564-
neoMatrix.clearRect(i * options.ui_font_size, ((drops[i][j][0] - 2) * options.ui_font_size) + font_fraction, options.ui_font_size, options.ui_font_size);
608+
neoMatrix.clearRect(i * options.ui_font_size - font_offset_x, ((drops[i][j][0] - 2) * options.ui_font_size) + font_offset_y, options.ui_font_size, options.ui_font_size);
565609

566610
var tmp = drops[i][j][0] - 1;
567611
neoMatrix.fillStyle = calculateColor(i, tmp, drops[i][j][4]);
@@ -572,7 +616,7 @@ window.onload = function () {
572616
else
573617
neoMatrix.fillStyle = calculateColor(i, drops[i][j][0], lightness);
574618

575-
neoMatrix.clearRect(i * options.ui_font_size, ((drops[i][j][0] - 1) * options.ui_font_size) + font_fraction, options.ui_font_size, options.ui_font_size);
619+
neoMatrix.clearRect(i * options.ui_font_size, ((drops[i][j][0] - 1) * options.ui_font_size) + font_offset_y, options.ui_font_size, options.ui_font_size);
576620
drops[i][j][3] = character, drops[i][j][4] = lightness;
577621
neoMatrix.fillText(character, i * options.ui_font_size, drops[i][j][0] * options.ui_font_size);
578622

@@ -598,7 +642,9 @@ window.onload = function () {
598642
}
599643

600644
//MARK: Calculate Character
601-
function calculateCharacter(dropItem) {
645+
function calculateCharacter(dropItem, column) {
646+
if (staticChars[column][dropItem[0]])
647+
return staticChars[column][dropItem[0]];
602648

603649
if (Math.random() > 0.995 && dropItem[1] == 0) {
604650
dropItem[1] = Math.floor(Math.random() * options.codes.length) + 1;

0 commit comments

Comments
 (0)