diff options
Diffstat (limited to '_site/poc/matrix-digital-rain/index.html')
| -rw-r--r-- | _site/poc/matrix-digital-rain/index.html | 148 |
1 files changed, 148 insertions, 0 deletions
diff --git a/_site/poc/matrix-digital-rain/index.html b/_site/poc/matrix-digital-rain/index.html new file mode 100644 index 0000000..dfcc274 --- /dev/null +++ b/_site/poc/matrix-digital-rain/index.html @@ -0,0 +1,148 @@ +<!DOCTYPE html> +<html> + <head> + <meta charset="utf-8"> + <title>The Matrix digital rain</title> + + <head> + <meta charset="utf-8"> + <meta name="viewport" content="width=device-width, initial-scale=1"> + <title>The Matrix digital rain</title> + <link rel="stylesheet" href="/assets/css/main.css"> + <link rel="stylesheet" href="/assets/css/skeleton.css"> +</head> + + + + </head> + <body> + + <div id="nav-container" class="container"> + <ul id="navlist" class="left"> + + <li > + <a href="/" class="link-decor-none">hme</a> + </li> + <li > + <a href="/log/" class="link-decor-none">log</a> + </li> + <li class="active"> + <a href="/poc/" class="link-decor-none">poc</a> + </li> + <li > + <a href="/about/" class="link-decor-none">abt</a> + </li> + <li><a href="/feed.xml" class="link-decor-none">rss</a></li> + </ul> +</div> + + + + <main> + <div class="container"> + <div class="container-2"> + <h2 class="center" id="title">THE MATRIX DIGITAL RAIN</h2> + <h6 class="center">12 JANUARY 2024</h5> + <br> + <div class="twocol justify"><p>“All I see is blonde, brunette, red head.” The iconic digital rain from The +Matrix in C, with zero dependencies—not even ncurses.</p> + +<video style="max-width:100%;" controls="" poster="poster.png"> + <source src="matrix.mp4" type="video/mp4" /> +</video> + +<h2 id="overview">Overview</h2> + +<p>This is my fork of Domsson’s beautiful <a href="https://github.com/domsson/fakesteak" class="external" target="_blank" rel="noopener noreferrer">Fakesteak</a>. While going through his code, I +wondered what it would take to faithfully recreate the original Matrix from the +first movie without sacrificing its minimalism.</p> + +<p>My implementation supports:</p> + +<ul> + <li>Unicode characters.</li> + <li>24-bit RGB colors (truecolor).</li> + <li>Glitches in the matrix.</li> + <li>Ghosting effect of old monochrome CRT displays.</li> + <li>Closely resembles the Matrix seen in the background during Neo and Cypher’s +conversation.</li> +</ul> + +<p>With no dependencies, compilation is trivial:</p> + +<div class="language-plaintext highlighter-rouge"><div class="highlight"><pre class="highlight"><code>$ cc -O3 main.c -o matrix +$ ./matrix +</code></pre></div></div> + +<h2 id="how-does-it-work">How does it work?</h2> + +<p>The program tracks the state of the terminal, such as code points, background +and foreground colors, and cursor position, using multiple internal data +buffers. On each frame, it updates these buffers and repaints the screen using +ANSI escape codes:</p> + +<div class="language-plaintext highlighter-rouge"><div class="highlight"><pre class="highlight"><code>static void term_print(const matrix *mat, size_t row, size_t col) +{ + size_t idx; + idx = mat_idx(mat, row, col); + wprintf(L"\x1b[%d;%dH\x1b[38;2;%d;%d;%dm%lc", + row, col, + mat->rgb[idx].color[R], + mat->rgb[idx].color[G], + mat->rgb[idx].color[B], + mat->code[idx]); +} +</code></pre></div></div> + +<p>The ghosting effect is achieved by carefully scaling the RGB +channels before mixing them:</p> + +<div class="language-plaintext highlighter-rouge"><div class="highlight"><pre class="highlight"><code>static void mat_shade(matrix *mat, size_t row, size_t col) +{ + unsigned char *color; + color = mat->rgb[mat_idx(mat, row, col)].color; + color[R] = color[R] - (color[R] - COLOR_BG_RED) / 2; + color[G] = color[G] - (color[G] - COLOR_BG_GRN) / 2; + color[B] = color[B] - (color[B] - COLOR_BG_BLU) / 2; +} +</code></pre></div></div> + +<p>The ghosting function emulates the dim after glow by gradually transitioning +each raindrop’s color towards the background color. This approach provides two +key benefits: straightforward color configuration that integrates naturally +with (Unix) ricing and high-fidelity recreation of the Matrix aesthetic.</p> + +<h2 id="customization">Customization</h2> + +<p>While you can alter almost every aspect, including speed, glitch frequency, and +rain density, the most common customizations are the color scheme and character +set.</p> + +<p>There are three color settings: head, tail, and background. You can configure +them using <code class="language-plaintext highlighter-rouge">COLOR_*_RED</code>, <code class="language-plaintext highlighter-rouge">COLOR_*_GRN</code>, and <code class="language-plaintext highlighter-rouge">COLOR_*_BLU</code> definitions found in +main.c.</p> + +<p>The <code class="language-plaintext highlighter-rouge">UNICODE_MIN</code> and <code class="language-plaintext highlighter-rouge">UNICODE_MAX</code> values control the Unicode block used. For +example, setting them to <code class="language-plaintext highlighter-rouge">0x30A1</code> and <code class="language-plaintext highlighter-rouge">0x30F6</code> rains Katakana, if a font that +supports Katakana is present on the system:</p> + +<p><img style="width: 100%;" src="katakana.png" /></p> + +<p>Files: <a href="source.tar.gz">source.tar.gz</a></p> +</div> + <p class="post-author right">by W. D. Sadeep Madurange</p> + </div> + </div> + </main> + + <div class="footer"> + <div class="container"> + <div class="twelve columns right container-2"> + <p id="footer-text">© ASCIIMX - 2025</p> + </div> + </div> +</div> + + + </body> +</html> |