Created
January 27, 2022 05:23
-
-
Save spxwnmc/c9addba240c6b68cd737556a383a5961 to your computer and use it in GitHub Desktop.
Sí
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
<html> | |
<head> | |
<title>spawnmc |</title> | |
</head> | |
<body> | |
<canvas id="canvas"></canvas> | |
<canvas id="canvas2"></canvas> | |
<h1>@spawnmc was here, perra</h1> | |
<div id="app"></div> | |
</body> | |
<style> | |
body { | |
margin: 0; | |
} | |
canvas { | |
display: block; | |
position: absolute; | |
top: 0; | |
left: 0; | |
} | |
</style> | |
<script> | |
var canvas = document.getElementById("canvas"), | |
ctx = canvas.getContext("2d"), | |
canvas2 = document.getElementById("canvas2"), | |
ctx2 = canvas2.getContext("2d"), | |
cw = window.innerWidth, | |
ch = window.innerHeight, | |
charArr = [ | |
"a", | |
"b", | |
"c", | |
"d", | |
"e", | |
"f", | |
"g", | |
"h", | |
"i", | |
"j", | |
"k", | |
"l", | |
"m", | |
"n", | |
"o", | |
"p", | |
"q", | |
"r", | |
"s", | |
"t", | |
"u", | |
"v", | |
"w", | |
"x", | |
"y", | |
"z", | |
], | |
maxCharCount = 100, | |
fallingCharArr = [], | |
fontSize = 20, | |
maxColums = cw / fontSize; | |
canvas.width = canvas2.width = cw; | |
canvas.height = canvas2.height = ch; | |
function randomInt(min, max) { | |
return Math.floor(Math.random() * (max - min) + min); | |
} | |
function randomFloat(min, max) { | |
return Math.random() * (max - min) + min; | |
} | |
function Point(x, y) { | |
this.x = x; | |
this.y = y; | |
} | |
Point.prototype.draw = function (ctx) { | |
this.value = charArr[randomInt(0, charArr.length - 1)].toUpperCase(); | |
this.speed = randomFloat(1, 20); | |
ctx2.fillStyle = "rgba(255,255,255,0.8)"; | |
ctx2.font = fontSize + "px san-serif"; | |
ctx2.fillText(this.value, this.x, this.y); | |
ctx.fillStyle = "#0F0"; | |
ctx.font = fontSize + "px san-serif"; | |
ctx.fillText(this.value, this.x, this.y); | |
this.y += this.speed; | |
if (this.y > ch) { | |
this.y = randomFloat(-100, 0); | |
this.speed = randomFloat(2, 5); | |
} | |
}; | |
for (var i = 0; i < maxColums; i++) { | |
fallingCharArr.push(new Point(i * fontSize, randomFloat(-500, 0))); | |
} | |
var update = function () { | |
ctx.fillStyle = "rgba(0,0,0,0.05)"; | |
ctx.fillRect(0, 0, cw, ch); | |
ctx2.clearRect(0, 0, cw, ch); | |
var i = fallingCharArr.length; | |
while (i--) { | |
fallingCharArr[i].draw(ctx); | |
var v = fallingCharArr[i]; | |
} | |
requestAnimationFrame(update); | |
}; | |
update(); | |
</script> | |
<script src="https://unpkg.com/webamp"></script> | |
<script> | |
const app = document.getElementById("app"); | |
const webamp = new Webamp(); | |
webamp.renderWhenReady(app); | |
</script> | |
</html> |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment