Perceptron Visualizer

Try It

Description

What it is: A perceptron is the most basic neural network — one neuron, two inputs, one output. It learns to draw a straight line (the decision boundary) that separates two classes of points. Everything on one side of the line is class +1, everything on the other is class −1.

What happens when you train it: The algorithm looks at each point in turn. If it classifies the point correctly, nothing changes. If it gets it wrong, it nudges all three weights (w₁, w₂, bias) slightly toward the right answer. Repeat this enough times and the line converges to a position that separates the two classes — if the data is linearly separable.

When it fails: If you place points that cannot be separated by any single straight line (the XOR pattern is the classic example), the perceptron never converges. This limitation is exactly why multi-layer networks were invented.

How the Math Works

  Perceptron — Forward Pass
  ══════════════════════════════════════

  Inputs: x, y  (the point's coordinates)

  x ──── w1 ────┐
                ├──► (w1·x + w2·y + bias) ──► sign() ──► +1 or -1
  y ──── w2 ────┘
         bias ──┘

  sign(n) = +1 if n ≥ 0, else -1

  ──────────────────────────────────────

  Weight Update (when prediction is wrong)

  error  = actual_label − predicted_label
           (0 if correct, ±2 if wrong)

  w1   += learning_rate × error × x
  w2   += learning_rate × error × y
  bias += learning_rate × error

  ──────────────────────────────────────

  Decision Boundary

  The line where the score = 0:
  w1·x + w2·y + bias = 0

  Solving for y:
  y = −(w1·x + bias) / w2

Three numbers — w1, w2, bias — define the entire model. Training just nudges them until the line sits between the two classes.

Dev Notes

No Libraries

The entire perceptron — weights, update rule, boundary calculation — is ~30 lines of plain JavaScript. No PyTorch, no TensorFlow, no ML library of any kind.

Why It Matters

Every modern neural network is just many perceptrons stacked in layers, connected by activation functions. Understanding this one neuron is understanding the foundation of all of them.

The XOR Problem

Try placing points in an XOR pattern — top-left and bottom-right blue, top-right and bottom-left red. The perceptron will never converge. This is the exact limitation that motivated multi-layer networks in the 1980s.