<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>C-Fiber Transfiguration Auto Animation</title>
<style>
html, body {
margin: 0;
padding: 0;
overflow: hidden;
background: #000;
}
canvas { display: block; }
</style>
</head>
<body>
<canvas id="fiberCanvas"></canvas>
<script>
const canvas = document.getElementById('fiberCanvas');
const ctx = canvas.getContext('2d');
function resizeCanvas() {
canvas.width = window.innerWidth;
canvas.height = window.innerHeight;
}
resizeCanvas();
window.addEventListener('resize', resizeCanvas);
const nodesList = [
"Piezo2","TRPV4","ASIC3","TREK-1","TRAAK","Nav1.7","Nav1.8",
"Calcineurin","PKC","MAP kinases","ROCK","MMP-2","MMP-9",
"TIMP","Integrins","NOS","Adenylate cyclase","cAMP","PKA",
"Calcium","GAP-43","BDNF","NT-3"
];
class Node {
constructor(x, y) {
this.x = x;
this.y = y;
this.radius = 15;
this.edges = [];
this.pulse = Math.random() * Math.PI * 2;
}
draw() {
const brightness = Math.sin(this.pulse) * 50 + 205;
ctx.fillStyle = `rgb(${brightness}, ${brightness/2}, 255)`;
ctx.beginPath();
ctx.arc(this.x, this.y, this.radius, 0, Math.PI * 2);[Expand Post]
ctx.fill();
this.pulse += 0.05;
}
connect(node) {
this.edges.push(node);
}
drawEdges() {
this.edges.forEach(n => {
ctx.strokeStyle = 'rgba(150,150,255,0.3)';
ctx.beginPath();
ctx.moveTo(this.x, this.y);
ctx.lineTo(n.x, n.y);
ctx.stroke();
});
}
}
// Create nodes in a circular layout
const centerX = canvas.width / 2;
const centerY = canvas.height / 2;
const radius = Math.min(canvas.width, canvas.height) * 0.35;
const nodes = nodesList.map((name, i) => {
const angle = (i / nodesList.length) * Math.PI * 2;
return new Node(
centerX + Math.cos(angle) * radius,
centerY + Math.sin(angle) * radius
);
});
// Connect nodes linearly + self-loop
nodes.forEach((node, i) => {
const next = nodes[(i + 1) % nodes.length];
node.connect(next);
if (Math.random() < 0.3) node.connect(node);
});
// Animation loop
function animate() {
ctx.fillStyle = 'rgba(0,0,0,0.15)';
ctx.fillRect(0, 0, canvas.width, canvas.height);
nodes.forEach(node => node.drawEdges());
nodes.forEach(node => node.draw());
requestAnimationFrame(animate);
}
animate();
</script>
</body>
</html>