Matrix Blue Rain

Developer
Joe Warren
Size
2,428 Kb
Views
72,864
  1. Matrix Blue Rain Previews
  2. Matrix Blue Rain HTML Codes
  3. Matrix Blue Rain JS Codes

How do I make an matrix blue rain?

What is a matrix blue rain? How do you make a matrix blue rain? This script and codes were developed by Joe Warren on 04 July 2022, Monday.

Matrix Blue Rain Previews
IQ Test

Matrix Blue Rain - Script Codes HTML Codes

<!DOCTYPE html>
<html >
<head> <meta charset="UTF-8"> <title>Matrix Blue Rain</title>
</head>
<body> <html>
<head> <meta charset="UTF-8"> <script language="javascript" type="text/javascript" src="http://cdnjs.cloudflare.com/ajax/libs/p5.js/0.5.7/p5.js"></script> <script language="javascript" type="text/javascript" src="matrix.js"></script> <!-- this line removes any default padding and style. you might only need one of these values set. --> <style> body {padding: 0; margin: 0;} </style>
</head>
<body>
</body>
</html> <script src="js/index.js"></script>
</body>
</html>

Matrix Blue Rain - Script Codes JS Codes

// code along with Emily Xie
// https://twitter.com/emilyxxie
// https://youtu.be/S1TQCi9axzg
var symbol; //global, can be accessed anywhere
var fadeInterval = 1.6;
var symbolSize = 26;
var streams = [];
// setup gets invoked once immediately upon loading up sketch
function setup() {	createCanvas(	window.innerWidth,	window.innerHeight	);	background(0);	var x = 0;	for (var i = 0; i <= width / symbolSize; i++) {	var stream = new Stream();	stream.generateSymbols(	x,	random(-1500, 0)	);	streams.push(stream);	x += symbolSize	}	textFont('Consolas');	textSize(symbolSize);
}
// draw gets called repeatedly at 60 fps at sketch runs
function draw() {	background(0, 150);	streams.forEach(function(stream) { stream.render();	});
}
function Symbol(x, y, speed, first, opacity) {	this.x = x;	this.y = y;	this.value;	this.speed = speed;	this.first = first;	this.opacity = opacity;	this.switchInterval = round(random(2, 20));	this.setToRandomSymbol = function() { var charType = round(random(0, 5)); if (frameCount % this.switchInterval == 0) { if (charType > 1) { // set it to Katakana this.value = String.fromCharCode( 0x30A0 + round(random(0, 96)) ); } else { // set it to numeric this.value = round(random(0,9)); } } }	this.rain = function() {	this.y = (this.y >= height) ? 0 : this.y += this.speed;	}
}
function Stream() {	this.symbols = [];	this.totalSymbols = round(random(5, 30));	this.speed = random(5, 20);	this.generateSymbols = function(x, y) {	var opacity = 255;	var first = round(random(0, 4)) == 1;	for (var i = 0; i <= this.totalSymbols; i++) {	symbol = new Symbol(x, y, this.speed, first, opacity);	symbol.setToRandomSymbol();	this.symbols.push(symbol);	opacity -= (255 / this.totalSymbols) / fadeInterval;	y -= symbolSize;	first = false;	}	}	this.render = function() {	this.symbols.forEach(function(symbol) {	if (symbol.first) {	fill(150, 150, 255, symbol.opacity); } else {	fill(0, 70, 255, symbol.opacity); } text(symbol.value, symbol.x, symbol.y); symbol.rain(); symbol.setToRandomSymbol(); });	}
}	// this.render = function() {	// }
// symbol = new Symbol(
//	width / 2,
//	0,
//	random(5, 10)
//	);
//	symbol.setToRandomSymbol();
Matrix Blue Rain - Script Codes
Matrix Blue Rain - Script Codes
Home Page Home
Developer Joe Warren
Username MightyJoeW
Uploaded July 04, 2022
Rating 3
Size 2,428 Kb
Views 72,864
Do you need developer help for Matrix Blue Rain?

Find the perfect freelance services for your business! Fiverr's mission is to change how the world works together. Fiverr connects businesses with freelancers offering digital services in 500+ categories. Find Developer!

Joe Warren (MightyJoeW) Script Codes
Name
Animated Android Logo
Google Homepage 2
MLK Google Homepage project
Weather App 2
Minutes to Hours Converter
JS and the DOM
2017-04-02 Weather App
HEEL Rock Paper Scissors
JS Shananigans
Joe Warren Portfolio Deluxe
Create amazing web content with AI!

Jasper is the AI Content Generator that helps you and your team break through creative blocks to create amazing, original content 10X faster. Discover all the ways the Jasper AI Content Platform can help streamline your creative workflows. Start For Free!