Say Thanks

index.pug

// Say Thanks to people falling down in Matrix code rain

say-thanks.markdown

Say Thanks

Say Thanks to people falling down in Matrix code rain

Forked from Pen by Manan Tank ⭐ on CodePen.

License.

script.js

const langs = [
	"Merci à vous",
	"Médécins",
	"Merci à vous",
	"Soigants",
	"Merci à vous",
	"Infirmiers",
	"Merci à vous",
	"Pharmaciens",
	"Merci à vous",
	"Ambulanciers",
	"Merci à vous",
	"Agriculteurs",
	"Merci à vous",
	"Pompiers",
	"Merci à vous",
	"Banquiers",
	"Merci à vous",
	"Caissiers",
	"Merci à vous",
	"Cuisiniers",
	"Merci à vous",
	"Livreurs",
	"Merci à vous",
	"Policiers",
	"Merci à vous",
	"Journalistes",
	"Merci à vous",
	"Gouvernement",
	"Merci à vous"

];
// say Thanks to people

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(500);
		// 10 percent chance of flickering a number instead
		if (flick < 10) {
			fill(120, 30, 100);
			text(round(random(3)), 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, 4);
		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();
}

scripts

<script src="https://cdnjs.cloudflare.com/ajax/libs/p5.js/1.0.0/p5.min.js"></script>

style.stylus

*
	margin 0
	padding 0
	box-sizing border-box

body
	overflow hidden
	height 100%