Thursday, January 31, 2019

Farey Sequences and Ford Circles in JavaScript






Update - Ford Circles in Desmos

It's also a nice exercise to create Ford circles using Desmos - here is an example of a graph that does this.

Some Ford Circles in Desmos

Just as with implementing the JavaScript, getting this to work in Desmos first involves creating some fractions, then finding which fractions to include in the Farey sequence, and then drawing circles using the elements of that sequence. The steps that this graph follows are basically:

  1. create an mxm set N of numbers (n,d), where n and d are integers 1...m.
  2. shift and reduce this set of ordered pairs so that in any given row, 0 <= n < d+1.
  3. reduce this set further eliminating any ordered pairs where gcd(n,d) > 1.

These ordered pairs can be treated as fractions (n/d), and we will only have fractions between 0 and 1 that are in reduced form - if we then order these fractions along the number line, we have a 'Farey sequence' of fractions. In this, we didn't use the recursive approach used in the JavaScript example that uses the mediant. Drawing the circles uses the same formula used in the JavaScript example (and the Processing and Fathom examples mentioned above).

Here s is a scale factor, f_q is the quotient and f_d is the denominator of the fractions derived from the sequence N described above.