97 lines
2.3 KiB
HTML
97 lines
2.3 KiB
HTML
<!doctype html>
|
|
<html>
|
|
<head>
|
|
<meta charset="utf-8">
|
|
<style>
|
|
html {
|
|
width: 100%;
|
|
height: 100%;
|
|
margin: 0;
|
|
}
|
|
|
|
body {
|
|
color: #b8b;
|
|
padding-left: 1rem;
|
|
background-color: #111;
|
|
margin: 0;
|
|
}
|
|
|
|
h1 {
|
|
}
|
|
|
|
li {
|
|
list-style-type: georgian;
|
|
border-left: 1lh outset var(--color);
|
|
}
|
|
|
|
a {
|
|
color: #c3c;
|
|
text-decoration: none;
|
|
}
|
|
|
|
a:visited {
|
|
color: #b2b;
|
|
}
|
|
|
|
canvas {
|
|
border-radius: 4113cm;
|
|
border: 1px solid #b8b;
|
|
image-rendering: pixelated;
|
|
width: min(514px, 95vw);
|
|
}
|
|
</style>
|
|
<title>the m,cai webring</title>
|
|
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
|
<script>
|
|
// yo dawg,
|
|
var updates_per_update = 1;
|
|
window.onload = () => {
|
|
let ch = [...document.querySelector("ul").children];
|
|
for (let c of ch) c.appendChild(document.createElement("span"))
|
|
for (let i = 0; i < ch.length; i++) {
|
|
ch[i].onmouseover = () => {
|
|
for (let c of ch) c.querySelector("span").innerText = "";
|
|
|
|
let l = ch[i==0?ch.length-1:i-1].querySelector("span");
|
|
let r = ch[i==ch.length-1?0:i+1].querySelector("span");
|
|
l.innerText = "(left)";
|
|
r.innerText = "(right)";
|
|
};
|
|
}
|
|
|
|
let c = document.querySelector("canvas").getContext("2d");
|
|
let [cx, cy] = [256, 256];
|
|
let randr = (l, h) => Math.random() * (h-l) + l;
|
|
let parts = ch.map(c => ({x: cx, y: cy, color: c.style.getPropertyValue("--color")}));
|
|
let dist = (x1, y1, x2, y2) => Math.sqrt((x2-x1)**2 + (y2-y1)**2);
|
|
function update() {
|
|
// c.clearRect(0, 0, 512, 512);
|
|
for (const p of parts) {
|
|
c.fillStyle = p.color;
|
|
c.fillRect(p.x, p.y, 1, 1);
|
|
p.x += Math.round(randr(-1, 1));
|
|
p.y += Math.round(randr(-1, 1));
|
|
if (dist(cx, cy, p.x, p.y) >= 257) {
|
|
if (p.x > cx) p.x--;
|
|
if (p.x < cx) p.x++;
|
|
if (p.y > cy) p.y--;
|
|
if (p.y < cy) p.y++;
|
|
}
|
|
}
|
|
}
|
|
setInterval(() => {for (let i=0;i<updates_per_update;i++)update()}, 0);
|
|
}
|
|
</script>
|
|
</head>
|
|
<body>
|
|
<h1>the m,cai webring</h1>
|
|
<ul>
|
|
<li style="--color: #008282"><a href="https://terezi.pyrope.net">terezi.pyrope.net</a>
|
|
<li style="--color: #a0a08b"><a href="https://lisanne.gay">lisanne.gay</a>
|
|
<li style="--color: #14a02e"><a href="https://coolstation.space">coolstation.space</a>
|
|
<li style="--color: #306850"><a href="https://spax.zone">spax.zone</a>
|
|
</ul>
|
|
<canvas width=512 height=512></canvas>
|
|
</body>
|
|
</html>
|