{"id":1530,"date":"2025-10-07T19:25:09","date_gmt":"2025-10-07T19:25:09","guid":{"rendered":"https:\/\/ninquiet.com\/?p=1530"},"modified":"2025-10-07T19:25:10","modified_gmt":"2025-10-07T19:25:10","slug":"vfx-matrix-code-rain","status":"publish","type":"post","link":"https:\/\/ninquiet.com\/index.php\/2025\/10\/07\/vfx-matrix-code-rain\/","title":{"rendered":"VFX &#8211; Matrix Code Rain"},"content":{"rendered":"\n<p>Here is a little preview of an effect created to give the feeling of matrix trainning code, is a single shader<br><br>For the random changing text, I&#8217;ve created a texture with random text, organized on a grid with perfect distnaces between each other<br><\/p>\n\n\n\n<figure class=\"wp-block-image size-full is-resized\"><img loading=\"lazy\" decoding=\"async\" width=\"489\" height=\"530\" src=\"https:\/\/ninquiet.com\/wp-content\/uploads\/2025\/10\/image-1.png\" alt=\"\" class=\"wp-image-1532\" style=\"width:840px;height:auto\" srcset=\"https:\/\/ninquiet.com\/wp-content\/uploads\/2025\/10\/image-1.png 489w, https:\/\/ninquiet.com\/wp-content\/uploads\/2025\/10\/image-1-277x300.png 277w\" sizes=\"(max-width: 489px) 100vw, 489px\" \/><\/figure>\n\n\n\n<p>Then, by adding a constant offset on Y, and moving a little X on fixed values (using floor node to keep the values fixed) I was able to have a changing letters effect:<\/p>\n\n\n\n<figure class=\"wp-block-image size-large\"><img loading=\"lazy\" decoding=\"async\" width=\"1024\" height=\"236\" src=\"https:\/\/ninquiet.com\/wp-content\/uploads\/2025\/10\/image-2-1024x236.png\" alt=\"\" class=\"wp-image-1533\" srcset=\"https:\/\/ninquiet.com\/wp-content\/uploads\/2025\/10\/image-2-1024x236.png 1024w, https:\/\/ninquiet.com\/wp-content\/uploads\/2025\/10\/image-2-300x69.png 300w, https:\/\/ninquiet.com\/wp-content\/uploads\/2025\/10\/image-2-768x177.png 768w, https:\/\/ninquiet.com\/wp-content\/uploads\/2025\/10\/image-2.png 1126w\" sizes=\"(max-width: 1024px) 100vw, 1024px\" \/><\/figure>\n\n\n\n<figure class=\"wp-block-image size-large is-resized\"><img decoding=\"async\" src=\"https:\/\/i.gyazo.com\/3d93344e50a5bfc4e6e09c7c2c52ea15.gif\" alt=\"\" style=\"width:840px;height:auto\"\/><\/figure>\n\n\n\n<p>Then, I&#8217;ve created simple texture of falling lines, where the tip is specially bright, and tilled them making them an inffinite pattern<\/p>\n\n\n\n<figure class=\"wp-block-image size-full is-resized\"><img loading=\"lazy\" decoding=\"async\" width=\"483\" height=\"545\" src=\"https:\/\/ninquiet.com\/wp-content\/uploads\/2025\/10\/image-3.png\" alt=\"\" class=\"wp-image-1534\" style=\"width:840px;height:auto\" srcset=\"https:\/\/ninquiet.com\/wp-content\/uploads\/2025\/10\/image-3.png 483w, https:\/\/ninquiet.com\/wp-content\/uploads\/2025\/10\/image-3-266x300.png 266w\" sizes=\"(max-width: 483px) 100vw, 483px\" \/><\/figure>\n\n\n\n<p>And using some of the already calculated logic before, I added some movement<\/p>\n\n\n\n<figure class=\"wp-block-image size-full\"><img loading=\"lazy\" decoding=\"async\" width=\"950\" height=\"749\" src=\"https:\/\/ninquiet.com\/wp-content\/uploads\/2025\/10\/image.png\" alt=\"\" class=\"wp-image-1531\" srcset=\"https:\/\/ninquiet.com\/wp-content\/uploads\/2025\/10\/image.png 950w, https:\/\/ninquiet.com\/wp-content\/uploads\/2025\/10\/image-300x237.png 300w, https:\/\/ninquiet.com\/wp-content\/uploads\/2025\/10\/image-768x606.png 768w\" sizes=\"(max-width: 950px) 100vw, 950px\" \/><\/figure>\n\n\n\n<figure class=\"wp-block-image size-large is-resized\"><img decoding=\"async\" src=\"https:\/\/i.gyazo.com\/333605af804c6a6684d3b089874a4803.gif\" alt=\"\" style=\"width:840px;height:auto\"\/><\/figure>\n\n\n\n<p>Then after multiplying both effects, we have the perfect base:<\/p>\n\n\n\n<figure class=\"wp-block-image size-large is-resized\"><img decoding=\"async\" src=\"https:\/\/i.gyazo.com\/45f5cad5111ffd936761f7604ef1490c.gif\" alt=\"\" style=\"width:840px;height:auto\"\/><\/figure>\n\n\n\n<p>Now we just need to add some extra passes, combine them, and create a smooth fading on top and bottom of the sahep <\/p>\n\n\n\n<figure class=\"wp-block-image size-full is-resized\"><img loading=\"lazy\" decoding=\"async\" width=\"594\" height=\"405\" src=\"https:\/\/ninquiet.com\/wp-content\/uploads\/2025\/10\/image-5.png\" alt=\"\" class=\"wp-image-1536\" style=\"width:840px;height:auto\" srcset=\"https:\/\/ninquiet.com\/wp-content\/uploads\/2025\/10\/image-5.png 594w, https:\/\/ninquiet.com\/wp-content\/uploads\/2025\/10\/image-5-300x205.png 300w\" sizes=\"(max-width: 594px) 100vw, 594px\" \/><\/figure>\n\n\n\n<p>And multiply by a color before output the value<\/p>\n\n\n\n<figure class=\"wp-block-image size-full is-resized\"><img loading=\"lazy\" decoding=\"async\" width=\"744\" height=\"556\" src=\"https:\/\/ninquiet.com\/wp-content\/uploads\/2025\/10\/image-6.png\" alt=\"\" class=\"wp-image-1537\" style=\"width:840px;height:auto\" srcset=\"https:\/\/ninquiet.com\/wp-content\/uploads\/2025\/10\/image-6.png 744w, https:\/\/ninquiet.com\/wp-content\/uploads\/2025\/10\/image-6-300x224.png 300w\" sizes=\"(max-width: 744px) 100vw, 744px\" \/><\/figure>\n\n\n\n<p>So we have this at the end<\/p>\n\n\n\n<figure class=\"wp-block-image size-large is-resized\"><img decoding=\"async\" src=\"https:\/\/i.gyazo.com\/0c8e4f15638860fdac355265bd3ecf92.gif\" alt=\"\" style=\"width:840px;height:auto\"\/><\/figure>\n\n\n\n<p>Now we just need to create a mesh with inverted faces, that fits with the effect of infinite top, but without breaking visually because the culling, and we are done<br><\/p>\n\n\n\n<figure class=\"wp-block-image size-full\"><img loading=\"lazy\" decoding=\"async\" width=\"795\" height=\"574\" src=\"https:\/\/ninquiet.com\/wp-content\/uploads\/2025\/10\/image-7.png\" alt=\"\" class=\"wp-image-1538\" srcset=\"https:\/\/ninquiet.com\/wp-content\/uploads\/2025\/10\/image-7.png 795w, https:\/\/ninquiet.com\/wp-content\/uploads\/2025\/10\/image-7-300x217.png 300w, https:\/\/ninquiet.com\/wp-content\/uploads\/2025\/10\/image-7-768x555.png 768w\" sizes=\"(max-width: 795px) 100vw, 795px\" \/><\/figure>\n\n\n\n<figure class=\"wp-block-embed is-type-video is-provider-youtube wp-block-embed-youtube wp-embed-aspect-4-3 wp-has-aspect-ratio\"><div class=\"wp-block-embed__wrapper\">\n<iframe loading=\"lazy\" title=\"Matrix Rain VFX just 1 Shader (preview)\" width=\"800\" height=\"600\" src=\"https:\/\/www.youtube.com\/embed\/ro8pqshcnUw?feature=oembed\" frameborder=\"0\" allow=\"accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share\" referrerpolicy=\"strict-origin-when-cross-origin\" allowfullscreen><\/iframe>\n<\/div><\/figure>\n\n\n\n<p><\/p>\n","protected":false},"excerpt":{"rendered":"<p>Here is a little preview of an effect created to give the feeling of matrix trainning code, is a single shader For the random changing text, I&#8217;ve created a texture with random text, organized on a grid with perfect distnaces between each other Then, by adding a constant offset on Y, and moving a little [&hellip;]<\/p>\n","protected":false},"author":1,"featured_media":1540,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[23,24],"tags":[],"class_list":["post-1530","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-design-thinking","category-develop"],"_links":{"self":[{"href":"https:\/\/ninquiet.com\/index.php\/wp-json\/wp\/v2\/posts\/1530"}],"collection":[{"href":"https:\/\/ninquiet.com\/index.php\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/ninquiet.com\/index.php\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/ninquiet.com\/index.php\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/ninquiet.com\/index.php\/wp-json\/wp\/v2\/comments?post=1530"}],"version-history":[{"count":1,"href":"https:\/\/ninquiet.com\/index.php\/wp-json\/wp\/v2\/posts\/1530\/revisions"}],"predecessor-version":[{"id":1541,"href":"https:\/\/ninquiet.com\/index.php\/wp-json\/wp\/v2\/posts\/1530\/revisions\/1541"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/ninquiet.com\/index.php\/wp-json\/wp\/v2\/media\/1540"}],"wp:attachment":[{"href":"https:\/\/ninquiet.com\/index.php\/wp-json\/wp\/v2\/media?parent=1530"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/ninquiet.com\/index.php\/wp-json\/wp\/v2\/categories?post=1530"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/ninquiet.com\/index.php\/wp-json\/wp\/v2\/tags?post=1530"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}