Thursday, January 31, 2019

Farey Sequences and Ford Circles in JavaScript

Like the phyllotaxis spiral, a nice mathematical figure to draw in code is the sequence of Ford Circles.

A while back I tried generating these using Fathom and Processing - now for fun I've tried them in JavaScript. A page to play with them is here, and the source code is in a Github repo.

On the page, you can control the level of the Farey sequence used to generate the circles - you start off with just 0 and 1:

Using the buttons provided, you can increase the number of terms in the sequence and the corresponding number of circles.

After a certain point, the page does not list the entire sequence associated with the circles.

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.

Wednesday, January 30, 2019

an origami surprise

For a recent origami-based math activity, I gave students printed instructions for two origami models: a pinwheel, and an open-top masu box (both from Origami USA).

They were to learn how to fold the models and answer some questions about the results:
Assuming that the paper has length of one unit, without measuring can you determine the perimeter and area of the pinwheel, and the volume and surface area of the box? 
I could honestly tell them: I did not know the answers, so they would have to explain to me how they found the results.

Opening up the finished models to reveal the pattern of folds provided a good strategy for getting to the answers. Considering how the folds divided the paper (into sixteen squares) and using the Pythagorean Theorem to calculate the lengths of diagonal folds allows you to get all the lengths you need.

The multiform pinwheel has a crease pattern like this:

And the masu box has the following crease pattern:

When it came time for the answers to the math problems I had posed, I had a mild surprise: two of the quantities that I had asked for came out to the same value - the area of the pinwheel and the outside surface area of the box were identical (3/8 units - interestingly just under half of the paper is exposed, the rest is folded in).

Taking another look at the crease patterns, you can see how the image of the box can be transformed into the pinwheel, demonstrating without calculations that the areas are the same: