Create

Matrix Digital Rain - xelsed.ai

This sketch creates a classic Matrix-style digital rain effect where columns of characters cascade down the screen at varying speeds. Each stream has a bright "head" character with a glowing effect, followed by dimmer trailing characters that fade as they descend, creating the iconic cyberpunk aesthetic on a pure black background.

Open in Editor Remix View in Gallery

🎓 Concepts You'll Learn

Animation loopClasses and objectsArray iterationRandom number generationCanvas 2D contextText renderingGlow effectsWindow resizingOpacity and colorModulo operator

🔄 Code Flow

Code flow showing setup, draw, windowresized, recalcsymbolsize, initstreams, stream, matrixsymbol

💡 Click on function names in the diagram to jump to their code

graph TD start[Start] --> setup[setup] setup --> draw[draw loop] draw --> semi-transparent-bg[semi-transparent-bg] draw --> stream-loop[stream-loop] stream-loop --> stream-creation-loop[stream-creation-loop] stream-creation-loop --> constructor[constructor] constructor --> speed-randomization[speed-randomization] speed-randomization --> symbol-creation-loop[symbol-creation-loop] symbol-creation-loop --> constructor-symbol[constructor-symbol] constructor-symbol --> random-symbol-selection[random-symbol-selection] constructor-symbol --> position-update[position-update] position-update --> wrapping-logic[wrapping-logic] wrapping-logic --> character-switching[character-switching] character-switching --> head-glow[head-glow] head-glow --> tail-glow[tail-glow] tail-glow --> render-loop[render-loop] render-loop --> stream-loop click setup href "#fn-setup" click draw href "#fn-draw" click semi-transparent-bg href "#sub-semi-transparent-bg" click stream-loop href "#sub-stream-loop" click stream-creation-loop href "#sub-stream-creation-loop" click constructor href "#sub-constructor" click speed-randomization href "#sub-speed-randomization" click symbol-creation-loop href "#sub-symbol-creation-loop" click constructor-symbol href "#sub-constructor-symbol" click random-symbol-selection href "#sub-random-symbol-selection" click position-update href "#sub-position-update" click wrapping-logic href "#sub-wrapping-logic" click character-switching href "#sub-character-switching" click head-glow href "#sub-head-glow" click tail-glow href "#sub-tail-glow" click render-loop href "#sub-render-loop"

📝 Code Breakdown

setup()

setup() runs once when the sketch starts. It initializes the canvas, sets up text properties, and creates the initial streams. The monospace font is crucial for maintaining neat vertical columns.

function setup() {
  createCanvas(windowWidth, windowHeight);
  frameRate(60);
  background(0);

  // Choose a monospaced look for nice columns
  textFont('monospace');
  recalcSymbolSize();
  textSize(symbolSize);
  textAlign(LEFT, TOP); // so y is the top of each glyph

  initStreams();
}

Line by Line:

createCanvas(windowWidth, windowHeight)
Creates a canvas that fills the entire browser window, making the effect fullscreen
frameRate(60)
Sets the animation to run at 60 frames per second for smooth motion
background(0)
Fills the canvas with pure black (0 in grayscale), the classic Matrix background
textFont('monospace')
Sets the font to monospace so all characters have equal width, creating neat columns
recalcSymbolSize()
Calls a helper function to calculate an appropriate character size based on screen width
textSize(symbolSize)
Applies the calculated character size to all text that will be drawn
textAlign(LEFT, TOP)
Aligns text so the y-coordinate represents the top of each character, making positioning easier
initStreams()
Creates all the vertical character streams that will cascade down the screen

draw()

draw() runs 60 times per second (set by frameRate). The key to the Matrix effect is the semi-transparent background—instead of clearing the canvas completely, we overlay a slightly transparent black, which makes characters fade naturally as they fall.

function draw() {
  // Semi-transparent black to create fading trails
  // background(v, alpha): https://p5js.org/reference/#/p5/background
  background(0, 150);

  for (let stream of streams) {
    stream.render();
  }
}

🔧 Subcomponents:

function-call Semi-transparent Background background(0, 150)

Creates fading trails by drawing a semi-transparent black overlay each frame instead of clearing completely

for-loop Stream Rendering Loop for (let stream of streams) { stream.render(); }

Iterates through all character streams and renders each one

Line by Line:

background(0, 150)
Draws a semi-transparent black rectangle (alpha=150) over the entire canvas. This doesn't completely erase the previous frame, so characters fade gradually as new semi-transparent layers stack on top
for (let stream of streams)
Loops through each Stream object in the streams array using a for-of loop
stream.render()
Calls the render() method on each stream, which updates and draws all its characters

windowResized()

windowResized() is a special p5.js function that automatically runs whenever the browser window is resized. This ensures the Matrix effect adapts gracefully to different screen sizes.

function windowResized() {
  resizeCanvas(windowWidth, windowHeight);
  background(0);
  recalcSymbolSize();
  textSize(symbolSize);
  initStreams();
}

Line by Line:

resizeCanvas(windowWidth, windowHeight)
Adjusts the canvas size to match the new browser window dimensions when the user resizes
background(0)
Clears the canvas with black to prevent visual artifacts when resizing
recalcSymbolSize()
Recalculates the character size based on the new window width
textSize(symbolSize)
Updates the text size to the newly calculated value
initStreams()
Recreates all streams with the correct number of columns for the new canvas width

recalcSymbolSize()

This function makes the sketch responsive. On a wide monitor, characters are larger; on a phone, they're smaller. The constrain() function is a safety net that prevents extreme values.

function recalcSymbolSize() {
  // Adapt character size to screen width; clamp to usable range
  symbolSize = floor(width / 40);
  symbolSize = constrain(symbolSize, 14, 32);
}

🔧 Subcomponents:

calculation Width-Based Size Calculation symbolSize = floor(width / 40)

Calculates character size as 1/40th of the screen width, scaled down to an integer

function-call Size Constraint symbolSize = constrain(symbolSize, 14, 32)

Ensures the character size stays between 14 and 32 pixels, preventing it from being too small or too large

Line by Line:

symbolSize = floor(width / 40)
Divides the canvas width by 40 to get a proportional character size, then floor() rounds it down to a whole number
symbolSize = constrain(symbolSize, 14, 32)
Uses constrain() to limit symbolSize to a minimum of 14 and maximum of 32, ensuring readable characters on any screen size

initStreams()

This function creates the grid structure. Each column gets its own Stream object that manages all the falling characters in that vertical line. The spacing is calculated so columns are evenly distributed across the screen.

// Create all vertical streams of characters
function initStreams() {
  streams = [];
  const columns = floor(width / symbolSize);

  for (let i = 0; i < columns; i++) {
    const x = i * symbolSize;
    streams.push(new Stream(x));
  }
}

🔧 Subcomponents:

calculation Column Count Calculation const columns = floor(width / symbolSize)

Determines how many vertical columns of characters can fit across the canvas width

for-loop Stream Creation Loop for (let i = 0; i < columns; i++) { ... }

Creates one Stream object for each column position

Line by Line:

streams = []
Resets the streams array to empty, clearing any previous streams
const columns = floor(width / symbolSize)
Calculates how many columns fit horizontally by dividing canvas width by character size
for (let i = 0; i < columns; i++)
Loops from 0 to the number of columns minus 1
const x = i * symbolSize
Calculates the x-position for this column by multiplying the column index by character size
streams.push(new Stream(x))
Creates a new Stream object at position x and adds it to the streams array

Stream (class)

The Stream class manages a vertical column of falling characters. Each stream has its own speed for depth effect, and the opacity gradient (bright head, dim tail) creates the iconic Matrix look. The symbols are positioned above the canvas initially so they smoothly enter from the top.

class Stream {
  constructor(x) {
    this.x = x;
    // Different speeds per stream for depth effect
    this.speed = random(3, 12);
    this.symbols = [];

    this.createSymbols();
  }

  createSymbols() {
    const totalSymbols = floor(random(8, 25));
    const startY = random(-height, 0);

    let y = startY;
    for (let i = 0; i < totalSymbols; i++) {
      const isHead = (i === 0); // bottom of the stream is the "head"
      // Brighter towards the bottom (head)
      const opacity = map(i, 0, totalSymbols - 1, 255, 60);
      const symbol = new MatrixSymbol(this.x, y, this.speed, isHead, opacity);
      this.symbols.push(symbol);
      y -= symbolSize; // move upward for the next symbol in this stream
    }
  }

  render() {
    for (let s of this.symbols) {
      s.render();
      s.update();
    }
  }
}

🔧 Subcomponents:

function-call Constructor constructor(x) { ... }

Initializes a new Stream with an x position, random speed, and creates its symbols

calculation Speed Randomization this.speed = random(3, 12)

Assigns each stream a different speed between 3 and 12 pixels per frame for visual variety

for-loop Symbol Creation Loop for (let i = 0; i < totalSymbols; i++) { ... }

Creates multiple MatrixSymbol objects stacked vertically to form the stream

calculation Opacity Gradient const opacity = map(i, 0, totalSymbols - 1, 255, 60)

Maps symbol position to opacity, making the head bright (255) and tail dim (60)

for-loop Render Loop for (let s of this.symbols) { s.render(); s.update(); }

Updates and draws each symbol in the stream

Line by Line:

this.x = x
Stores the column's x-position so all symbols in this stream know where to draw
this.speed = random(3, 12)
Assigns a random speed between 3 and 12 pixels per frame, making streams fall at different rates
this.symbols = []
Creates an empty array that will hold all MatrixSymbol objects in this stream
this.createSymbols()
Calls the method that populates the symbols array with initial characters
const totalSymbols = floor(random(8, 25))
Randomly decides how many characters will be in this stream (between 8 and 25)
const startY = random(-height, 0)
Positions the top of the stream above the visible canvas (negative y) for smooth entry
const isHead = (i === 0)
Marks the first symbol (i=0) as the head, which will be brightest and have the strongest glow
const opacity = map(i, 0, totalSymbols - 1, 255, 60)
Maps each symbol's position to an opacity value: first symbol is 255 (fully opaque), last is 60 (dim)
y -= symbolSize
Moves upward for the next symbol, creating a vertical stack from top to bottom

MatrixSymbol (class)

MatrixSymbol represents a single falling character. The key features are: (1) it falls at a constant speed, (2) it randomly changes characters at intervals for a flickering effect, (3) it wraps around when it falls off-screen, and (4) it uses Canvas 2D shadow effects to create the iconic green glow, with the head being brighter than the tail.

class MatrixSymbol {
  constructor(x, y, speed, isHead, opacity) {
    this.x = x;
    this.y = y;
    this.speed = speed;
    this.isHead = isHead;
    this.opacity = opacity;

    // How often this symbol changes its character
    this.switchInterval = floor(random(2, 20));
    this.value = '';
    this.setToRandomSymbol();
  }

  setToRandomSymbol() {
    // Mix of Japanese Katakana-like chars and ASCII
    const charPool =
      'ｱｲｳｴｵｶｷｸｹｺｻｼｽｾｿﾀﾁﾂﾃﾄﾅﾆﾇﾈﾉﾊﾋﾌﾍﾎﾏﾐﾑﾒﾓﾔﾕﾖﾗﾘﾙﾚﾛﾜﾝ' +
      '0123456789' +
      'ABCDEFGHIJKLMNOPQRSTUVWXYZ' +
      '@#$%&';
    const index = floor(random(charPool.length));
    this.value = charPool.charAt(index);
  }

  update() {
    this.y += this.speed;

    // Wrap back to above the top when we pass the bottom
    if (this.y > height + symbolSize) {
      this.y = random(-200, 0);
    }

    // Randomly change character over time
    if (frameCount % this.switchInterval === 0) {
      this.setToRandomSymbol();
    }
  }

  render() {
    push();

    // Use the underlying Canvas 2D context for glow
    // drawingContext: https://p5js.org/reference/#/p5/drawingContext
    const ctx = drawingContext;

    if (this.isHead) {
      // Brighter, more intense glow for the head
      ctx.shadowBlur = 18;
      ctx.shadowColor = 'rgba(180, 255, 180, 0.9)';
      fill(180, 255, 180, this.opacity);
    } else {
      // Slightly dimmer green with softer glow
      ctx.shadowBlur = 10;
      ctx.shadowColor = 'rgba(0, 255, 70, 0.6)';
      fill(0, 255, 70, this.opacity);
    }

    noStroke();
    text(this.value, this.x, this.y);

    // Reset shadow so it doesn't leak into other drawings
    ctx.shadowBlur = 0;
    ctx.shadowColor = 'rgba(0,0,0,0)';

    pop();
  }
}

🔧 Subcomponents:

function-call Constructor constructor(x, y, speed, isHead, opacity) { ... }

Initializes a single character with position, speed, brightness, and other properties

calculation Random Symbol Selection const index = floor(random(charPool.length)); this.value = charPool.charAt(index)

Picks a random character from the pool of Katakana, numbers, letters, and symbols

calculation Position Update this.y += this.speed

Moves the character downward each frame by its speed value

conditional Wrapping Logic if (this.y > height + symbolSize) { this.y = random(-200, 0); }

Resets the character to above the canvas when it falls off the bottom

conditional Character Switching if (frameCount % this.switchInterval === 0) { this.setToRandomSymbol(); }

Changes the character at regular intervals for a flickering effect

conditional Head Glow Effect if (this.isHead) { ctx.shadowBlur = 18; ... }

Applies a brighter color and stronger glow to the head character

conditional Tail Glow Effect } else { ctx.shadowBlur = 10; ... }

Applies a dimmer color and softer glow to trailing characters

Line by Line:

this.x = x
Stores the horizontal position (column) where this character will always draw
this.y = y
Stores the vertical position, which will change each frame as the character falls
this.speed = speed
Stores the falling speed inherited from the parent Stream
this.isHead = isHead
Boolean flag: true if this is the brightest character at the bottom of the stream
this.switchInterval = floor(random(2, 20))
Determines how many frames pass before this character randomly changes to a new one
const charPool = 'ｱｲｳ...'
A string containing all possible characters: half-width Katakana, digits, uppercase letters, and symbols
const index = floor(random(charPool.length))
Picks a random index between 0 and the length of charPool
this.value = charPool.charAt(index)
Retrieves the character at that index and stores it in this.value
this.y += this.speed
Moves the character down by adding its speed value to its y position
if (this.y > height + symbolSize)
Checks if the character has fallen below the visible canvas
this.y = random(-200, 0)
Resets the character above the canvas with random positioning for natural re-entry
if (frameCount % this.switchInterval === 0)
Uses modulo to check if the current frame number is divisible by switchInterval, triggering a character change
const ctx = drawingContext
Accesses the underlying Canvas 2D context to apply glow effects that p5.js doesn't directly support
ctx.shadowBlur = 18
Sets the blur radius of the glow effect to 18 pixels for the head (stronger glow)
ctx.shadowColor = 'rgba(180, 255, 180, 0.9)'
Sets the glow color to bright green with high opacity for the head
fill(180, 255, 180, this.opacity)
Sets the text color to bright green, using the character's opacity value
text(this.value, this.x, this.y)
Draws the character at its current position
ctx.shadowBlur = 0
Resets the glow effect to prevent it from affecting other drawings

📦 Key Variables

streams array

Holds all Stream objects, one for each vertical column of falling characters

let streams = [];
symbolSize number

Stores the current character size in pixels, calculated based on screen width and constrained between 14-32

let symbolSize = 20;

🧪 Try This!

Experiment with the code by making these changes:

  1. Change the symbolSize calculation in recalcSymbolSize() from 'width / 40' to 'width / 60' to make characters smaller and fit more columns on screen. See how it affects the density of the rain.
  2. Modify the charPool string in setToRandomSymbol() to include only numbers and letters (remove Katakana and symbols). Observe how the visual feel changes without the Japanese characters.
  3. In the Stream constructor, change the speed range from 'random(3, 12)' to 'random(1, 5)' to make all streams fall much slower, creating a more relaxed Matrix effect.
  4. In MatrixSymbol's render() method, change the head glow color from 'rgba(180, 255, 180, 0.9)' to 'rgba(0, 255, 255, 0.9)' to make the brightest characters cyan instead of green.
  5. Modify the opacity mapping in Stream's createSymbols() from 'map(i, 0, totalSymbols - 1, 255, 60)' to 'map(i, 0, totalSymbols - 1, 255, 20)' to make the tail characters even dimmer.
  6. Change the background alpha in draw() from 150 to 200 to make trails fade faster, or to 100 to make them persist longer. This dramatically affects the visual effect.
Open in Editor & Experiment →

🔧 Potential Improvements

Here are some ways this code could be enhanced:

PERFORMANCE MatrixSymbol.setToRandomSymbol()

The charPool string is recreated every time this method is called (potentially many times per frame). This is wasteful memory allocation.

💡 Move charPool to a global constant outside the class: const CHAR_POOL = 'ｱｲｳ...'; Then use CHAR_POOL.charAt(index) instead. This creates the string only once.

BUG MatrixSymbol.update()

The character wrapping uses 'random(-200, 0)' which can place characters far above the visible area, creating visible gaps in the rain effect.

💡 Change to 'this.y = -symbolSize' to place wrapped characters just above the canvas top, ensuring continuous rain without gaps.

STYLE Stream.createSymbols()

The comment says 'bottom of the stream is the "head"' but the code creates symbols from top to bottom (y -= symbolSize), which is confusing.

💡 Clarify the comment to explain that the first symbol (i===0) is created at startY and becomes the 'head' as it falls downward, or rename isHead to isBrightest for clarity.

FEATURE Global scope

There's no way to pause/resume the animation or adjust speed interactively.

💡 Add a paused variable and check it in draw(). Add keyboard controls: if (key === ' ') paused = !paused; to toggle with spacebar. Also allow arrow keys to adjust frameRate dynamically.

BUG MatrixSymbol.render()

The shadow reset uses 'rgba(0,0,0,0)' but should use a proper transparent value. Some browsers may not handle this correctly.

💡 Use ctx.shadowColor = 'transparent'; or ctx.shadowBlur = 0; ctx.shadowOffsetX = 0; ctx.shadowOffsetY = 0; for more reliable cross-browser compatibility.

Explore More

p5js AI Cloud IDE

Create your own sketches with AI assistance

Gallery

Browse more creative coding examples

User Guide

Learn how to use p5js AI Cloud IDE

Preview

Matrix Digital Rain - xelsed.ai - p5.js creative coding sketch preview
Sketch Preview
Code flow diagram showing the structure of Matrix Digital Rain - xelsed.ai - Code flow showing setup, draw, windowresized, recalcsymbolsize, initstreams, stream, matrixsymbol
Code Flow Diagram