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();
});
}
}
External CSS
This Pen doesn't use any external CSS resources.