Showcase Matrix Rain Program #1003

ordo-n · 2025-01-12T18:16:51Z

ordo-n
Jan 12, 2025

Here is a matrix code program, see if you can improve it

<!DOCTYPE html>
<html lang="en">

<head>
	<meta charset="UTF-8">
	<meta name="viewport" content="width=device-width, initial-scale=1.0">
	<title>Matrix Code Animation</title>
	<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/jquery.terminal/2.35.0/css/jquery.terminal.min.css">
	<style>
	body {
		margin: 0;
		background: black;
		color: green;
		overflow: hidden;
	}

	.terminal {
		font-family: monospace;
		font-size: 14px;
	}
	</style>
</head>

<body>
	<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
	<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery.terminal/2.35.0/js/jquery.terminal.min.js"></script>
	<script>
	$(document).ready(function() {
		// Initialize jQuery Terminal
		$('body').terminal(function(command) {
			// Placeholder for terminal commands, leave empty for animation
		}, {
			greetings: '',
			prompt: '',
			name: 'matrix'
		});
		const term = $('body').terminal();
                const cols = parseInt(term.width() / 10); //60;
                const rows = parseInt(term.height() / 10); /// 30;
		const lines = Array.from({
			length: cols
		}, () => Math.floor(Math.random() * rows));
		const lineLengths = Array.from({
			length: cols
		}, () => Math.floor(Math.random() * 11) + 5); // Random heights 5-15
		// Generate a random Japanese Katakana character
		function getRandomCharacter() {
			const katakanaStart = 0x30A0;
			const katakanaEnd = 0x30FF;
			return String.fromCharCode(Math.floor(Math.random() * (katakanaEnd - katakanaStart + 1)) + katakanaStart);
		}
		// Create a single frame of the Matrix animation
		function drawMatrix() {
			let frame = Array.from({
				length: rows
			}, () => Array(cols).fill("\u3000"));
			for(let x = 0; x < cols; x++) {
				for(let i = 0; i < Math.min(lineLengths[x], rows); i++) {
					const row = (lines[x] - i + rows) % rows;
					if(row >= 0 && row < rows && x >= 0 && x < cols) {
						frame[row][x] = getRandomCharacter();
					}
				}
				lines[x] = (lines[x] + 1) % rows;
			}
			// Echo the entire frame at once
			term.clear();
			term.echo(frame.map(line => `[[gb;lime;]${line.join('')}]`).join('\n'), {
				raw: false
			});
		}
		// Animation loop
		setInterval(drawMatrix, 1);
	});
	</script>
</body>

</html>

jcubic · 2025-01-12T19:15:09Z

jcubic
Jan 12, 2025
Maintainer

I'm not gonna fix your code, if you want me to work for you, you can pay for paid support.

Unless you have an issue with the library.

0 replies

ordo-n · 2025-01-16T21:34:06Z

ordo-n
Jan 16, 2025
Author

Sorry I didn't mean it like that. I believe that a showcase piece for jquery terminal is a good matrix rain code program. I'm not saying it has to be a part of the library but it would nice for the community to have so i posted here on discussions.

I have made further progress with it, sadly this isnt complete code this time as I'm using another library with jquery terminal to have programs that can parse arguments and print help files. I got fullscreen working, but for some reason term.cols() and term.rows() is not working in this new version and I have to divide it to keep it from printing too many columns and rows.

let cols = 60;
            if (this.program.opts().columns)
                cols = parseInt(this.program.opts().columns);
            let rows = 30;
            if (this.program.opts().rows)
                rows = parseInt(this.program.opts().rows);
            let interval = 1;
            if (this.program.opts().interval)
                interval = parseInt(this.program.opts().interval);

            let minInterval = 5
            if(interval < minInterval)
                interval = minInterval;


            let colour = "#B8E986";
            if(this.program.opts().colour)
                colour = ensureHexColor(this.program.opts().colour, colour);

            if (this.program.opts().fullscreen) {
                fullScreen = true;
                cols = parseInt( term.cols() /2.4 );
                rows = parseInt(term.rows()/1.35- 1); // Subtract 1 to avoid scrolling
            }

            if (cols < 1 || rows < 1) {
                term.error('Invalid dimensions. Columns and rows must be greater than 0.');
                return 1;
            }

            let lineMin = Math.max(1, Math.min(3, Math.floor(rows / 10)));
            let lineMax = Math.max(lineMin + 1, Math.min(Math.floor(rows / 2), rows - 1));

            const lineLengths = Array.from({length: cols}, () =>
                Math.floor(Math.random() * (lineMax - lineMin + 1)) + lineMin
            );
            const lines = Array.from({length: cols}, () => Math.floor(Math.random() * rows));

            function getRandomCharacter() {
                const katakanaStart = 0x30A0;
                const katakanaEnd = 0x30FF;
                return String.fromCharCode(
                    Math.floor(Math.random() * (katakanaEnd - katakanaStart + 1)) + katakanaStart
                );
            }

            function drawMatrix() {

                if (fullScreen) {
                    cols = parseInt( term.cols() /2.4 );
                    rows = parseInt(term.rows()/1.35- 1); // Subtract 1 to avoid scrolling
                }

                const frame = Array.from({length: rows}, () => Array(cols).fill("\u3000"));

                for (let x = 0; x < cols; x++) {
                    for (let i = 0; i < lineLengths[x]; i++) {
                        const row = (lines[x] + i) % rows;
                        frame[row][x] = getRandomCharacter();
                    }

                    lines[x] = (lines[x] + 1) % rows;
                }

                term.clear();

                frame.forEach(line => {
                    const trimmedLine = line.slice(0, cols).join(''); // Limit to `cols` characters
                    const formattedLine = `<span style="color:`+colour+`;">${trimmedLine}</span>`;
                    term.echo(formattedLine, { raw: true });
                });
                
                if (typeof term === 'undefined' || !term) {
                    clearInterval(matrixInterval);
                }
            }

            let matrixInterval = setInterval(drawMatrix.bind(fullScreen), interval);
            term.pause(true);

            return 0;

Edit: because of the default styling of jquery terminal it looks better with no line spacing;

    <style>
        html, body {
            margin: 0;
            padding: 0;
            height: 100%;
            background-color: black;
            overflow: hidden;
        }

        #terminal {
            width: 100%;
            height: 100%;
            font-family: monospace;
            font-size: 16px; /* Adjust as needed */
            line-height: 1; /* Ensures no extra vertical spacing */
            letter-spacing: 0; /* Ensures no extra horizontal spacing */
        }

    </style>
    ```

0 replies

ordo-n · 2025-01-16T22:42:15Z

ordo-n
Jan 16, 2025
Author

0 replies

ordo-n · 2025-01-16T22:50:14Z

ordo-n
Jan 16, 2025
Author

0 replies

ordo-n · 2025-01-16T23:31:24Z

ordo-n
Jan 16, 2025
Author

I'm really pleased that jquery terminal is performing well with this program, the gif looks slow but it's actually very fast

1 reply

jcubic Jan 17, 2025
Maintainer

Discussions is not a good place to share your code. If you want to showcase it, you can create a CodePen demo, that I can add to the collection: https://codepen.io/collection/LPjoaW

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Showcase Matrix Rain Program #1003

{{title}}

{{editor}}'s edit

{{editor}}'s edit

Replies: 5 comments 1 reply

{{title}}

{{title}}

{{editor}}'s edit

{{editor}}'s edit

{{title}}

{{title}}

{{title}}

{{title}}

Select a reply

Showcase Matrix Rain Program #1003

ordo-n Jan 12, 2025

Replies: 5 comments · 1 reply

jcubic Jan 12, 2025 Maintainer

ordo-n Jan 16, 2025 Author

ordo-n Jan 16, 2025 Author

ordo-n Jan 16, 2025 Author

ordo-n Jan 16, 2025 Author

jcubic Jan 17, 2025 Maintainer

ordo-n
Jan 12, 2025

Replies: 5 comments 1 reply

jcubic
Jan 12, 2025
Maintainer

ordo-n
Jan 16, 2025
Author

ordo-n
Jan 16, 2025
Author

ordo-n
Jan 16, 2025
Author

ordo-n
Jan 16, 2025
Author

jcubic Jan 17, 2025
Maintainer