body {
	background-color: #000;
}
var symbolSize = 26;
var streams = [];
var fadeInterval = 1.2;

function setup() {
	createCanvas(window.innerWidth, window.innerHeight);
	
	var x = 0;
	for(i = 0; i <= width / symbolSize; i++) {
		stream = new Stream();
		stream.generateSymbols(x, random(-800, 0));
		streams.push(stream);
		x += symbolSize;
	}
	
	//Noto Sans is pulled in the <head> tags via Google Fonts
	textFont('Noto Sans');
	textSize(symbolSize);
	background(0);
}

function draw() {
	background(0, 150);
	
	streams.forEach(function(stream){
		stream.render();
	});
}


function Symbol(x, y, speed, firstSymbol, opacity) {
	this.x = x;
	this.y = y;
	this.speed = speed;
	this.value;
	this.switchInterval = round(random(2, 20));
	this.firstSymbol = firstSymbol;
	this.opacity = opacity;
	
	
	this.symbolRandomizer = function() {
			if(frameCount % this.switchInterval == 0){
				this.value = String.fromCharCode(
				0x30A0 + round(random(0, 96))
			);
		}
	}
	
	this.symbolFall = 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 firstSymbol = round(random(0, 4)) == 1;
		var opacity = 255;
		
		for(var i = 0; i < this.totalSymbols; i++) {
			symbol = new Symbol(x, y, this.speed, firstSymbol, opacity);
			symbol.symbolRandomizer();
			this.symbols.push(symbol);
			y -= symbolSize;
			firstSymbol = false;
			opacity -= (255 / this.totalSymbols) / fadeInterval;
		}
	}
	
	this.render = function() {
		this.symbols.forEach(function(symbol) {
			
			if(symbol.firstSymbol) {
				fill(180, 255, 180, symbol.opacity);
			} else {
				fill(0, 255, 70, symbol.opacity);
			}
			
			
			text(symbol.value, symbol.x, symbol.y);
			symbol.symbolFall();
			symbol.symbolRandomizer();
		});
	}
}
Run Pen

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

  1. https://cdnjs.cloudflare.com/ajax/libs/p5.js/0.6.0/p5.js