A simple personal website using p5.js to create an animated background of Perlin noise and ASCII characters.
![image](https://private-user-images.githubusercontent.com/77191581/332050578-19bc845c-8e73-4139-96d9-8f19c55fdb5e.png?jwt=eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJpc3MiOiJnaXRodWIuY29tIiwiYXVkIjoicmF3LmdpdGh1YnVzZXJjb250ZW50LmNvbSIsImtleSI6ImtleTUiLCJleHAiOjE3MjQ5MDQ3NjYsIm5iZiI6MTcyNDkwNDQ2NiwicGF0aCI6Ii83NzE5MTU4MS8zMzIwNTA1NzgtMTliYzg0NWMtOGU3My00MTM5LTk2ZDktOGYxOWM1NWZkYjVlLnBuZz9YLUFtei1BbGdvcml0aG09QVdTNC1ITUFDLVNIQTI1NiZYLUFtei1DcmVkZW50aWFsPUFLSUFWQ09EWUxTQTUzUFFLNFpBJTJGMjAyNDA4MjklMkZ1cy1lYXN0LTElMkZzMyUyRmF3czRfcmVxdWVzdCZYLUFtei1EYXRlPTIwMjQwODI5VDA0MDc0NlomWC1BbXotRXhwaXJlcz0zMDAmWC1BbXotU2lnbmF0dXJlPWUzMWMxNTY3MjRmNTg5ZGZmNjg2OWRjOGM4YjE1M2Q1MWYzMmM4NTc2N2U1NzEyMmFkMThhMTZjYjFkMDg4ZDMmWC1BbXotU2lnbmVkSGVhZGVycz1ob3N0JmFjdG9yX2lkPTAma2V5X2lkPTAmcmVwb19pZD0wIn0.8yECmz5OyiDw_Dd3v9PZ_8211FQ3seIqvNQy5KMFSUg)
- 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);
}