add ascii add js add random demo code for self written mandelbulber, add more shit idk bro

This commit is contained in:
elijah 2024-06-05 23:05:12 +02:00
parent 9fa8b19640
commit 0a00663314
5 changed files with 380 additions and 56 deletions

101
assets/ascii.txt Normal file
View File

@ -0,0 +1,101 @@
..
.:-++*+:
:=++***+**#=:.
:::=+++**#*+**+*#**-
.:-++***#*##*+++**#***##*=.
.-**+++---::. .:+**#**+#%##%***+***###%%%##*+:.
:=+*****#**%%#*+-=++**#*+**+##+*+**##++#%#*#%%#%%#***=.
:-+*+*##**####*#%%#***#**##*#*+**##******#%*****#%%%%***#+-:
-*#*+*#**##*#%##***#**+###%%%%#+##*##++*##***#*+++*%%****=++*+-
.-=++*#%%%%%***#%%#**###*###*%@%%%#######***###%%%#++##****+%+*+**:
.--*#++*#*#%%@@%****###**####%%+**%%%%%%@%%**#***#%%#**##**+*+*##*#+**+.
.-+****#****##@@%#*###%##*##%%%%%***+#@%%%%#%**###*+##***#**#*#*##%%#**##+
-+***##**%*#***+#*+*######%#%%**#**###+#+*@%%#**#*++*+*+**+*#%%%%%%%%#+**+**+=-
-***##***#**#%######%#%%%#%%***###*#*#%#***####%%**%#**+#%####%%%%%%%%%#*##%###*+:.
.=+*#***##*#*#####%****##*###++**%%%%#####%*##**+*****+*****##%%%%@%%%%%%%#####*#####*==-:.:::-:
.:=++*#%*+*%%*#%%%%##%#**#****#*##%*#%%@%###%#*#***##%###%%#+#%*###%%@%%%%%@%%###%%%#%%%*****+**+#+++=-.
.:-=*#***#**#+#*###%@%%%%%##%%%**%%*###*%%%%%#%#***#%##########*#*%%#***%@%%%%%%%%%%%@%%%%%%#####***+++*##**-:
..=***#*+**+=++*##%###%%%%%%@@@@%%******#*#%#%@@%#******#%##%##%##*%%%%%#*+*%%%%%%%%%%%@@%%%%##****%##***+#%%#*##*+++=.
..-=+++*##%%#++****##**#*%%%%%@@@@@@@@@#*##*##******%@%#%%*+####%%%%##**%@@@#*+**#*%@%@%%%%%%%%%%%@@%***#**#####*##%%%*****#*+-:
.-+**+*%#*+***####+#***%***#*##%%%@@@@%@%@%@*++***++*#%#***@#++**#*%**##*#%+*#%%@#++*%%**#@@@@@@%%%%%%@%@#*###***#%%#+++****##++**++*
.::=**+#*#***#+**#%%###***##*#**#%%%%%%@@@%%@@@@@*+#%##*###%%*%##**#**%%##*##%#*##%%%%#**#%%**+*#@@%%%@%%%##***####%%%#*#+***++****%*++**#.
:-*#+##**##%*****+*%%%##%****##*****##*%%%@@%@%@@@@#**#%*####%######%%*##*###%%%%#%%%%%%+*#**+*#*+*+#%@@%%%##%**##%%#%#*+++***+**#*+*++++**#*
.:+*++*##*%%##%#**%#*#%%###%%*+****#%#*#*#%*#@@@%%%@%*+##%#*#%#*%%%%**#*+####%%%%#@@%%@@%#**@#****#**#*#*##%@@%%%%*####*#*+****+****++*++*#*#+###
.:-+*+***+###%%*#**#****#*##@%%%%%#**#*****####++*#%%%**++*####*#%%%##%%#*#####%%%%%%%%*#%%%@%#++*####%%@%*+#%%***%@@@%%@@#**#**#%%%#******+*#%###*#*#
:-+*#**+*%**+*++++++****####***####%%#*#@%##***++*++*#++++#*+#%##**###**%%***%%%%%#@%%%%%%##**###++****+*#***+*+*#**+*%@@@@@%*####*%@@@%+**#++++*####*#%%-
.-=+**+******%#*#******##**##***#*##%###**#%%#%%@%**%#*#***#****##+*#%###*###**###%@%%%*#%%%%%##*+****+##*+++++*++*+**+##*##%@@@%*##***#%%#*+*+++*+*++*###%%%#:
+#%***#****##%**###%*#@#%###%*****#%##**#*+**%#%@%**#%#%###%*##%%%%%%%%%%#*####%%%%%%%#*#*##**++*+#%**+*+*##+******+*%%%#*##**+##++*%%#*+++++***@#+++#######%%#
:*#*#%%%#*##*######%******##**###%%%%@%*******##**######%##**#%%@%@%#@%%%@%%%%#%@%%%%%##%%++###*+*#**##******#++++*##%%%%####%*+**++**+++*++*******+*****###*%#
:+*#%%@@#**###%%%%%%#*#***%%**##%@@*****##%###****##%#%%%#****##@%@%#%%%%%%%@%##%@%%%###%*#+*#+*+###%@#*+##*#+**++***%%%%%@@%%**#*+*#%%**#*+*++*+++**#***++**%#+
+#%#*#####%##%%%%%%%%@#**#*#%##%***%##****####%#%%%##%##******+**++****%%%%#**#*+##**++*##*+**+*+#%@%##**##*+*%#*#%++%@%%%%##*+**##*##**+*#%*#*+###*#+++#*+***=
+%#**#**##%%%%%%@@@@@@****#%@@%**##*#%%%%#%%#%%%%%##%%%########*%%#%####**#%#****+***+*++++*+**+***%%##******#*#%#+***%@%%%****+++++#++#%#%##*##%#+++*#%%#*##*++--
+++*##*#*#%#%%@@@@%%%@#****#@@%*#*#%#%@%%%%%%####%%%%%##**####******##++++*#@%%%*+****#*+******++*+++*%%*%%***+#*****++#%@@@%+**%%**+*##%%%###%%%#**++*#%%%%##**+*-
:+*#**###%%%%%@@@@%%%@**#******#####%%%%%%%%%%%%%%%%%%%%#***#%###**#+*#*+**#%###*+#*#*+##*#**++++*+##*****++####*+******+*%@%*****=+++*#%%%%%%%%@%++**%+#%%#*+****+=-.
+***%%%##%##%@%@%%%@%**%###**#%%%##%%%%%@@%%%%%%%%%@%%%%%%%%%#%%%#**%#+#*#%%#%#+*#***++*%#*###**%%%%%##**#%#*++*++*+++##**++++=+=*++**+*#%%%%%%#+=+**#**+*%**++==+++=:
-#%%#%%%%%#*#@@@@@%####%%#*#%%%%%###%@@@@%%%%%%%%%%%%%%#*#%%%@@@@#*****##%%%#***#%**++***###%***#*####**##***++##**+**#%%%****+*#**#*+##*#%%##*+**###**+***##*+*%*+++-
=%@@%%%%@%*#*#%#*+**##%%#%%##%#####%%%%%%%%%@%%%%%%@@@@@%%%%%%%%%**#**#%@@%@*+*#***#%%%####%##***##**##+**++*++##**+***%@#+*+#%%#%%+*#**##%##+++##++****++++++====*++-.
:=#%%#*#%##*++***%##%#*#%##%%#%%%%%%%%%%%%%%%%%%%@@@%@@@@@@@%%%#*#***##@%#*+*#**%##%%%%%%%%###%%****##+*+*****#*****++*#*+++**#%%%*%%##%%%%%*****#%#*****###++*++*+*+*=:.
=%%%##*#*##*#***###+#*+#%%#%%%%%%%%@%%%%@@@@%%%%@@%%@@@@@@@@@%*##***+*=++######%%%%%%%@@@@@@%%***%%#**#%%%#**+*+++*++*+*%#####+*##%%%%%%%%##**+*+++*%%##******###*+#%+++.
-#%%%%%@%###*#%%##***#*##*#%%%%%%%%%%%%@@@@@@@@%%%%%@@@@@%%%%%%*##+**#***%#+***#%%%@@@@@@@@@@@%+******#%%@@@%***#%%+***##%#%%%#*##%%%%%%%#**#+++*##+**+#**%#*###%#***++++=.
**#%*###%***##%@@@**#%%@#*###%%@##%%@@@@@@@@@@@@%%%%@@%%%%@%%%%##**###*#%***#*#%#%@@@@@%%@@@@@%**###**##@%%%#++**######%##%%%%%%%%%@@%%%%%%%%%####%*##%%%%%##%###*******+*++:
+****+*+++#%%#*%#**%*%%+**#%%%##%%%%%@@@@@@@@@@%%%%%%@@@@@@@%%%##***###%%#**#%@%%%@@@@@%%@@@@@%+++++***+#*+++###***#%%%%%%%###%%%%%%@%%%%%%%@@***#**%%%%%%%%%%%####**#%%##+**=:
***+*++*####@#+****###%#%%%%%%%%%%%%@@@@@@@@@%%%%%%%@@@@@@@@@%**##%##%#*+**##%%#%%@%@%%%@%@%%#++**%%*****#%%@%%#######%%%%%%#%%%%#%%%%%%%%%%%*+**###%@@@%%%%%*+**#+*##*******-
+++*+**#*+*#+**%@*#*#%##%@%@@%%%%%%%@@@@@@%%%%%%%%@%@@@@@@@@@@****#+*++#*****+***%@@@%%%%%#***++++**#**%%@@%**%%@%%#%%@@%%%%%%%%%%%#%#%%%%%%%+++*#****+*#++*++*#%%*#***####*
*+****%%%#++**+**##%%%%%@@%%%%%%%%%@@%%%%%@%%%%%%@@@@@@@@@@@@**+*++*++*##****##++#@@%#***++++**####**#*#%###%%%%%%%%@%%%%%#%%%%%#*###%%%%%%%%#%#####**##**+*#*#%%*###%%%##.
+*#%*#*#*%##%##+*%%%%%%%%%%%%%%%%%%%%%%@%%%%%%@@@@@@@@@@@@@@@++*#++*+****####++=+#***=+++**#%%%%%%%#%%%***+*%#%%#%%%%%%%%%%%%%%%%%#%%##%%%%%%%##%%*+%%*+**##*+#%%%*#@@%#:
++##***#*##******#*####%%%%%%#%%%%%@@%%@%%%%%%%%@@@@@@@@@@@@@*+**+**#%%%##**++*++*+=++#%%%%%@%@@%%%%%%**###%#*****#%%%%%%%%%%%%%%%%%%##%%%%%%###%%*****####*#%#%###%%%%
.*#**+*****#*+*#***###*#%@@%+**%%%%%@%@%%%@%%%%%%@%%@@@@%%%%#**+##*#%@@@@%+*#%+**#%%%%@@@%%@%%%%%@@%##*####%%%%#%%%%%%%%%%%%%%%%%%%%%%%%@%%%%%%%#**#####%#%%%%%%%%%%#*:
*+++*##*+#%#*#+##**#**#*####*%#*%%@@@@@@@@%%%%%%%%%@%@%#*****+*+****%%%#*+**%%##%%%%%@@@%%%%@%#*#%%%%%%%%%%%%%#%%###%@@@%%%%%%%%%%%%%%%%%%%%%%##%%%%%%%%%@@%%%%%%%#-
-++++*+*+**%###%#**#%%#*##%##%%###%@@@@@@@@@@@%#*##*##***#**#+++##**+***##%##***#%%%%%@@@%%%%****#%%%%%@@@@@%%%%%%%%@@@@@%%%%%%%%%%%%%%%%%%%%%%%##*###%%@@%%%%%%%%#:
++*#*#**+++##%#%%++**%#+#####%@*#**%@@@@@@@@@@#*#*+***##*#++**+*##***#%@@@#%%#%%%%%%%%%%%%%%%%%#%@%%%@%%%%@@@@%%%%@@@@@@@%%%%@%%%%%%%%%%%%%%%@%%%##@##%@@@%%%@@%*-
*#**###+*****##***#####*##%%@#*#**##*#%@@@@@@%+++***%*##****++*#*#%*###%%%##**#***%*#%%%%@@@@@%@%%%%%%%%%%%%@@%%%%@%@@@@%%#%%#%%%%%#%%%%%%%%%%%%#*###%@@@%%%#+=:
-+*####%+*##**++**#*#*%%#%%##****+**#*#%+**#%%+***#**++++*++*+##########***+=+*%@@#**#%%%#***####@%%%%%@@%@%%%%%%%@%@%%%%%%%%%%%%%#%%%%%%%%#%%%%%#%%%%@%%%%%#+
+++*#@%%+***##**%#%%%#%%#**+*+*+*##%%#%##*%#**+*****++++***++###%**#%%####**#%#%%###*#*##+*#*++=#%%%%%@@@@@%%%%%%#@%%%%%%%%##%%%%%%@%%%#%%%%%%#%%%%#%%%%%%%@%+
:*%@#%%@%#%####**+**#**+++*+*%*+**#%@@@%*++#++*++*##*++*#******+**+###**#@@%%%%%%%%%%#***##*##++*%##**##%%%%##%%%%#%%%%%%%%%%%%%%%@%%%%%%%%%%##%%%#%%%#%%#%#%%=
.*%#+*#%#%#*%%%#*#**+*#+*+++**%*+#*##%%@**+*++***++##++**+**#***########*+#%%%%%%%@%#%#%%#*#%*+#%%#*%#+*=+*++=*###*%%%%#%%%%%%%%%%%%%%%%%%%%%%%%%#%%%%%%%%%%#*
-**#%@%##%####%@@@**%*#*##********%%**++*+******+*##*++**#%@@%%#%@@%%#**#%%##%%%%#***+#**##**#%%##*%*##+****+#***#%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%-
:++*#####%#***#@%@**+*##%@%%******#*+****+####*#*#%%#+*+*##@@%%*%%%%@#=*#*#*%@%*+**+***#%@@%%#*###**#+**#**#***%%%%#%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%#%%%%%%.
:+++++##*#%%%%#%%@%%#*#*##%@%%+*##******+**+*++****+**+*****+%#*++####*++*##%%%*********#%@@%%##%%%%%%%#######*##%%#%%%%%%%%%%%%@@%%%%%%%@%%%%%%%%%%%%%@%%%%%-
=+*+++**%@##%%@@@%%%@#=+**+*#*+**#%%%###%**##**+**+**%*+*#%**+++++#*#++**#*%%**#*+*#*+#*#%@@**+*%%%%%%%%%%%##%%@%%%#%@@%%%%%%%@@%%%%%%%%%%%%%%%%%%%%%%%%%%%%%#:
:+*+*****+#**#@@@%%#*#+*%***##%@%#*####**+*#%%@@%***%#*++**+**%#**%#%%+*#%**#####***#%***#%%*+*#%%%%%@%%%%%%##%@@@%%%%%%%%%%@@@@@%%%%%%%%%%%%%%%%%%%%%%%%%%%%#=
-*##+*****#*+**#%%#*+*+**%*##%%@@#%%%%%#*####@@%%*+*#***%######*++*+*++*%#%###%%%%###+*#***=**##%%%@%%%%%%%##%%%%%%%#%%%%%@@@@@@@@@%%%%@%%%%%%%%%%%%%%%%%%%%%=
+*###****+*+*%%++=+=++*#######***%%#%%%%%%%%*##*++#*+###%%%%%%%#**+**##%%%%%%%%%%%####%#**##*#%#%%%%%%%%%%%%%%%%####%%%%%@@@@@@@@@@%%%%%%%%@@%@%%%%%%%%%%%%%%*-
=*#**#%****+**=+++*+###%#*#%%*#*####***#*+#@%+++*####%#%%%%@@@@@%%%%#%%%%@@@%%%@@@##%#++*%%**#++#%%%**#**##*%%%%%%%%#%%@%@@@@@%@@@@%%%%%%%%@@@@%%%%%%%%%%%%%%%#+
++**#%%#**%#**+**+******#*##***#%###%%@%%%+++***#%**#**%#%@@@@@@@@@@@##%%@@%%%%%%%%@#*+*##%%##%####+#*+#**#%###**####%%%%%@@@@@%%@@@%%%%%%%%%%%%%%%%%%%%#%%%%%%%#+
-+**+++++*##*####***###+*##*#%%%#*###%%%%%%++*****+***#%%%%@@@@%%%@%@@#%%@@%%%%%%%%%%@%%%%%%%%%%@%##*%#*##%@@%*#*%#*#%%%%%%%%%%%@@%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%#%#
.++**#***+*##*#@#=*%#****#%%%%%%##*%%%@%%%*#+*#**#*++#%%%%%%%%@@%%%@@%@**%@%%%%%%%%%%%%%%%%%%@@@%#**#*#%##@%%@%++##%%#@%%%%%%%%%%#%%%%%%%%%%%%%%%%%%#%#%%%%%%#%%%%%#.
.-+*#####%%%####*#*#%%%%%%%%%%%###*##%#%%###*****+*+***#%**#@@@@%%#%#**+###%@%%%%%%%%%%%%%%%%@@@%#######*#%%%**##%%%%%@%%%@%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%#
-+***#*####%##%%%%@%%%%%%%###**###***+=%#*#=++###*%****+@@@@#*+***#*%%%%@@%%%%%%%%%%%%%%%%%@%**=+#+*###**%@%%%%%@@@%%%%%%%%%%%%%%%%%%%%%%%#%%%%%%%%%%@%%%%%%%###
:-*#%%%##%####%%%%%%%@%%###%%%%@%%%++#*+++******##++*###***#**++#%%**##%%%+%@%%%###%####*+##**+#%#*#%%%%%%%@@@@@%%%%%%%%%%%%%%%%%%%%%%%#%%%%%%%%@%%%%%%%%#%#-
.-*#%%%%*##*###+*****#%%#%%%%@@%%+*#*+**++#**+*=+%*++=++==+++*****#**==**@%**#%%@%@%=+++=+**##%%%%%%%%%%%%%%%%%%%%%%%%%%%@%%%%%%%%%%#%%%%#%%%%%%%%%%%%%%%-
.::-=+#*###**###%%#%####%###*********+*+++**++#++++=#+++***#***#*=++*+*%#**#%@%#=+=*#**##%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%####%%%%%%%%%%#%%%%%%%#=
+*%%%##**%%%%%%%%%%%%%%#+*#####%*++*#***+++*++#*+*##%#**##+++**%%%*+**=+=+#%%%@@@%%%%%%%%%%%%%%%%%%%%%%%%%%%%@%#%%%%%%#%%%#%%%%%%%%#%%%%%%%%#+=-.
.****#%##%%%%%%%%%%%%%%%%#***##%@%##%%%%**#@***++*+***#**+**%#+%%*****#@#+@@@@@%@%%%%%%%%%%%%%%%@@%%%%%%%%%%%%##%%%%%#%#%#%%%#%#%%%%%%%%%*-.
:--+***%##%%%%%%%%@@%@%%%###+**+*#**#**#**++*##%%#*#%%%%%**#*#%#******+#@%%%###*%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%#%#%%#%%%%%%%%%%%%%#=..
:-****#%%%%%%%%%%%%%%#*+*+***==**+#+***##%@%%%#@%%%%%%%%%**#%%*##@@@%%#+=++%%%%#%#%%%%%%%%%%%%%%%%%%%%@%%#%%%#%%%%%%%%%%%##+-.
.:=*#%%%%%%%%%%%%##++***=+++*#**++****%#***%%%%%%%%%#**#####%@@@%%%#*####%%%%%%%%%%%%%%%%%%%%%%%%%%###%#%%%%%%%%%#+=:.
-+#%%%%%%%%%******+*#***+**++**+++===**+++##%@#=+*#%%%%%%%%#%%@%%%%%%%#%%%#%%#%%%%%%%%%%%%%%%%#%%%%%%%#*-...
:-=+#%%%###*#***++#%@#*****#*+++****+*#*++#%%%%%%%%%@%%%%%%%%%#%%%%%%%%%%%%%%%%%%%#%%%%%%%%%%%*-:
.:*#%%%%%%##%#*+***++++*++#%#%%##***@@#+#%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%#%@%%%%%%%%%%%%%%#
:-=*%%%%%%%%%##**+*#*+*+**##*##%%%%%#%%%%%%%%%%%%%%%%%%%%%%%%%%@@%%%%%%%%%%%%%%%%%%#:
.-+*%%%%%%%%%%##****#####%#%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%#%%%%@%%%%%%%%%#.
.+#%%%%%%#%%#%%#%%%%%%%%%%%%%%%%%%%%%%@%%%%%%%%%#%%%%%%%%%%%%@@@%%%%%%%%#=
.-+*%%###%#%#%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%@%%%%%#%%%%%%%%%%%%%#-
:=*%%##%%%%%%%%%%%%%%%@%%%%%%#%%%%%%@@%@@@@%%%%#%%@%%%#%%#%%%%#.
.=+*###%#%%%%%%%%%%%%%%%%%@@@%%%@@@%%@@%%%%%%#%%%%%%%%%%%#-
.-==*##+*##%%%%%%%%%%%@@%%%%%@@%%%%%%#%%%#%%%%%#%%#+-.
:=+#%%%%%%%%%%%%%%%%%%%%#%%##%%%%%%%%%#+
.-+#%%%%%#%%#%%#%#%%#%%%%#%%%#%%%#+
:-=+##%%###%%%##%%%%%%%#%%%%#=
:-=+*%%#%%%%%%%%%%%%%*:
:+##%%%#######.
.:=*#%%##+
.-+-

10
assets/loader.js Normal file
View File

@ -0,0 +1,10 @@
window.addEventListener('load', function() {
if (!/Android|webOS|iPhone|iPad|iPod|BlackBerry|IEMobile|Opera Mini/i.test(navigator.userAgent)) {
fetch('assets/ascii.txt')
.then(response => response.text())
.then(data => {
const asciiArtContainer = document.getElementById('ascii-art-container');
asciiArtContainer.innerText = data;
});
}
});

View File

@ -1,62 +1,86 @@
@font-face { @font-face {
font-family: 'workbench'; font-family: 'workbench';
src: url('../assets/font.woff2') format('woff2'); src: url('../assets/font.woff2') format('woff2');
} }
body { body {
background-color: #333; background-color: #333;
background-image: background-image:
linear-gradient(to bottom, linear-gradient(to bottom,
#000000, #000000,
#22770156, #22770156,
#221100 #221100
); );
background-size: 100% 3px; background-size: 100% 3px;
background-repeat: repeat-y; background-repeat: repeat-y;
} }
.navbar { .navbar {
background: background:
radial-gradient( radial-gradient(
farthest-corner at 50% 50%, farthest-corner at 50% 50%,
rgba(0, 0, 0, 0.6), rgba(0, 0, 0, 0.6),
rgba(20, 20, 20, 0.6) 50%, rgba(20, 20, 20, 0.6) 50%,
rgba(40, 40, 40, 0.6) 100% rgba(40, 40, 40, 0.6) 100%
); );
background-size: 100% 300px; background-size: 100% 300px;
background-position: 0% 100%; background-position: 0% 100%;
padding: 1rem; padding: 1rem;
display: flex; display: flex;
justify-content: space-between; justify-content: space-between;
align-items: center; align-items: center;
}
.logo {
font-family: 'workbench', sans-serif;
font-size: 1.5rem;
color: #33ccffca;
text-shadow: 0 0 10px #33ccffbe;
}
.nav-links {
list-style: none;
margin: 0;
padding: 0;
display: flex;
align-items: center;
}
.nav-links li {
margin-right: 20px;
}
.nav-links a {
font-family: 'workbench', sans-serif;
font-size: 1.2rem;
color: #33ccffab; /* a pale blue color reminiscent of old CRTs */
text-decoration: none;
transition: color 0.2s ease;
text-shadow: 0 0 3px #33ccffaf;
}
.nav-links a:hover {
color: #33ccffda;
}
.ascii-art-container {
position: fixed;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
font-size: calc(5px + 0.005vw); /* Dynamically adjust the font size based on the viewport width */
font-family: 'Courier New', monospace;
color: #33ccffab;
text-shadow: 0 0 3px #33ccffaf;
padding: 10px;
white-space: pre;
pointer-events: none;
max-height: calc(100vh - 80px); /* Subtract the max possible navbar height to restrict container size */
overflow: auto; /* Add scrollbar to container if content exceeds its max-height */
}
@media only screen and (max-width: 768px) {
.ascii-art-container {
display: none;
} }
}
.logo {
font-family: 'workbench', sans-serif;
font-size: 1.5rem;
color: #33ccffca;
text-shadow: 0 0 10px #33ccffbe;
}
.nav-links {
list-style: none;
margin: 0;
padding: 0;
display: flex;
align-items: center;
}
.nav-links li {
margin-right: 20px;
}
.nav-links a {
font-family: 'workbench', sans-serif;
font-size: 1.2rem;
color: #33ccffab; /* a pale blue color reminiscent of old CRTs */
text-decoration: none;
transition: color 0.2s ease;
text-shadow: 0 0 3px #33ccffaf;
}
.nav-links a:hover {
color: #33ccffda;
}

188
demo.html Normal file
View File

@ -0,0 +1,188 @@
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Mandelbulb ASCII Art</title>
<style>
body {
font-family: 'Courier New', monospace;
white-space: pre;
background: #000;
color: #0f0;
display: flex;
justify-content: center;
align-items: center;
height: 100vh;
margin: 0;
overflow: hidden;
}
#asciiArt {
margin: auto;
overflow: hidden;
font-size: 7px;
line-height: 7px;
letter-spacing: 1px;
}
.controls {
position: fixed;
top: 20px;
left: 20px;
color: #0f0;
}
input[type='number'] {
width: 60px;
background: #222;
border: 1px solid #333;
color: #0f0;
margin: 2px 0;
}
label {
display: inline-block;
width: 100px;
}
</style>
</head>
<body>
<div class="controls">
<label>Power: <input type="number" id="power" min="2" max="12" step="0.1" value="8"></label><br>
<label>Detail: <input type="number" step="0.01" id="detail" value="0.25"></label><br>
<label>Columns: <input type="number" id="columns" value="80"></label>
</div>
<pre id="asciiArt"></pre>
<script>
'use strict';
// Mandelbulb Calculation and Rendering
class Mandelbulb {
constructor(power, detail, columns, rows) {
this.power = power;
this.detail = detail;
this.columns = columns;
this.rows = rows;
this.charset = " .:░▒▓█"; // Use extended charset for ASCII view detail
}
// Normalized rotation using yaw and pitch for 3D rotation
rotate(x, y, z, sinA, cosA, sinB, cosB) {
const yr = y * cosA - z * sinA;
const zr = y * sinA + z * cosA;
const xr = x * cosB - zr * sinB;
const zrr = x * sinB + zr * cosB;
return [xr, yr, zrr];
}
// 3D Distance Estimation iterative formula for the Mandelbulb fractal
computeMandelbulbDistance(x0, y0, z0, maxIterations, escapeRadius) {
let x = x0, y = y0, z = z0, dr = 1.0;
let r = 0;
for (let i = 0; i < maxIterations; i++) {
r = Math.sqrt(x * x + y * y + z * z);
if (r > escapeRadius) break;
// Convert to polar coordinates
const theta = Math.atan2(Math.sqrt(x * x + y * y), z);
const phi = Math.atan2(y, x);
const zr = Math.pow(r, this.power - 1);
dr = Math.pow(r, this.power - 1) * this.power * dr + 1.0;
const thetaR = theta * this.power;
const phiR = phi * this.power;
// Convert back to cartesian coordinates
x = zr * Math.sin(thetaR) * Math.cos(phiR) + x0;
y = zr * Math.sin(thetaR) * Math.sin(phiR) + y0;
z = zr * Math.cos(thetaR) + z0;
}
return 0.5 * Math.log(r) * r / dr;
}
render(angleX, angleY) {
const output = Array.from({ length: this.rows }, () => []);
const maxIterations = 256;
const escapeRadius = 10;
const voxelSize = 2.5 / Math.min(this.columns, this.rows);
const fov = 1.0 / Math.tan(0.5);
const cosA = Math.cos(angleX), sinA = Math.sin(angleX);
const cosB = Math.cos(angleY), sinB = Math.sin(angleY);
const cameraZ = -2; // Camera position tweak for better fractal appearance
for (let row = 0; row < this.rows; row++) {
for (let col = 0; col < this.columns; col++) {
const px = (col - this.columns / 2) * voxelSize;
const py = (row - this.rows / 2) * voxelSize;
const pz = fov;
const [dx, dy, dz] = this.rotate(px, py, pz, sinA, cosA, sinB, cosB);
const [sx, sy, sz] = this.rotate(0, 0, cameraZ, sinA, cosA, sinB, cosB);
let depth = this.rayMarch(sx, sy, sz, dx, dy, dz, maxIterations, escapeRadius);
output[row][col] = this.depthToAscii(depth);
}
}
return output.map(line => line.join('')).join('\n');
}
// Ray marching for the fractal
rayMarch(x, y, z, dx, dy, dz, maxIterations, escapeRadius) {
let depth = 0.0;
for (let i = 0; i < maxIterations; i++) {
const distance = this.computeMandelbulbDistance(x, y, z, maxIterations, escapeRadius);
if (distance < this.detail) break;
depth += distance;
x += dx * distance;
y += dy * distance;
z += dz * distance;
}
return depth;
}
// Map depth into ASCII character
depthToAscii(depth) {
const index = Math.min(Math.floor(depth * 7 / this.detail), this.charset.length - 1);
return this.charset[index];
}
}
let asciiArt = document.getElementById('asciiArt');
let powerControl = document.getElementById('power');
let detailControl = document.getElementById('detail');
let columnsControl = document.getElementById('columns');
// Initial values
let power = parseFloat(powerControl.value);
let detail = parseFloat(detailControl.value);
let columns = parseInt(columnsControl.value);
let rows = Math.floor(columns / 2);
let mandelbulb = new Mandelbulb(power, detail, columns, rows);
let angleX = 0;
let angleY = 0;
function render() {
asciiArt.textContent = mandelbulb.render(angleX, angleY);
angleX += 0.04;
angleY += 0.03;
requestAnimationFrame(render);
}
powerControl.addEventListener('input', () => {
power = parseFloat(powerControl.value);
mandelbulb = new Mandelbulb(power, detail, columns, rows);
});
detailControl.addEventListener('input', () => {
detail = parseFloat(detailControl.value);
mandelbulb = new Mandelbulb(power, detail, columns, rows);
});
columnsControl.addEventListener('input', () => {
columns = parseInt(columnsControl.value);
rows = Math.floor(columns / 2);
mandelbulb = new Mandelbulb(power, detail, columns, rows);
});
render();
</script>
</body>
</html>

View File

@ -33,6 +33,7 @@
<li><a href="https://monitor.elia.network/status/public">status</a></li> <li><a href="https://monitor.elia.network/status/public">status</a></li>
<li><a href="https://schizophrenia.network">schizophrenia</a></li> <li><a href="https://schizophrenia.network">schizophrenia</a></li>
</ul> </ul>
<div class="ascii-art-container" id="ascii-art-container"></div>
</nav> </nav>
</body> </body>
</html> </html>