Skip to content

Instantly share code, notes, and snippets.

@Dahouo
Last active Apr 7, 2020
Embed
What would you like to do?
Say Thanks
// Say Thanks to people falling down in Matrix code rain
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();
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/p5.js/1.0.0/p5.min.js"></script>
*
margin 0
padding 0
box-sizing border-box
body
overflow hidden
height 100%
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment