228

Neural Synaptic Network

Cortical neural arborization network where soma nodes fire action potential electrical spikes across connecting axonal synapses with dendritic branches.

Playground
60 FPS Canvas 2D
Click + Drag to interact with field
</>

Full Executable Algorithm Code

// 036 - Neural Synaptic Network (anatomy)
// 1:1 Original algorithm engine source
function createNeuralSynapse() {
  const NEURON_COUNT = 18;
  const neuronX = new Float32Array(NEURON_COUNT);
  const neuronY = new Float32Array(NEURON_COUNT);
  const spikeTimer = new Float32Array(NEURON_COUNT);
  return {
    setup(context) {
      for (let i = 0; i < NEURON_COUNT; i++) {
        neuronX[i] = context.width * 0.15 + Math.random() * (context.width * 0.7);
        neuronY[i] = context.height * 0.15 + Math.random() * (context.height * 0.7);
        spikeTimer[i] = Math.random() * 5;
      }
    },
    render(context, timeState, params) {
      const { ctx, width, height } = context;
      const speed = Number(params.firingRate || 1.2);
      const connectivity = Number(params.synapseReach || 150);
      const connectSq = connectivity * connectivity;
      const t = timeState.time * speed;
      ctx.fillStyle = "rgba(5, 7, 12, 0.22)";
      ctx.fillRect(0, 0, width, height);
      for (let i = 0; i < NEURON_COUNT; i++) {
        spikeTimer[i] += timeState.deltaTime * speed;
        const isSpiking = spikeTimer[i] % 2.5 < 0.25;
        for (let j = i + 1; j < NEURON_COUNT; j++) {
          const dx = neuronX[j] - neuronX[i];
          const dy = neuronY[j] - neuronY[i];
          const dSq = dx * dx + dy * dy;
          if (dSq < connectSq) {
            const dist = Math.sqrt(dSq);
            const alpha = 1 - dist / connectivity;
            ctx.beginPath();
            ctx.moveTo(neuronX[i], neuronY[i]);
            ctx.lineTo(neuronX[j], neuronY[j]);
            ctx.strokeStyle = hsla(210, 85, 55, alpha * 0.4);
            ctx.lineWidth = 1.2;
            ctx.stroke();
            const pulsePhase = (t * 2 + i * 0.3) % 1;
            const px = neuronX[i] + dx * pulsePhase;
            const py = neuronY[i] + dy * pulsePhase;
            ctx.fillStyle = hsla(185, 95, 80, 0.95);
            ctx.beginPath();
            ctx.arc(px, py, 2.5, 0, Math.PI * 2);
            ctx.fill();
          }
        }
        const somaRadius = isSpiking ? 9 : 6;
        const somaHue = isSpiking ? 50 : 200;
        ctx.fillStyle = hsla(somaHue, 95, isSpiking ? 85 : 65, isSpiking ? 1 : 0.8);
        ctx.shadowColor = hsla(somaHue, 95, 75, 0.8);
        ctx.shadowBlur = isSpiking ? 18 : 6;
        ctx.beginPath();
        ctx.arc(neuronX[i], neuronY[i], somaRadius, 0, Math.PI * 2);
        ctx.fill();
        ctx.shadowBlur = 0;
        for (let d = 0; d < 6; d++) {
          const dendAngle = d / 6 * Math.PI * 2 + t * 0.2;
          const dendLen = 14 + Math.sin(t * 3 + i + d) * 4;
          const ex = neuronX[i] + Math.cos(dendAngle) * dendLen;
          const ey = neuronY[i] + Math.sin(dendAngle) * dendLen;
          ctx.beginPath();
          ctx.moveTo(neuronX[i], neuronY[i]);
          ctx.lineTo(ex, ey);
          ctx.strokeStyle = hsla(210, 80, 60, 0.5);
          ctx.lineWidth = 1;
          ctx.stroke();
        }
      }
    }
  };
}

// Default parameters from content metadata
const defaultParams = [
  {
    "key": "firingRate",
    "label": "Spike Firing Rate",
    "type": "range",
    "min": 0.4,
    "max": 3,
    "step": 0.1,
    "defaultValue": 1.2,
    "description": "Neuronal action potential frequency"
  },
  {
    "key": "synapseReach",
    "label": "Synaptic Reach",
    "type": "range",
    "min": 80,
    "max": 240,
    "step": 10,
    "defaultValue": 150,
    "description": "Axon connection radius threshold"
  }
];

if (!window.__art_instances) window.__art_instances = {};
if (!window.__art_instances['neural-synapse']) {
  const inst = typeof createNeuralSynapse === 'function' ? createNeuralSynapse() : null;
  if (inst && inst.setup) {
    inst.setup({ ctx, width, height, dpr: 1, aspectRatio: width / height }, defaultParams);
  }
  window.__art_instances['neural-synapse'] = inst;
}

const instance = window.__art_instances['neural-synapse'];
if (instance && instance.render) {
  instance.render(
    { ctx, width, height, dpr: 1, aspectRatio: width / height },
    { time, deltaTime: dt, frameCount: Math.floor(time * 60), fps: 60 },
    defaultParams
  );
}
Edit in Interactive Playground Zero Dependencies • Standalone Canvas 2D
ƒ

Mathematical Formulation

high
Analytical Equation
CmdVdt=IextgNam3h(VVNa)gKn4(VVK)gL(VVL)C_m \frac{dV}{dt} = I_{\text{ext}} - g_{\text{Na}} m^3 h (V - V_{\text{Na}}) - g_{\text{K}} n^4 (V - V_{\text{K}}) - g_L (V - V_L)
Click to expand
Compact Formula
spike = (timer % 2.5) < 0.25, pulse(px, py) = soma_i + (soma_j - soma_i) * (2t % 1)

Mathematical Tags

#neurons #brain #synapse #anatomy #neuroscience #biology #action-potential
Author: Math Art Core Target: 60 FPS

Export & Embed: Neural Synaptic Network

4K PNG Snapshot

High-resolution single frame render

WebM Video (5s Loop)

60 FPS browser-captured stream

Standalone JS Script

Complete executable Canvas 2D algorithm

HTML Iframe Embed

<iframe src="https://art.fazleyrabbi.xyz/embed/neural-synapse" width="500" height="500" frameborder="0" loading="lazy"></iframe>
ESC
↑↓ Navigate Select
110 Mathematical Artworks
Made by Fazley Rabbi

Support the Project

Keep mathematical creative coding alive & open source

Or via Direct Payoneer ($0 Fee)
Payoneer Customer ID: $0 Fee Direct
24076084

💡 Payoneer app: Go to Pay → Pay to recipient → Enter ID 24076084.

Thank you for supporting generative mathematical animations! ✨