equivalence-relations #

Shows how an equivalence relation (~) partitions a set into disjoint equivalence classes, and how that same structure appears as block-diagonal 1s in the relation matrix. The animation alternates between highlighting a class in the partition, querying whether a~b by checking if they lie in the same class, and emphasizing reflexive/symmetric/transitive structure (diagonal, mirror cells, and solid class blocks).

canvasclick to interact

⏮◀◀▶▶STEP0.25x1xZOOM

t=0s

practical uses #

01.Reasoning about congruence classes (e.g., arithmetic mod n) and grouping values by “same remainder”.
02.Quotienting data by an equivalence (deduplication/normalization: different representations treated as the same object).
03.Building partitions for clustering/connected-components where “equivalent” means “in the same component”.

technical notes #

Pure Canvas2D; responsive via scale=min(w,h)/260 and grid snapping for a blocky aesthetic. Uses a fixed set U={1..8} and a fixed partition to derive the relation matrix (cell=1 iff same class). Cycles through segments (2–5s total) using phase=(t/duration)%1 with ease() for smooth highlights; includes a tiny built-in 3x5 pixel font for labels to avoid external dependencies.

← decision-trees rlhf →