Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/hongbo-wei/matrix
The Matrix (green code rain)
https://github.com/hongbo-wei/matrix
canvas css hacker html javascript matrix matrix-digital-rain matrix-rain web
Last synced: 23 days ago
JSON representation
The Matrix (green code rain)
- Host: GitHub
- URL: https://github.com/hongbo-wei/matrix
- Owner: hongbo-wei
- License: mit
- Created: 2024-10-20T16:02:51.000Z (4 months ago)
- Default Branch: main
- Last Pushed: 2024-10-21T20:58:51.000Z (4 months ago)
- Last Synced: 2024-11-14T11:11:32.682Z (3 months ago)
- Topics: canvas, css, hacker, html, javascript, matrix, matrix-digital-rain, matrix-rain, web
- Language: JavaScript
- Homepage: https://hongbo-wei.github.io/matrix.html
- Size: 43.5 MB
- Stars: 1
- Watchers: 1
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
README
# matrix
**[The Matrix](https://www.imdb.com/title/tt0133093/?ref_=nv_sr_srsg_1_tt_6_nm_1_in_0_q_The%2520Matrix)**: *Matrix Digital Rain* (web-based green code rain) | [Live view of The Matrix](https://hongbo-wei.github.io/matrix.html) **click the web page** to listen to the Matrix music.
This repository contains a simple web page that simulates the famous "digital rain" effect seen in the film *The Matrix*. The effect is implemented using HTML5's `` element and JavaScript.
## Features
- Full-screen canvas that dynamically adjusts to the browser window.
- Digital rain effect with a continuous stream of binary numbers (`0` and `1`), rendered in a Matrix-like green colour.
- Smooth animation with cascading symbols that reset randomly, creating a dynamic and scattered visual.
## Demo
The digital rain effect can be viewed in any modern web browser. To run the project locally:
1. Clone this repository.
```bash
git clone https://github.com/hongbo-wei/matrix.git
```
2. Open the `index.html` file in any browser.
## File Structure
- **index.html**: The main HTML file that sets up the structure of the web page and includes the necessary resources.
- **matrix.css**: Contains the basic styling for the web page, including the black background and canvas reset.
- **matrix.js**: JavaScript file that generates and animates the matrix digital rain effect.
- **MatrixIconSimple.png**: An optional favicon to give the web page a Matrix-themed icon.
## Code Overview
### HTML (`index.html`)
The HTML file defines a basic structure with a full-screen `` element and includes external resources such as the CSS and JavaScript files.
### CSS (`matrix.css`)
The CSS ensures that the canvas fills the entire screen and has a black background. All margins and padding are reset for consistent rendering across browsers.
### JavaScript (`matrix.js`)
This is where the digital rain effect is generated:
- **Canvas Setup**: The canvas is made full-screen by setting its height and width to match the window's dimensions.
- **Matrix Characters**: The characters used in the rain are `0` and `1`, representing binary digits.
- **Animation**: Each column on the canvas has a "drop" of characters that cascades down the screen. Once a drop reaches the bottom, it resets at the top to create the continuous falling effect. Randomness is added to the drop resets for a scattered appearance.
- **Interval**: The `draw()` function is executed repeatedly at a set interval (35 milliseconds) to animate the rain.
## Credits
- Original code by **[Boujjou Achraf](https://www.linkedin.com/in/achrafboujjou/)** and adaptation by **[Hongbo Wei](https://github.com/hongbo-wei/)**.
- Canvas setup by **[Boujjou Achraf](https://www.linkedin.com/in/achrafboujjou/)**.
## License
This project is licensed under the MIT License.
---
Enjoy the Matrix-like digital rain! 01
**Play ground**
[Hongbo's CodenPen](https://codepen.io/hongbo-wei)
