0x03e212b0…7ed2sent to0xb8952959…ccf4·#23,985,817·view on Etherscan
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>oUtZoNe</title>
<script src="https://cdnjs.cloudflare.com/ajax/libs/p5.js/1.4.0/p5.js"></script>
<style>
body, html {
margin: 0;
padding: 0;
height: 100%;
overflow: hidden;
display: flex;
justify-content: center;
align-items: center;
background-color: black;
color: lime;
font-size: 10px;
line-height: 10px;
font-family: monospace;
white-space: pre;
}
pre {
margin: 0;
}
</style>
</head>
<body>
<pre id="ascii-animation"></pre>
<script>
let cols, rows;
let phase = 0;
let asciiOutput;
let waveSpeed1 = 0.1;
let waveSpeed2 = 0.15;
let waveSpeed3 = 0.2;
let charWidth = 8;
let charHeight = 10;
let characters = ['#', '*', '.', '=', '-', '+', '~', '|', '^', '@'];
let outzoneText = [
" OOO U U TTTTT ZZZZZ OOO N N EEEEE ",
" O O U U T Z O O NN N E ",
" O O U U T Z O O N N N EEEE ",
" O O U U T Z O O N NN E ",
" OOO UUU T ZZZZZ OOO N N EEEEE "
];
function setup() {
noCanvas();
asciiOutput = select('#ascii-animation');
adjustGridSize();
frameRate(20);
}
function draw() {
let asciiArt = "";
for (let i = 0; i < rows; i++) {
for (let j = 0; j < cols; j++) {
let char = " ";
let wave1 = sin(phase + i * waveSpeed1 + j * waveSpeed2);
let wave2 = cos(phase + i * waveSpeed3 - j * waveSpeed1);
let wave3 = sin(phase + i * waveSpeed2 + j * waveSpeed3) * cos(phase + i * 0.2);
let wave4 = sin(phase * 0.5 + dist(i, j, cols / 2, rows / 2) * 0.1);
let combinedWave = wave1 + wave2 + wave3 + wave4;
let charIndex = floor(map(combinedWave, -2, 2, 0, characters.length));
charIndex = constrain(charIndex, 0, characters.length - 1);
char = characters[charIndex];
asciiArt += char;
}
asciiArt += '\n';
}
let middleRow = floor(rows / 2) - Math.floor(outzoneText.length / 2);
let middleCol = floor(cols / 2) - Math.floor(outzoneText[0].length / 2);
for (let t = 0; t < outzoneText.length; t++) {
let line = outzoneText[t];
for (let k = 0; k < line.length; k++) {
if (line[k] !== ' ') {
let char = Math.random() > 0.2 ? characters[floor(random(characters.length))] : line[k];
asciiArt = setCharAt(asciiArt, (middleRow + t) * (cols + 1) + middleCol + k, char);
}
}
}
asciiOutput.html(asciiArt);
phase += 0.05;
}
function adjustGridSize() {
let windowW = window.innerWidth;
let windowH = window.innerHeight;
cols = floor(windowW / charWidth);
rows = floor(windowH / charHeight);
}
function setCharAt(str, index, chr) {
if (index > str.length - 1) return str;
return str.substring(0, index) + chr + str.substring(index + 1);
}
function windowResized() {
adjustGridSize();
}
setup();
draw();
setInterval(draw, 50);
</script>
</body>
</html>