How we can create a hacker type digital rain background? Solution: See this Matrix Digital Rain Effect With P5 JS, Hacking Background Codes.
Previously I have shared a particle tech line background, but this is hacking type text loop background animation. Basically, Matrix digital rain contains a green codes rain loop, which is featured in The Matrix series. The falling green code is a way of representing the activity of the virtual reality environment of the Matrix on screen. We can create the same kind of effect using JavaScript or any JS library.
Today you will learn to create Hacking Background Codes Animation. Basically, there are “Hello World” text with 170+ different languages and raining in the background with neon green glowing effect. All the text goes up to down like raining and keeps glowing. And the text overlapping others and makes a proper hacker background theme.
So, Today I am sharing Matrix Digital Rain Effect With P5 JS. There I have used HTML to create structure, CSS for styling, and P5 JS library for functioning. You can use this on your website as background, if you have a forum or hacking related website. And this can make you cool in front of your friends.
If you are thinking now how this hacking background text actually is, then see the preview given below.
Preview Of Hacking Background Codes
See this video preview to getting an idea of how this code loop background looks like.
Now you can see this program visually, also you can see it live by pressing the button given above. If you like this, then get the source code of its.
You May Also Like:
- Expanding Read More Link
- JavaScript Terminal Emulator
- Showreel Intro Text Animation
- Stairway Hover Navigation
Matrix Digital Rain Effect Source Code
Before sharing source code, let’s talk about it. I have created the HTML file for only linking the JavaScript file and P5 JS library’s CDN link. The HTML file does not contain anything like div, section, etc It completely based on JS library. There I have placed few CSS values in between head section, I have not created a separate file for CSS.
In JavaScript file, I have placed “Hello World” text in multiple languages and stored in consts. There I have declared functions and values according to library’s pre-built function and commands. All the things you will understand after getting the codes, I can’t explain all in writing. For creating this progarm you have to create only 2 files, one for HTML and one for JavaScript.
Follow the steps to creating this program without any error.
index.html
Create an HTML file named ‘index.html‘ and put these codes given below.
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 |
<!DOCTYPE html> <!-- Code By Webdevtrick ( https://webdevtrick.com ) --> <html lang="en" > <head> <meta charset="UTF-8"> <title>Hacking Background | Webdevtrick.com</title> <style> * { margin: 0; padding: 0; box-sizing: border-box; } body { overflow: hidden; height: 100%; } </style> </head> <body> <script src='https://cdnjs.cloudflare.com/ajax/libs/p5.js/1.0.0/p5.min.js'></script> <script src="function.js"></script> </body> </html> |
function.js
Now create a JavaScript file named ‘function.js‘ and put the codes.
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 104 105 106 107 108 109 110 111 112 113 114 115 116 117 118 119 120 121 122 123 124 125 126 127 128 129 130 131 132 133 134 135 136 137 138 139 140 141 142 143 144 145 146 147 148 149 150 151 152 153 154 155 156 157 158 159 160 161 162 163 164 165 166 167 168 169 170 171 172 173 174 175 176 177 178 179 180 181 182 183 184 185 186 187 188 189 190 |
// Code By Webdevtrick ( https://webdevtrick.com ) const langs = [ "Hello World", "مرحبا بالعالم", "Salam Dünya", "Прывітанне Сусвет", "Здравей свят", "ওহে বিশ্ব", "Zdravo svijete", "Hola món", "Kumusta Kalibutan", "Ahoj světe", "Helo Byd", "Hej Verden", "Hallo Welt", "Γειά σου Κόσμε", "Hello World", "Hello World", "Hola Mundo", "Tere, Maailm", "Kaixo Mundua", "سلام دنیا", "Hei maailma", "Bonjour le monde", "Dia duit an Domhan", "Ola mundo", "હેલો વર્લ્ડ", "Sannu Duniya", "नमस्ते दुनिया", "Hello World", "Pozdrav svijete", "Bonjou Mondyal la", "Helló Világ", "Բարեւ աշխարհ", "Halo Dunia", "Ndewo Ụwa", "Halló heimur", "Ciao mondo", "שלום עולם", "こんにちは世界", "Hello World", "Გამარჯობა მსოფლიო", "Сәлем Әлем", "សួស្តីពិភពលោក", "ಹಲೋ ವರ್ಲ್ಡ್", "안녕하세요 월드", "Ciao mondo", "ສະບາຍດີຊາວໂລກ", "Labas pasauli", "Sveika pasaule", "Hello World", "Kia Ora", "Здраво свету", "ഹലോ വേൾഡ്", "Сайн уу", "हॅलो वर्ल्ड", "Hai dunia", "Hello dinja", "မင်္ဂလာပါကမ္ဘာလောက", "नमस्कार संसार", "Hallo Wereld", "Hei Verden", "Moni Dziko Lapansi", "ਸਤਿ ਸ੍ਰੀ ਅਕਾਲ ਦੁਨਿਆ", "Witaj świecie", "Olá Mundo", "Salut Lume", "Привет, мир", "හෙලෝ වර්ල්ඩ්", "Ahoj svet", "Pozdravljen, svet", "Waad salaaman tihiin", "Përshendetje Botë", "Здраво Свете", "Lefatše Lumela", "Halo Dunya", "Hej världen", "Salamu, Dunia", "ஹலோ வேர்ல்ட்", "హలో వరల్డ్", "Салом Ҷаҳон", "สวัสดีชาวโลก", "Kamusta Mundo", "Selam Dünya", "Привіт Світ", "ہیلو ورلڈ", "Salom Dunyo", "Chào thế giới", "העלא וועלט", "Mo ki O Ile Aiye", "你好，世界", "你好，世界", "你好，世界", "Sawubona Mhlaba" ]; let charSize = 20; let fallRate = charSize / 2; let streams; // ------------------------------- class Char { constructor(value, x, y, speed) { this.value = value; this.x = x; this.y = y; this.speed = speed; } draw() { const flick = random(100); // 10 percent chance of flickering a number instead if (flick < 10) { fill(120, 30, 100); text(round(random(9)), this.x, this.y); } else { text(this.value, this.x, this.y); } // fall down this.y = this.y > height ? 0 : this.y + this.speed; } } // ------------------------------------- class Stream { constructor(text, x) { const y = random(text.length); const speed = random(2, 10); this.chars = []; for (let i = text.length; i >= 0; i--) { this.chars.push( new Char(text[i], x, (y + text.length - i) * charSize, speed) ); } } draw() { fill(120, 100, 100); this.chars.forEach((c, i) => { // 30 percent chance of lit tail const lit = random(100); if (lit < 30) { if (i === this.chars.length - 1) { fill(120, 30, 100); } else { fill(120, 100, 90); } } c.draw(); }); } } function createStreams() { // create random streams from langs that span the width for (let i = 0; i < width; i += charSize) { streams.push(new Stream(random(langs), i)); } } function reset() { streams = []; createStreams(); } function setup() { createCanvas(innerWidth, innerHeight); reset(); frameRate(20); colorMode(HSB); noStroke(); textSize(charSize); textFont("monospace"); background(0); } function draw() { background(0, 0.4); streams.forEach((s) => s.draw()); } function windowResized() { resizeCanvas(innerWidth, innerHeight); background(0); reset(); } |
That’s It. Now you have successfully created Matrix Digital Rain Effect With P5 JS, Hacking Background Loop Text. If you have any doubt or question comment down below.
Thanks For Visiting, Keep Visiting.
Is there a way of adding this to.a WordPress website? I would love to be able to put this on my site but not sure how to add this code to a cms?
Your advice would be much appreciated.
Can this code be modified to be ran on an Arduino connected to an LCD screen? If so, is that something you could walk me through? Look forward to hearing from you.