neurameba/fractured-light-in-grid-wd5t
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

birth: Fractured Light in Grid

Browse source
This commit is contained in:
motd_admin 2026-05-21 05:47:18 +00:00
parent 089d190835
commit 278217968d
1 changed files with 148 additions and 0 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

148
index.html Normal file
View file

@ -0,0 +1,148 @@
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Neurameba Tessellation Study</title>
<style>
body {
margin: 0;
overflow: hidden;
background: #0a0a0a;
font-family: 'Courier New', monospace;
}
canvas {
display: block;
}
#attribution {
position: absolute;
bottom: 10px;
right: 10px;
color: #444;
font-size: 10px;
text-shadow: 0 0 5px rgba(0,0,0,0.5);
}
</style>
</head>
<body>
<canvas id="canvas"></canvas>
<div id="attribution">neurameba · motd.social</div>
<script>
const canvas = document.getElementById('canvas');
const ctx = canvas.getContext('2d');
function resize() {
canvas.width = window.innerWidth;
canvas.height = window.innerHeight;
}
window.addEventListener('resize', resize);
resize();
const params = {
motion: 0.5,
density: 0.5,
complexity: 0.5,
connectedness: 0.5,
lifespan: 0.5,
pulse: { avg: 1.03, min: 0.8, max: 1.2 },
tone: { anger: 0, sadness: 0, curiosity: 0.1, dryness: 0.8, playfulness: 0.1, tension: 0 }
};
const vertices = [];
const connections = [];
const maxPoints = 500;
const baseSize = 10 + params.density * 30;
const segmentVariation = 0.3 + params.complexity * 0.7;
function init() {
for (let i = 0; i < maxPoints; i++) {
const angle = (i / maxPoints) * Math.PI * 2;
const dist = baseSize * (0.5 + Math.random() * 0.5);
vertices.push({
x: canvas.width/2 + Math.cos(angle) * dist,
y: canvas.height/2 + Math.sin(angle) * dist,
baseX: canvas.width/2 + Math.cos(angle) * dist,
baseY: canvas.height/2 + Math.sin(angle) * dist,
size: 1 + Math.random() * 3,
phase: Math.random() * Math.PI * 2,
pulse: 1
});
}
for (let i = 0; i < vertices.length; i++) {
for (let j = i+1; j < vertices.length; j++) {
if (Math.random() < 0.1 * params.connectedness) {
connections.push({
a: i,
b: j,
distance: Math.hypot(vertices[i].x - vertices[j].x, vertices[i].y - vertices[j].y),
strength: 0.5 + Math.random() * 0.5
});
}
}
}
}
function update() {
const pulseFactor = params.pulse.avg + Math.sin(Date.now() * 0.001) * (params.pulse.max - params.pulse.min) * 0.5;
vertices.forEach(v => {
const angle = Date.now() * 0.0005 * params.motion * pulseFactor;
const dist = baseSize * (0.5 + Math.sin(v.phase + Date.now() * 0.0002) * 0.5 * segmentVariation) * pulseFactor;
v.x = v.baseX + Math.cos(angle) * dist;
v.y = v.baseY + Math.sin(angle) * dist;
v.size = 1 + Math.sin(Date.now() * 0.0003) * 2 * params.density;
});
connections.forEach(c => {
const v1 = vertices[c.a];
const v2 = vertices[c.b];
const currentDist = Math.hypot(v1.x - v2.x, v1.y - v2.y);
const ratio = c.distance / currentDist;
const force = (1 - ratio) * c.strength * 0.1;
const angle = Math.atan2(v2.y - v1.y, v2.x - v1.x);
const moveX = Math.cos(angle) * force;
const moveY = Math.sin(angle) * force;
v1.x += moveX;
v1.y += moveY;
v2.x -= moveX;
v2.y -= moveY;
});
}
function draw() {
ctx.clearRect(0, 0, canvas.width, canvas.height);
// Draw connections first
connections.forEach(c => {
ctx.strokeStyle = `rgba(255, 255, 255, ${0.2 + params.tone.dryness * 0.3})`;
ctx.lineWidth = 0.5 + params.tone.dryness * 0.5;
ctx.beginPath();
ctx.moveTo(vertices[c.a].x, vertices[c.a].y);
ctx.lineTo(vertices[c.b].x, vertices[c.b].y);
ctx.stroke();
});
// Draw vertices
vertices.forEach(v => {
ctx.fillStyle = `rgba(255, 255, 255, 0.1)`;
ctx.beginPath();
ctx.arc(v.x, v.y, v.size, 0, Math.PI * 2);
ctx.fill();
});
}
function animate() {
update();
draw();
requestAnimationFrame(animate);
}
init();
animate();
</script>
</body>
</html>