Winding number

 from Red Blob Games
23 May 2019

(On this page I’m exploring an alternate interaction for Explanaria’s explanation of winding number[1].)

The winding number is the total number of turns a curve makes around a point. Mouse over the diagram to see the intersections at different angles.

Winding Number = 3 = number of intersections*


  1. This is a quick & dirty prototype — need to implement touch events
  2. The diagram should match the text. The text says “number of turns” but the diagram shows “number of intersections”.
  3. * In this diagram, we count the number of intersections. However, this is not enough to explain winding number, as we need to handle curves that go back the other way. Maybe show +/- arrows instead of circles? See examples on the wikipedia page[2].
  4. Add a set of 3–5 curves to choose from.
  5. Does it matter where the center point is? Maybe another interaction would be to allow changing the center point.

Email me , or tweet @redblobgames, or comment: