A simple personal website using p5.js to create an animated background of Perlin noise and ASCII characters.
- Feel free to clone this repository via link or Download ZIP button
git clone https://github.com/khlebobul/khlebobul.github.io
- Change the content
- You can also play with colors, fonts and background
- Give this project a star
Background was made with p5.js (Link)
let charset = '░▒▓█▓▒░';
function setup() {
createCanvas(windowWidth, windowHeight);
}
function draw() {
background(50);
noStroke();
rectMode(CENTER);
let spacing = 20;
let noiseScale = map(mouseX, 0, width, 0.005, 0.02);
for (let y = 0; y < height; y += spacing) {
for (let x = 0; x < width; x += spacing) {
let n = noise(x * noiseScale, y * noiseScale, frameCount * 0.01);
let letter;
if (n > 0.6) {
letter = "█";
} else if (n > 0.5) {
letter = "▓";
} else if (n > 0.4) {
letter = "▒";
} else if (n > 0.3) {
letter = "░";
} else {
letter = " ";
}
textSize(20);
text(letter, x, y);
}
}
}
function mousePressed() {
if (!isLooping()) {
loop();
} else {
noLoop();
}
}
function windowResized() {
resizeCanvas(windowWidth, windowHeight);
}