dotMatrix source code

Updated: 26/9 2023
function dotMatrix(input_string, dot_color, bg_color, canvas_width, matrix_rows, matrix_cols, canId, dot_shape) {

if (!bg_color) { bg_color = "#000000"; }
if (!canvas_width) { canvas_width = 70; }
if (!matrix_rows) { matrix_rows = 7; }
if (!matrix_cols) { matrix_cols = 7; }
if (!canId) {
    uniqueId = "matrixCan";
} else {
    uniqueId = canId;
}

rainbow = false;
if (!dot_color) {
    dot_color = "#FF0000";
} else if (dot_color == "rainbow") {
    jump = 0;
    rainbow = 360 / matrix_cols;
}

dot_space = canvas_width / matrix_rows / 10;
dot_size = canvas_width / matrix_rows / 2;
matrix_grid = canvas_width / matrix_rows;
canvas_height = matrix_grid * matrix_cols;

if (dot_shape == 1 || dot_shape == 2) { xy = matrix_grid / 2; } else { xy = dot_space; }
if (dot_shape == 3) {
    square_size = canvas_width / matrix_rows + dot_space;
} else {
    square_size = canvas_width / matrix_rows - dot_space;
}

if (typeof matrixData == "undefined") {
matrixData = [
0, "0011100010001001000100100010010001001000100011100",
1, "0001000001100000010000001000000100000010000011100",
2, "0011100010001000000100000100000100000100000111110",
3, "0011100010001000000100000100000001001000100011100",
4, "0100010010001001000100111110000001000000100000010",
5, "0111110010000001000000111100000001000000100111100",
6, "0011100010001001000000111100010001001000100011100",
7, "0111110000001000000100000100000010000010000001000",
8, "0011100010001001000100011100010001001000100011100",
9, "0011100010001001000100011110000001000000100011100",
"a", "0000000001100000001000011100010010001001000011110",
"b", "0010000001000000100000011100001001000100100101100",
"c", "0000000000000000000000001100001000000100000001100",
"d", "0000100000010000001000011100010010001001000011010",
"e", "0000000000000000111000100010011111001000000011110",
"f", "0000100000101000010000011100000100000010000001000",
"g", "0000000001110001000100100010001111000000100011100",
"h", "0010000001000000100000011100001001000100100010010",
"i", "0000000000100000000000011000000100000010000011100",
"j", "0000010000000000000100000010000001000100100001100",
"k", "0010000001000000100100010100001100000101000010010",
"l", "0001000000100000010000001000000100000010000001000",
"m", "0000000000000001101100101010010101001000100100010",
"n", "0000000000000001011000110010010001001000100100010",
"o", "0000000000000000111000100010010001001000100011100",
"p", "0000000001110000100100010010001110000100000010000",
"q", "0000000001110001001000100100001110000001000000100",
"r", "0000000000000001011000110010010000001000000100000",
"s", "0000000000000000111100100000001110000000100111100",
"t", "0010000001000000100000111000001000000100100001100",
"u", "0000000000000001000100100010010001001000100011100",
"v", "0000000000000001000100100010010001000101000001000",
"w", "0000000000000001000100100010010101001010100010100",
"x", "0000000000000001000100010100000100000101000100010",
"y", "0000000000000001000100010100000100000010000001000",
"z", "0000000000000001111100000100000100000100000111110",
"æ", "0000000001100000011000011010010111001010000011110",
"ø", "0000000000000000111000100110010101001100100011100",
"å", "0001000000000000110000000100001110001001000011110",
"A", "0011100010001001000100111110010001001000100100010",
"B", "0111100010001001000100111100010001001000100111100",
"C", "0011100010001001000000100000010000001000100011100",
"D", "0111100010001001000100100010010001001000100111100",
"E", "0111110010000001000000111100010000001000000111110",
"F", "0111110010000001000000111100010000001000000100000",
"G", "0011100010001001000000101110010001001000100011100",
"H", "0100010010001001000100111110010001001000100100010",
"I", "0011100000100000010000001000000100000010000011100",
"J", "0011110000001000000100000010000001001000100011100",
"K", "0100010010010001010000110000010100001001000100010",
"L", "0100000010000001000000100000010000001000000111110",
"M", "0100010011011001010100100010010001001000100100010",
"N", "0100010010001001100100101010010011001000100100010",
"O", "0011100010001001000100100010010001001000100011100",
"P", "0111100010001001000100111100010000001000000100000",
"Q", "0011100010001001000100100010010101001001000011010",
"R", "0111100010001001000100111100010100001001000100010",
"S", "0011100010001001000000011100000001001000100011100",
"T", "0111110000100000010000001000000100000010000001000",
"U", "0100010010001001000100100010010001001000100011100",
"V", "0100010010001001000100100010010001000101000001000",
"W", "0100010010001001000100100010010101001010100010100",
"X", "0100010010001000101000001000001010001000100100010",
"Y", "0100010010001000101000001000000100000010000001000",
"Z", "0111110000001000001000001000001000001000000111110",
"Æ", "0011110010100001010000111110010100001010000101110",
"Ø", "0011101010001001001100101010011001001000101011100",
"Å", "0001000000000000111000100010011111001000100100010",
" ", "0000000000000000000000000000000000000000000000000",
"!", "0001000000100000010000001000000100000000000001000",
'"', "0010100001010000000000000000000000000000000000000",
"'", "0001000000100000000000000000000000000000000000000",
"#", "0000000001010001111100010100011111000101000000000",
".", "0000000000000000000000000000000000000010000000000",
",", "0000000000000000000000000000000000000010000010000",
":", "0000000000000000010000000000000100000000000000000",
";", "0000000000000000010000000000000100000100000000000",
"(", "0000100000100000010000001000000100000010000000100",
")", "0001000000010000001000000100000010000001000001000",
"{", "0000100000100000010000010000000100000010000000100",
"}", "0010000000100000010000000100000100000010000010000",
"<", "0000100000100000100000100000001000000010000000100",
">", "0010000000100000001000000010000010000010000010000",
"+", "0000000000100000010000111110000100000010000000000",
"-", "0000000000000000000000111110000000000000000000000",
"_", "0000000000000000000000000000000000000000001111111",
"*", "0000000010101000111000111110001110001010100000000",
"/", "0000000000001000001000001000001000001000000000000",
"=", "0000000000000000111000000000001110000000000000000",
"?", "0011100010001000001000001000000100000000000001000",
"|", "0001000000100000010000001000000100000010000001000",
"@", "0011100010001001011100101010010111001000000011100",
"&", "0000000000100000101000011000010010001001100011010",
"%", "0000000010001000001000001000001000001000100000000",
"±", "0001000000100001111100001000000100000000000111110",
"°", "0011000010010001001000011000000000000000000000000"
];
}

if (typeof input_string == "number") {
    input_string = input_string.toString();
}
str_len = input_string.length;

for (chrpos = 0; chrpos < str_len; chrpos++) {
    chr = input_string.slice(chrpos, chrpos + 1);

    canId = uniqueId + chrpos;

    var can = document.getElementById(canId);
    if (!can) {
        document.write('<canvas id="' + canId + '" width="' + canvas_width + '" height="' + canvas_height + '" style="background-color: ' + bg_color + ';"></canvas>');
        var can = document.getElementById(canId);
        var ctx = can.getContext("2d");
    } else {
        var ctx = can.getContext("2d");
        ctx.clearRect(0, 0, can.width, can.height);
    }

    srcData = matrixData.length;

    for (let i = 0; i < srcData; i = i + 2) {
        if (matrixData[i] == chr) {
        binData = i + 1;
    }
}

binPos = 0;

ctx.fillStyle = dot_color;
ctx.strokeStyle = bg_color;
ctx.lineWidth = dot_space;

for (cols = xy; cols < canvas_height; cols = cols + matrix_grid) {
    if (rainbow) {
        ctx.fillStyle = "hsl(" + jump + ", 100%, 50%)";
        jump = jump + rainbow;
    }
    for (rows = xy; rows < canvas_width; rows = rows + matrix_grid) {
        dataDots = matrixData[binData];
        dot = dataDots.slice(binPos, binPos + 1);
        if (dot == 1) {
            if (dot_shape == 1) {
                ctx.beginPath();
                ctx.moveTo(rows+xy, cols+xy);
                ctx.arc(rows, cols, dot_size, 0, 2 * Math.PI, true);
                ctx.fill();
                ctx.stroke();
            } else if (dot_shape == 2) {
                ctx.beginPath();
                ctx.moveTo(rows+xy, cols+xy);
                ctx.arc(rows, cols, dot_size, 0, 2 * Math.PI, true);
                ctx.fill();
            } else {
                ctx.moveTo(rows, cols);
                ctx.fillRect(rows, cols, square_size, square_size);
            }
        }
    binPos++;
    }
}
}
}