DOCSEARCHbyAlgolia
Submit Docs

Matrix

repository·master·Indexed 25 days ago

https://github.com/rezmason/matrix

A web-based implementation of the 'green code rain' effect from the Matrix film franchise. Built using WebGL (via REGL) and WebGPU, it supports various visual modes (2D, 3D, cinematic variants) and customizable effects such as mirror, image, and pride flags via URL parameters. The project also includes implementations for Playdate hardware in C and Lua.

Tokens
3.9K
Snippets
7
Records
17
Agent score
83%

What's inside rezmason-matrix

  1. Customize the Matrix effect via URL parameters

    master

    You can customize the digital rain by appending URL variables to the base URL (https://rezmason.github.io/matrix/). Use a ? to start the query string and chain parameters using &.

    Example of a customized URL: https://rezmason.github.io/matrix/?numColumns=100&fallSpeed=-0.1&slant=200&glyphRotation=180

    https://rezmason.github.io/matrix/?numColumns=100&fallSpeed=-0.1&slant=200&glyphRotation=180

  2. Customize Matrix effect via URL parameters

    master

    You can personalize the Matrix effect by appending query parameters to the URL. Common customization options include:

    • Variants: Use version to switch between different modes (e.g., version=3d, version=resurrections, version=nightmare, version=paradise, version=trinity, version=operator, version=megacity, version=morpheus, version=bugs, version=holoplay).
    • Colors:
      • Pride flag colors: effect=pride
      • Trans flag colors: effect=trans
      • Custom stripes: effect=stripes&stripeColors=R,G,B,R,G,B... (comma-separated RGB values).
      • Custom palette: palette=R,G,B,%,R,G,B,%,... (comma-separated RGB and opacity values).
    • Visual Effects:
      • Mirror mode: effect=mirror (add camera=true for camera support).
      • Custom image: effect=image&url=URL_TO_IMAGE.
      • Debug view: effect=none (disables effects).
    • Behavior:
      • Skip intro: skipIntro=false (starts from a blank screen).

  3. Run Matrix locally using a web server

    master

    Matrix is a web-based implementation that runs in the browser. It can be served using any HTTP/HTTPS server without additional setup. If you are on a Mac or Linux system, you can serve a local copy of the project using Python's built-in HTTP server.

    cd /path/to/the/project ; python3 -m http.server

  4. Initialize the Matrix effect

    master
    The Matrix effect is initialized by loading the main.js entrypoint, which automatically creates a canvas and appends it to the document body. The effect can be configured via URL search parameters. The engine selects between a WebGPU renderer or a regl (WebGL) renderer based on browser support and the renderer configuration value.

  5. Initialize the Matrix effect via eventHandler

    master

    When the kEventInit event is received in the eventHandler, the following setup steps are performed:

    1. Assign the PlaydateAPI pointers to local global pointers (snd, gfx, sys, disp).
    2. Set the display refresh rate to 30 FPS using disp->setRefreshRate(30).
    3. Reset the system elapsed time using sys->resetElapsedTime().
    4. Register the main update loop using sys->setUpdateCallback(update, NULL).
    5. Call the internal init() function to load assets and prepare the cell grid.

  6. Troubleshoot performance issues in Chrome

    master
    If you experience serious performance issues in Chrome, ensure that hardware acceleration is enabled in your browser settings. If disabled, Chrome falls back to SwiftShader (a software renderer), which significantly slows down the simulation.

  7. Configure the 'stripes' effect colors

    master

    When using effect=stripes, you can define the colors of the vertical stripes by providing alternating R,G,B numeric values in the stripeColors parameter.

    https://rezmason.github.io/matrix/?effect=stripes&stripeColors=1,0,0,1,1,0,0,1,0

  8. Configure the 'image' effect with a custom URL

    master

    To use the image effect, set effect=image and provide a URL to an image in the url parameter.

    https://rezmason.github.io/matrix/?effect=image&url=https://upload.wikimedia.org/wikipedia/commons/f/f5/EagleRock.jpg

  9. Configure the 'palette' effect colors

    master

    When using the palette effect, you can specify colors and their placement along the color grade using alternating R,G,B,% numeric values in the palette parameter.

    https://rezmason.github.io/matrix/?palette=0.1,0,0.2,0,0.2,0.5,0,0.5,1,0.7,0,1

  10. Configure the Matrix effect via URL parameters

    master

    The Matrix effect accepts configuration through URL search parameters. These parameters are processed by makeConfig.

    Key configuration options include:

    • renderer: Specifies the rendering engine. Supported values include webgpu (if the browser supports WebGPU) or regl (default/fallback).
    • suppressWarnings: A boolean flag to hide hardware acceleration warnings (e.g., when running on SwiftShader).

  11. Reference: Matrix customization URL parameters

    master

    The following parameters can be used to customize the Matrix simulation via URL variables:

    - `version` - the version of the Matrix to simulate. Default is "classic".
  - "classic"
  - "3d"
  - "megacity"
  - "operator"
  - "nightmare"
  - "paradise"
  - "resurrections"
  - "palimpsest"
- `skipIntro` - whether or not to start from a blank screen. Can be "true" or "false", default is *true*.
- `font` - the set of glyphs to draw. Current options are "matrixcode", "resurrections", "gothic", "coptic", "huberfishA", and "huberfishD".
- `numColumns` - the number of columns (and rows) to draw. Default is 80.
- `glyphFlip` - when set to "true", this flips the glyphs. Default is "false".
- `glyphRotation` - the angle to rotate the glyphs in-place, in degrees. Default is 0.
- `volumetric` - when set to "true", this renders the glyphs with depth, slowly approaching the eye. Default is "false".
- `density` - the number of 3D raindrops to draw, proportional to the default. Default is 1.0.
- `forwardSpeed` - the rate at which the 3D raindrops approach. Default is 1.0.
- `slant` - the angle that the 2D raindrops fall, in degrees. Default is 0.
- `bloomSize` - the glow quality, from 0 to 1. Default is 0.4.
- `bloomStrength` - the glow intensity, from 0 to 1. Default is 0.7.
- `ditherMagnitude` - the amount to randomly darken pixels, to conceal banding. Default is 0.05.
- `resolution` - the image size, relative to the window size. Default is 1.
- `raindropLength` - the vertical scale of "raindrops" in the columns.
- `animationSpeed` - the overall speed of the animation.
- `fallSpeed` - the speed of the rain's descent.
- `cycleSpeed` - the speed that the glyphs change their symbol.
- `effect` - alternatives to the default post-processing effect. Can be "plain", "pride", "stripes", "none", "image" or "mirror".
- `camera` - some effects, ie the mirror effect, optionally support webcam input. Can be "true" or "false". Default is false.
- `stripeColors` - if you set the effect to "stripes", you can specify the colors of vertical stripes as alternating *R,G,B* numeric values.
- `palette` — with the normal "palette" effect, you can specify the colors and placement of the colors along the color grade as alternating *R,G,B,%* numeric values.
- `backgroundColor`, `cursorColor`, `glintColor` — other *R,G,B* values that apply to the corresponding parts of the effect.
- `paletteHSL`, `stripeHSL`, `backgroundHSL`, `cursorHSL`, and `glintHSL` — the same as the above, except they use *H,S,L* (hue, saturation, lightness) instead of *R,G,B*.
- `cursorIntensity` — the brightness of cursors' glow. Default is 2.0.
- `glintIntensity` — the brightness of glint glow. Default is 1.0.
- `url` - if you set the effect to "image", this is how you specify which image to load.
- `loops` - (WIP) if set to "true", this causes the effect to loop.
- `fps` — the framerate of the effect. Default is 60.
- `suppressWarnings` - if set to "true", this suppresses any warnings that would otherwise appear.

  12. Reference Matrix URL parameter options

    master

    The following query parameters can be used to customize the Matrix experience via the URL:

    ParameterDescription
    versionSets the visual mode (e.g., 3d, resurrections, nightmare, paradise, trinity, operator, megacity, morpheus, bugs, holoplay)
    effectSets the visual effect (e.g., mirror, pride, trans, stripes, image, none)
    stripeColorsComma-separated list of RGB values for effect=stripes
    paletteComma-separated list of RGB and opacity values for custom color palettes
    urlThe URL of an image to use when effect=image
    cameraBoolean to enable/disable camera in mirror mode
    skipIntroBoolean to control whether the intro animation is skipped
    salt(Implicitly used in some variants)