"use client"; // Must be client, extensive use of client only functions in react import { useCallback, useEffect, useRef, useState } from "react"; import { useSourceCode } from "@/src/lib/SourceCodeContextProvider"; /** * @property {boolean} autoRun True to run app on load * @property {number} fontSize Size of font in pixels * @property {number} fps Frames per second of animation * @property {number} alpha 0->1 level of alpha for fade * @property {number} variabilityOfStart 0->1 * @property {number} numberOfColumnOverlaps Number of drops of code per column * @property {number} changeCharacterFrequency How many frames run before a character changes * @property {number} changeCharacterDuration How many characters after start should continue changing * @property {number} frequencyOfRandomCellsInColumns 0->1 Frequency of random cell columns * @property {number} numberOfRandomCellsInColumns Number of random cells that change per column */ type DigitalRainOptions = { autoRun?: boolean; fontSize?: number; fps?: number; alpha?: number; variabilityOfStart?: number; numberOfColumnOverlaps?: number; changeCharacterFrequency?: number; changeCharacterDuration?: number; frequencyOfRandomCellsInColumns?: number; numberOfRandomCellsInColumns?: number; }; /** * Default Component properties incase they are not supplied */ const staticDefaultComponentProps: Required = { autoRun: true, fontSize: 16, fps: 30, alpha: 0.02, variabilityOfStart: 0.98, numberOfColumnOverlaps: 2, changeCharacterFrequency: 4, changeCharacterDuration: 15, frequencyOfRandomCellsInColumns: 1, numberOfRandomCellsInColumns: 6, }; /** * React node that runs the digital rain mini app * * @param {DigitalRainOptions} componentProps The component properties * @returns React.ReactNode */ export default function DigitalRain( componentProps: Readonly = {} ) { // Merge provided props with defaults const mergedProps = { ...staticDefaultComponentProps, ...componentProps }; //Default animation options provided from React Node const { autoRun, ...defaultAnnimationOptions } = mergedProps; //Default display items are all hidden const defaultDisplayItems = { systemFailure: false, animationOptionsDefault: false, animationOptions: false, help: false, helpHelp: false, }; // Create all references const canvasRef = useRef(null); const inputRef = useRef(null); const animationRef = useRef(null); const effectRef = useRef(null); // Set states for application const [isRunning, setIsRunning] = useState(false); const [firstRunComplete, setFirstRunComplete] = useState(false); const [isVisible, setIsVisible] = useState(autoRun); const [inputOpen, setInputOpen] = useState(false); const [inputValue, setInputValue] = useState("~ % "); const [displayItems, setDisplayItems] = useState(defaultDisplayItems); const [animationOptions, setAnimationOptions] = useState( defaultAnnimationOptions ); // Use context provider to display source code outside this ReactNode const { displaySourceCode, hideSourceCode } = useSourceCode(); // Set default CSS Properties for display items const centreBoxStyle: React.CSSProperties = { position: "fixed", top: "50%", left: "50%", transform: " translate(-50%, -50%)", color: "#0aff0a", fontFamily: "monospace", fontSize: animationOptions.fontSize, padding: "0.5em", backgroundColor: "#000", border: "2px solid #0aff0a", }; // Update one field in the state const optionChange = (field: string, value: number) => { setAnimationOptions((prevState) => { return { ...prevState, [field]: value }; }); }; // Update display items, set all others to false by default const displayItemChange = (item: string, show: boolean) => { setDisplayItems((prevState) => { for (const key in prevState) { if (key === item) { // Set specific item to input value, true or false prevState[key as keyof typeof prevState] = show; } else { // Set all others to false prevState[key as keyof typeof prevState] = false; } } return prevState; }); }; // Set all display items to false const displayItemClear = () => { setDisplayItems(defaultDisplayItems); }; // Annimation function as callback const startAnimation = useCallback(() => { // Get the canvas reference and 2d context and verify they exist if (canvasRef.current === null) return; const canvas = canvasRef.current; const ctx = canvas.getContext("2d"); if (ctx === null) return; // Unpack the FPS from all other animation options passed to the Effect object constructor const { fps, ...allOptions } = animationOptions; // Animation variables let lastTime = 0; // divide 1000 as ms is base time in JS/TS const nextFrame = 1000 / fps; let timer = 0; // Set the effect object as a reference variable so it can be referenced outside this callback effectRef.current = new Effect({ canvasWidth: canvas.width, canvasHeight: canvas.height, ...allOptions, }); // Animation function runs each animation cycle in JS. Runs more frequently than the FPS function animate(timeStamp: number) { // Verify context, canvas and effect.current if (ctx === null || canvas === null || effectRef.current === null) return; // Set some global styles to the context ctx.textAlign = "center"; ctx.font = effectRef.current.fontSize + "px monospace"; // Get the difference between last time and current time stamp const deltaTime = timeStamp - lastTime; // Set last time to current time lastTime = timeStamp; // If timer has passed the frame rate limit draw() the next frame if (timer > nextFrame) { // Draw the next frame effectRef.current.draw(ctx); // Reset timer timer = 0; } else { // incease the timer by the delta timer += deltaTime; } // set the current request frame to the animation ref so it can be used outside this callback animationRef.current = requestAnimationFrame(animate); } // Start the animation animate(0); setIsRunning(true); //Provide the annimation options to the callback }, [animationOptions]); // Stop animation does what it says const stopAnimation = () => { // If we have an animation ref if (animationRef.current !== null) { // cancell the animation frame cancelAnimationFrame(animationRef.current); // remove the animation ref animationRef.current = null; // set running to false setIsRunning(false); } }; // Clear the canvas of all annimation drawings const clearAnimation = () => { // Validate the canvas ref and 2d context if (canvasRef.current === null) return; const canvas = canvasRef.current; const ctx = canvas.getContext("2d"); if (ctx === null) return; // Clear the entire canvas ctx.clearRect(0, 0, canvas.width, canvas.height); }; // Effect to handle the canvas size and resizing window useEffect(() => { // Validate the canvas ref and if (canvasRef.current === null) return; const canvas = canvasRef.current; // Set the canvas to fit the entire window canvas.width = window.innerWidth; canvas.height = window.innerHeight; // Function to handle window resize const handleResize = () => { // Validate the canvas ref and the effect ref if (canvasRef.current === null || effectRef.current === null) return; const canvas = canvasRef.current; // Set the canvas to fit the entire window canvas.width = window.innerWidth; canvas.height = window.innerHeight; // Update the Effect object with the resize method effectRef.current.resize(canvas.width, canvas.height); }; // Add the handler to the resize event window.addEventListener("resize", handleResize); return () => { // remove the event listner and stop and clear the animation on cleanup window.removeEventListener("resize", handleResize); }; // Make the animation restart on any of the following changes }, []); // Effect handles first run of the annimation and changes to annimation options useEffect(() => { // If the ReactNode is set to Auto run then run the animation on first load if (autoRun && !isRunning && !firstRunComplete) { startAnimation(); setFirstRunComplete(true); } else if (isRunning) { // if the annimation is running already then // there is an update to the annimation options // run the animation again. stopAnimation(); clearAnimation(); startAnimation(); } }, [firstRunComplete, isRunning, startAnimation, autoRun]); // Handle when enter or escape is pressed on the input element const handleInputKeyDown = (ev: React.KeyboardEvent) => { // Validate input ref const input = inputRef.current; if (!input) return; // Enter to submit the input code if (ev.key === "Enter") { input.blur(); handleInput(); } // Escape hides the input if (ev.key === "Escape") { input.blur(); } }; //Handle the input and verify the code is correct before calling the function const handleInput = () => { // Validate the input ref const input = inputRef.current; if (!input) return; // Get the value, must match ~ % to be valid const value = input.value.match(/^~ % (.*)$/i); // Trim the values[1] of all head and tail white space const trimmedValue = value && value[1].trim(); // If no valid input found reset the input and end here if (!trimmedValue) { setInputValue("~ % "); return; } // Validate the command using regex .test switch (true) { // Quit command case /^quit$/i.test(trimmedValue): // if running, stop animation if (isRunning) { stopAnimation(); } // hide the code, clear the animation, hide all items setIsVisible(false); clearAnimation(); displayItemClear(); // Set the input to default setInputValue("~ % "); break; // SYSTEM FAILURE command case /^system failure$/i.test(trimmedValue): // if running, stop animation if (isRunning) { stopAnimation(); // display the SYSTEM FAILURE item displayItemChange("systemFailure", true); } // Set the input to default setInputValue("~ % "); break; // set command for option case /^set/i.test(trimmedValue): setOptionCommand(trimmedValue); // Set the input to default setInputValue("~ % "); break; // Show command for show item case /^show/i.test(trimmedValue): showItemCommand(trimmedValue); // Set the input to default setInputValue("~ % "); break; // Help command case /^help$/i.test(trimmedValue): displayItemChange("help", true); // Set the input to default setInputValue("~ % "); break; // HELP HELP command case /^HELP HELP$/.test(trimmedValue): displayItemChange("helpHelp", true); // Set the input to default setInputValue("~ % "); break; // Hide command case /^hide$/i.test(trimmedValue): displayItemClear(); hideSourceCode(); // Set the input to default setInputValue("~ % "); break; // Dipsplay the source code case /^sauce$/i.test(trimmedValue): // call context function to display source code in other ReactNode displaySourceCode(); //Stop the annimation if (isRunning) { stopAnimation(); } // Hide the entire annimation and all items setIsVisible(false); displayItemClear(); clearAnimation(); // Set the input to default setInputValue("~ % "); break; // Reset command to reset all annimation options, starts animation again case /^reset$/i.test(trimmedValue): setAnimationOptions(defaultAnnimationOptions); // Set the input to default setInputValue("~ % "); break; // Run command starts the animation again case /^run$/i.test(trimmedValue): // call context function to hide the source code in other ReactNode hideSourceCode(); // Start the animation if (!isRunning) { // Clear display items displayItemClear(); // Make sure code is visible setIsVisible(true); // start the animation startAnimation(); } // Set the input to default setInputValue("~ % "); break; // Any input that isn't matched just clear default: // Set the input to default setInputValue("~ % "); break; } }; // Function sets the animation option if valid const setOptionCommand = (option: string) => { // Split out all input commands const [command, key, value, ...other] = option.split(" "); // if there are too many inputs, no command, no key, no value end here if (other.length > 0 || !command || !key || !value) return; // Check if command is `set` if (/^set$/.test(command) === false) return; // Check if key existis on animationOptions object and // returns if it doesn't if (!Object.keys(animationOptions).includes(key)) return; // Parse the input to a number const parsedValue = parseInt(value, 10); // If not a number end here if (isNaN(parsedValue)) return; // All checked, now you can change the value optionChange(key, parsedValue); }; // Function sets which item to display if valid const showItemCommand = (item: string) => { // Split out all input commands const [command, value, ...other] = item.split(" "); // if there are too many inputs, no command, no value end here if (other.length > 0 || !command || !value) return; // Check if command is `show` if (/^show$/.test(command) === false) return; // Check if key existis on animationOptions object and // returns if it doesn't if (!Object.keys(displayItems).includes(value)) return; // All checked, now show the item displayItemChange(value, true); }; // Effect used to adjust the width of the input to match the text useEffect(() => { // Validate input ref const input = inputRef.current; if (!input) return; // Create measuring span element and hide it const measureSpan = document.createElement("span"); measureSpan.style.visibility = "hidden"; measureSpan.style.position = "absolute"; measureSpan.style.whiteSpace = "pre"; measureSpan.style.fontFamily = "monospace"; measureSpan.style.fontSize = `${animationOptions.fontSize}px`; document.body.appendChild(measureSpan); // Update width function function updateWidth() { // Validate input ref if (!input) return; // Use input value or placeholder measureSpan.textContent = input.value || "x"; // Get width of element const textWidth = measureSpan.getBoundingClientRect().width; // Add padding (1em) to the text width + border width const paddingWidth = animationOptions.fontSize * 1; // 0.5em on each side const borderWidth = 4; //4px for border width // Apply widths to input input.style.width = `${textWidth + paddingWidth + borderWidth}px`; } // Initial adjustment updateWidth(); // Add event listeners input.addEventListener("input", updateWidth); return () => { // Remove event listner and measurement span on cleanup input.removeEventListener("input", updateWidth); document.body.removeChild(measureSpan); }; }, [animationOptions.fontSize, inputRef, inputOpen]); // Effect used to detect ~ key on the entire window useEffect(() => { // function for key down handling const handleKeyDown = (ev: KeyboardEvent) => { // Check if input is open and ~ is pressed then open input if (ev.key === "~" && !inputOpen) { setInputOpen(true); } }; // Add event listner to entire window window.addEventListener("keydown", handleKeyDown); return () => { // Remove event listner on cleanup window.removeEventListener("keydown", handleKeyDown); }; }, [inputOpen]); // Effect is used focus the input on opening, // seperate and with 0 sec delay due to strange behaviour in some browsers useEffect(() => { // Timer reference for clean up let timer: number; //Validate input ref const input = inputRef.current; if (inputOpen && input) { // Use setTimeout to ensure the DOM has updated timer = window.setTimeout(() => { // Focus the input and set cursor to end by default input.focus(); input.setSelectionRange(input.value.length, input.value.length); }, 0); } return () => { // Clear the timer just in case on cleanup clearTimeout(timer); }; }, [inputOpen, inputRef]); // Output the ReactNode HTML return ( <> {/* Div to encompas entire window for digital rain effect */}

{/* SYSTEM FAILURE ITEM */} {displayItems.systemFailure && (

SYSTEM FAILURE

)} {/* Default animation options item */} {displayItems.animationOptionsDefault && (

{Object.keys(defaultAnnimationOptions).map((key) => { return ( ); })}

{key}

{ defaultAnnimationOptions[ key as keyof typeof defaultAnnimationOptions ] }

)} {/* Current animation options item */} {displayItems.animationOptions && (

{Object.keys(animationOptions).map((key) => { return ( ); })}

{key}

{animationOptions[key as keyof typeof animationOptions]}

)} {/* Joke help menu item */} {displayItems.help && (

THERE IS NO HELP!

)} {/* Actual help menu item */} {displayItems.helpHelp && (

Usage:

~ % run	Run the digital rain code
~ % help	Display message "THERE IS NO HELP!"
~ % HELP HELP	Display this current menu
~ % set <option> <value>	Set specific annimation <option>
~ % show <item>	Show specific dialogue <item>
~ % show animationOptions	Show current set animation options
~ % show animationOptionsDefault	Show default set animation options that are set when ~ % reset command is used
~ % hide	Hide any open dialogue <item>
~ % reset	Reset all animation options to default
~ % quit	Quit the code
~ % system failure	Cause system to fail!

)} {/* The canvas element used to draw the digital rain */}

{/* The code input element, outside the div and can be displayed even when the animation isn't visible */} setInputOpen(false)} value={inputValue} onKeyDown={handleInputKeyDown} onChange={(ev) => setInputValue(ev.currentTarget.value)} style={{ outline: "none", minWidth: "1px", color: "#0aff0a", fontFamily: "monospace", fontSize: animationOptions.fontSize, position: "fixed", display: inputOpen ? "inherit" : "none", top: "50%", left: "50%", transform: " translate(-50%, -50%)", padding: "0.5em", backgroundColor: "#000", border: "2px solid #0aff0a", zIndex: 9999999, }} /> ); } /** * Symbol class represents 1 symbol on the page */ class Symbol { x: number; y: number; fontSize: number; text: string; characters: string; alpha: number; changeCharacterFrequency: number; changeCharacterDuration: number; constructor( x: number, y: number, fontSize: number, alpha: number, changeCharacterFrequency: number, changeCharacterDuration: number ) { // The dictionaries of characters we will use const kanji = "日"; const katakana = "ﾊﾐﾋｰｳｼﾅﾓﾆｻﾜﾂｵﾘｱﾎﾃﾏｹﾒｴｶｷﾑﾕﾗｾﾈｽﾀﾇﾍ"; // "アァカサタナハマヤャラワガザダバパイィキシチニヒミリヰギジヂビピウゥクスツヌフムユュルグズブヅプエェケセテネヘメレヱゲゼデベペオォコソトノホモヨョロヲゴゾドボポヴッン"; const latin = "ABCDEFGHIJKLMNOPQRSTUVWXYZç"; const nums = "0123456789"; const symbols = ':・."=*+-<>!@#$%&?*♠♣♥♦★☎☹☺☯☮♻♚♛♜♝♞♟𓃾'; this.characters = kanji + katakana + latin + nums; //Mulitply the characters so that symbols make up only small percentage this.characters += this.characters; // x2 this.characters += this.characters; // x4 this.characters += this.characters; // x8 // Symbols are only 1 eighth as likely to appear as any other character this.characters += symbols; // Set all inputs to the local properties this.x = x; this.y = y; this.fontSize = fontSize; this.text = ""; this.alpha = alpha; this.changeCharacterFrequency = changeCharacterFrequency; this.changeCharacterDuration = changeCharacterDuration; } /** * Draws a frame for each symbol upon call based on the objects input parameters * * @param {CanvasRenderingContext2D} ctx The canvas context used to draw the symbol * @param {number} currentCell The current active cell in the column for the purpose of the rain drop * @param {boolean} changeCharacter Whether the character should change at the input change rate or remain static */ draw( ctx: CanvasRenderingContext2D, currentCell: number = 0, changeCharacter: boolean = false ) { // If drawing the current cell in the column, or the symbol is a change character // and we have reached the frequency of change number // get a random character from the set dicitonary of characters if ( currentCell === this.y || (changeCharacter && currentCell % this.changeCharacterFrequency === 0) ) { // Random character selection this.text = this.characters.charAt( Math.floor(Math.random() * this.characters.length) ); } // Set color based on whether it's the first frame if (currentCell === this.y) { // fill the cell with black background ctx.fillStyle = `rgb(0,0,0)`; ctx.fillRect( (this.x - 0.5) * this.fontSize, (this.y - 1) * this.fontSize, this.fontSize, this.fontSize ); // Set first character to white ctx.fillStyle = "#FFF"; // Draw the character drawFlippedCharacter( ctx, this.text, this.x * this.fontSize, this.y * this.fontSize ); } else if (currentCell === this.y + 1) { // If cell is 1 after the current cell draw green // Set the character to green ctx.fillStyle = "#0aff0a"; // Draw the symbol drawFlippedCharacter( ctx, this.text, this.x * this.fontSize, this.y * this.fontSize ); } else if ( // CHANGE CHARACTER DRAW changeCharacter && // if the symbol is set to change character, and currentCell > this.y && // it's more than 2 after the current cell, and currentCell < this.y + this.changeCharacterDuration && // current cell is isn't further ahead than changeCharacterDuration and currentCell % this.changeCharacterFrequency === 0 // the current change frequency count has been met ) { // Draw a change character // fill the cell with black background ctx.fillStyle = `rgb(0,0,0)`; ctx.fillRect( (this.x - 0.5) * this.fontSize, (this.y - 1) * this.fontSize, this.fontSize, this.fontSize ); // Set the character to green ctx.fillStyle = "#0aff0a"; // Draw the symbol drawFlippedCharacter( ctx, this.text, this.x * this.fontSize, this.y * this.fontSize ); } else { // All remaining cells behind and infront of current // Draw over with a rectangle of black at set alpha amount ctx.fillStyle = `rgba(0, 0, 0, ${this.alpha})`; ctx.fillRect( (this.x - 0.5) * this.fontSize, (this.y - 1) * this.fontSize, this.fontSize, this.fontSize ); } } } /** * Column class represents a column of symbols */ class Column { x: number; fontSize: number; canvasHeight: number; alpha: number; variabilityOfStart: number; changeCharacterFrequency: number; changeCharacterDuration: number; frequencyOfRandomCellsInColumns: number; numberOfRandomCellsInColumns: number; currentCell: number; symbols: Array; randomCells: Array | null; constructor( x: number, fontSize: number, canvasHeight: number, alpha: number, variabilityOfStart: number, changeCharacterFrequency: number, changeCharacterDuration: number, frequencyOfRandomCellsInColumns: number, numberOfRandomCellsInColumns: number ) { // Set all inputs to local properties this.x = x; this.fontSize = fontSize; this.canvasHeight = canvasHeight; this.alpha = alpha; this.variabilityOfStart = variabilityOfStart; this.changeCharacterFrequency = changeCharacterFrequency; this.changeCharacterDuration = changeCharacterDuration; this.frequencyOfRandomCellsInColumns = frequencyOfRandomCellsInColumns; this.numberOfRandomCellsInColumns = numberOfRandomCellsInColumns; this.currentCell = 0; this.symbols = []; this.randomCells = []; //Run private initialiser method this.#initialiser(); } /** * Private function to initialise the column */ #initialiser() { // calculate the canvas height and number of require symbols in the column for (let i = 0; i < this.canvasHeight / this.fontSize + 1; i++) { // Set to 1 more than the height divided by font size for a slight overlap // add the Symbol Object to the column this.symbols[i] = new Symbol( this.x, i, // the Y coordinate this.fontSize, this.alpha, this.changeCharacterFrequency, this.changeCharacterDuration ); } } /** * Draws a frame for each column upon call based on the objects input parameters * * @param {CanvasRenderingContext2D} ctx The canvas context used to draw the symbol */ draw(ctx: CanvasRenderingContext2D) { // Loop over all symbols in column this.symbols.forEach((symbol, i) => { // If there are random cells in the column and the current cell is a random cell if (this.randomCells !== null && this.randomCells.includes(i)) { // Trigger the Symbols draw method and mark it's character for randomisation symbol.draw(ctx, this.currentCell, true); } else { // Trigger the Symbols draw method symbol.draw(ctx, this.currentCell, false); } }); // If the if the current cell is beyond the edge of the canvas // And a random number is triggered (variabilityOfStart) // Reset the column if ( this.currentCell * this.fontSize > this.canvasHeight && Math.random() > this.variabilityOfStart ) { // Set current cell as 0 this.currentCell = 0; // Generate a new alotment of random cells or none at all this.randomCells = getRandomNumbersOrNull( this.frequencyOfRandomCellsInColumns, this.symbols.length, this.numberOfRandomCellsInColumns ); } else { // Otherwise progress the current cell by 1 this.currentCell += 1; } } } /** * Effect class represents the effect of the digital rain in it's entirety * All columns are contained within this class and all symbols are contained in each column */ class Effect { canvasWidth: number; canvasHeight: number; fontSize: number; alpha: number; variabilityOfStart: number; numberOfColumnOverlaps: number; changeCharacterFrequency: number; changeCharacterDuration: number; frequencyOfRandomCellsInColumns: number; numberOfRandomCellsInColumns: number; columns: Array; constructor({ canvasWidth, canvasHeight, fontSize, alpha, variabilityOfStart, numberOfColumnOverlaps, changeCharacterFrequency, changeCharacterDuration, frequencyOfRandomCellsInColumns, numberOfRandomCellsInColumns, }: { canvasWidth: number; canvasHeight: number; fontSize: number; alpha: number; variabilityOfStart: number; numberOfColumnOverlaps: number; changeCharacterFrequency: number; changeCharacterDuration: number; frequencyOfRandomCellsInColumns: number; numberOfRandomCellsInColumns: number; }) { // Set all inputs to local properties this.canvasWidth = canvasWidth; this.canvasHeight = canvasHeight; this.fontSize = fontSize; this.alpha = alpha; this.variabilityOfStart = variabilityOfStart; this.numberOfColumnOverlaps = numberOfColumnOverlaps; this.changeCharacterFrequency = changeCharacterFrequency; this.changeCharacterDuration = changeCharacterDuration; this.frequencyOfRandomCellsInColumns = frequencyOfRandomCellsInColumns; this.numberOfRandomCellsInColumns = numberOfRandomCellsInColumns; this.columns = []; //Run private initialiser method this.#initialiser(); } /** * Private function to initialise the effect */ #initialiser() { // Loop over the number of overlaps of columns, how many drops per collumn for (let j = 0; j < this.numberOfColumnOverlaps; j++) { // Calculate the width of the window based on font size and create a column for each for (let i = 0; i < this.canvasWidth / this.fontSize; i++) { // Add the column to the array, not numbered as we have overlaps this.columns.push( new Column( i, // X axis this.fontSize, this.canvasHeight, this.alpha, this.variabilityOfStart, this.changeCharacterFrequency, this.changeCharacterDuration, this.frequencyOfRandomCellsInColumns, this.numberOfRandomCellsInColumns ) ); } } } /** * Draws a frame for the effect based on the objects input parameters * * @param {CanvasRenderingContext2D} ctx The canvas ctx used to draw the symbol */ draw(ctx: CanvasRenderingContext2D) { // Trigger each columns draw method this.columns.forEach((column) => column.draw(ctx)); } /** * Function used to recalculate the entire effect based on new canvas size * * @param {number} width The width of the new canvas to be resized to * @param {number} height The height of the new canvas to be resized to */ resize(width: number, height: number) { // Set inputs this.canvasWidth = width; this.canvasHeight = height; // Clear columns this.columns = []; //Run private initialiser method this.#initialiser(); } } /** * Function generates an array of random numbers of random length or an empty array * * @param {number} probabilityOfNumber 0->1 How likely to return numbers as oposed to empty * @param {number} multiplier The upper limit of the numbers, 255 would be 0->255 * @param {number} maxLength The maximum length of the array of numbers * * @returns Array of numbers or empty array */ function getRandomNumbersOrNull( probabilityOfNumber: number = 1, multiplier: number = 1, maxLength: number = 1 ): Array { if (Math.random() > probabilityOfNumber) { return []; } else { const length = Math.floor(Math.random() * maxLength) + 1; const array: Array = []; for (let i = 0; i < length; i++) { array.push(Math.floor(Math.random() * multiplier)); } return array; } } /** * Function draws characters flipped horizontally * * Takes the canvas context, flips it about the x axis (horizontally) * draws the character, then flips the ctx back. * * @param {CanvasRenderingContext2D} ctx The canvas context used to draw the symbol * @param {string} text The text to be drawn * @param {number} x The x coordinate of the text * @param {number} y The y coordinate of the text */ function drawFlippedCharacter( ctx: CanvasRenderingContext2D, text: string, x: number, y: number ) { ctx.save(); // Save current state ctx.scale(-1, 1); // Flip horizontally ctx.fillText(text, -x, y); // Draw text (adjust x position) ctx.restore(); // Restore original state }

Digital Rain

How to use