February 01, 2016

Written by:

Topics:

We’re pleased to announce the launch of our new podcast: Especially Big Data. While it deals with data both big and small, the podcast explores the many subjects data can document– which can include everything from what you ate for breakfast this morning to the variability of global ocean currents. In other words, people collect data to track almost everything these days; and we’re here to tell you everything it can explain, while also shedding light on everything it leaves out.

ebd-x7

In our pilot episode, The truth about grandma’s perfume, we dive into the implications and ethics of documentation, and explore whether your daily dose of rhino horn extract should be recorded for “medicinal” or “commercial” purposes. Tune in and tell us what you think.

You can keep up with our latest episodes here.

January 29, 2016

Written by:

Topics:

We’re excited to announce our latest project, an interactive timeline for GE’s corporate website showcasing their transformation as a company over the last 100+ years. GE is one of the world’s largest companies, and that only feels more true as you look through their history, and see how they have influenced almost every sector of technology and industry. From healthcare to aviation, energy and power to television, GE has touched it all.

One of the illustrated headers Rachel created for the project. This one is for Appliances.
One of the illustrated headers Rachel created for the project. This one is for Appliances.

Fathom has done work with GE in the past, but it’s been a while! Recently, we teamed up with their team and our friend, Camille of Estuary Branding, to take a fresh look at GE’s historical timeline. The previous timeline was out of date in both content and structure. The goals of the new Transformation Timeline were to showcase the people, events and technology that define each of GE’s businesses, and demonstrate how GE has changed over time.

lightbulb2

The original timeline was a series of webpages with many image carousels, and it lacked a narrative flow. For our piece, we wanted visitors to get the big picture of GE, while also having the ability to explore individual events. The landing page features an awesome animation by Rachel, which highlights the world-changing technologies GE developed over its 100+ year history. Their innovations started with the lightbulb, and have evolved to the vacuum tube, and all the way to today’s wind turbines.

The landing page
The landing page

Below the animation there is also an overall view of the timeline. You can see how GE’s earlier history spanned mostly across light, energy, and transportation, while some of the later businesses, like aviation, didn’t start until almost midway through the company’s history.

A technology transfer
A technology transfer

Part of what makes GE such an interesting company is that they have people working across all different technological fields, and those businesses communicate and share technology with each other. We were able to show this in the timeline through technology transfers. Throughout the timeline, there are examples of these technology transfers, and a special view showing how two or more events across businesses are connected.

cats

There were also lots of events I didn’t know GE was responsible for. For example, Thomas Edison, not only a fellow Cooper Union grad, but also the founder of GE, invented the first motion picture camera. A video on YouTube recently surfaced showing a film of cats that had been recorded with Edison’s camera. That’s right, GE was responsible for (probably) the first cat video ever.

While they’re most famous for their spinning things (gas turbines, wind turbines and airplane engines), they have produced a lot of strange and experimental technologies throughout their history. One example is the Walking Truck, a machine created in 1969 to facilitate navigating rough terrain. The project ultimately failed, but it has inspired countless sci-fi cousins.

The gallery of GE Appliances images.
The gallery of GE Appliances images.

For some of the older consumer businesses, there are a lot of amazing advertisements and photography. We wanted to make sure that those materials, which GE has been known for in the past, were included in the timeline as well. For Appliances and Broadcast, we added a gallery view of historical images, which included things like ads for pink GE refrigerators and photographs of the first toaster ever!

Overall it was a pretty amazing project and there are lots of goodies hidden throughout the timeline. Check it out for yourself at ge.com/transformation!

Another illustrated header, this time for healthcare.

January 29, 2016

Written by:

Topics:

This past fall I spoke at the Themed Entertainment Association (TEA) SATE conference at Carnegie Mellon University. SATE stands for Storytelling, Architecture, Technology and Experience — the core elements of themed entertainment — and by “themed entertainment” they mean amusement parks like Disney World and Universal Studios, among others.

TEA has posted my talk, “Technology Unleashed”, if you’re interested in watching.

Presenting in front of a massive screen at the SATE conference.
Presenting in front of a massive screen at the SATE conference.

SATE is a two day conference dedicated to exploring how their core elements can be used to create meaningful places, experiences, and events. I was asked to speak about how data visualization can be integrated into Experience Design. Being an industry outsider, it was interesting to speak to an audience that is less familiar with data visualization, and the ways it can be translated into experience design within the park architecture, behind the scenes, and after visitors leave the parks.

There were a lot of other great speakers, take a look:

“Experience in the Age of Big Data” – Joshua Jeffery

“Social Action Unleashed” – Anna Musun Miller

“Avoid the Penny” – Adam Bezark

It was a great conference. Thanks to the team at TEA for having me.

January 22, 2016

Written by:

Topics: , , ,

We’re happy to report that for another year, our curiosity and love of print have enabled us to give back to our local community and beyond. Our latest printed project—The Preservation of Favoured Traces—continues the tradition. Proceeds from all our books, offset posters and on demand posters are donated to organizations that support areas we are interested in. From supporting female entrepreneurs to encouraging more active and sustainable transportation, the diverse interests of folks in the office are reflected by our areas of donation.

IMG_08060

  • The Somerville Homeless Coalition has been working to put themselves out of business since 1985. We wanted to help them do that by funding a one bedroom apartment to help get someone off the street.
  • Cooper Hewitt’s: Designers of Tomorrow program offers students creative problem-solving tools.
  • Resilient Coders creates programming for kids from typically underserved communities to learn how to code.
  • Boston Cyclists Union is an organization that advocates for better infrastructure for cyclists and pedestrians in the Greater Boston Area.
  • Bunker Hill Community College has a fund that supports students in emergency situations, when they may otherwise need to drop out.
  • Bikes Not Bombs uses bicycles as a vehicle for change by teaching underserved youth how to build their own bikes. They ship bicycles to third world countries for use for transportation. Terrence rode in the Bike-A-Thon so the poster fund matched his fundraising efforts.
  • Heifer International has a fund that trains women that are starting their own businesses in Haiti. #girlboss
  • Last year a devastating earthquake rattled Nepal, so we updated our Quakes project that showed the aftershock tremors that further damaged to the region. It is tough to find organizations that ensure finances get to the people in need. With this in mind, our research led us to Save the Children and Mercy Corps.

IMG_0806

Check out our books, offset posters and on demand posters today, and stay tuned (@fathominfo) to learn where we donate in 2016!

January 15, 2016

Written by:

Topics:

The Android Experiements are composed of a gallery of creative open source projects developed for the Android platform, and were introduced as a way to “encourage more developers to challenge how we interact with the devices we use every day.” In the spirit of the experiments, we set out to challenge how users interact with their Android Wear devices, and in doing so challenged none more than ourselves.

There were design questions: What opportunities exist beyond the more traditional mouse and keyboard or touchscreen input? What types of gestures and interactions are natural and intuitive, yet novel and compelling? Can we give users control over their experience while still surprising them?

And there were engineering questions: What types of input are available? What technologies should we use? How do we deliver a consistent product across different types of hardware?

We submitted three watch face designs to the gallery, all of which have a unique interactive component that leverages built-in sensors on the watch.

dopamine-loop-github-001
Fathom Watch Faces
  • Coubertin Rings is inspired by Pierre de Coubertin’s Olympic rings, and promotes daily physical activity. A new ring is formed each time the wearer takes a step. It bounces playfully around the screen and forms larger rings as the user takes more steps.
  • Bouncing Isaac pays homage to Isaac Newton’s prism experiments, which demonstrated that white light is not “colorless”, but rather, a blend of many different colors. Geometric patterns dance across the screen, influenced by the movement of the wearer throughout the day.
  • Gaze Effect elicits the feeling that the watch is looking back at the user whenever she looks at the watch, a reference to Jacques Lacan’s definition of “gaze”. Animated eyes appear on and disappear from the screen based on how frequently the user looks at the watch.

The Coubertin Rings design in particular presented obstacles that set it apart from the other two. First, it relies on a step counter, which is not a dedicated hardware sensor. (Examples of dedicated hardware sensors include the accelerometer and gyroscope.) Rather, it is a “software-based” sensor, which processes input from the hardware sensors to calculate second-order information. Not only does this introduce latency into the interface, it adds an additional layer of variability and complexity already present in the landscape of Android Wear devices. We found that watches with varying Android versions calculate steps very differently, which made it difficult to design a predictable and consistent experience on all the various devices. In addition, it is the only one of Fathom’s watch faces that delivers quantitative feedback to the user, so it’s crucial that the feedback is accurate.

IMG_20160112_134700791
Watch Faces in Action

 

We modified the Rings to use the step detector— a faster but less sophisticated version of the step counter— so that the display will update in real time when the user is looking at the watch. When in ambient mode, it reverts back to the step counter. In this way, we are able to strike a balance between instant feedback and accuracy. To mitigate the issue of variability across devices, we adopted the same step counter that Google Fit uses.

We soon learned that the Google APIs come with their own set of challenges and complexities, both for developers and users. For instance, Google Fit must now be activated on the watch in order for Coubertin Rings to count steps correctly. In the end, though, we were able to replace the individual device step counters with a call to a universal, device-independent API. We also get the added benefit of step count being stored in persistent memory. This means that the Coubertin Rings counter won’t reset if the user switches watch faces, and it will even show steps that were counted on other devices as long as they’re connected by the same Google account.

google-reviews

After releasing the watch faces on Google Play and reading feedback from users, we were surprised to learn that Bouncing Issac– the simplest of the three to develop– is the most popular design. This poses a new question: What depth and complexity of interaction do users expect in a watch face? The purpose of experimentation is discovery, and participating in the Android Experiments has led us– and will hopefully continue to lead us– to discover the challenges and opportunities of developing for wearables.

January 12, 2016

Written by:

Topics:

Fathom’s recent Architecture of Typography workshop was a fun opportunity to hone our design skills and discuss trending topics in type.

Typography has become part of the public consciousness like never before. An ever-increasing variety of people, aside from graphic designers, are discussing Kerning, rags, and favorite (or most hated) typefaces. This dispersion of design across a variety of audiences resonates strongly with Fathom, as we intentionally pursue projects that cross creative domains.

aot-comicsans-mug

Recently, several Fathomistas with strong coding backgrounds requested an internal design workshop to share knowledge and skills, specifically about typography. One particularly vocal proponent, Jose, is a recovering architect studying at the Harvard Graduate School of Design. So, with a nod toward this interdisciplinarity and our own recent explorations in 3D space, the “Architecture of Typography” workshop was born.

James's clean, structured slides stood in stark contrast to the postmodern nightmare Brian was preparing to unleash.
James’s clean, structured slides stood in stark contrast to the postmodern nightmare Brian was preparing to unleash.

James and I, former classmates, offered to relive our design school glory days and lead the workshop. Studio interest was split between applied typography and design theory, so we divided it into two segments. The challenge was to avoid overwhelming our audience with too much content, while providing a good balance of technical–formal advice and a basic context in which to discuss type. Fortunately this was just the introductory session!

Slides from the anatomy of type lesson, culminating in a pop quiz.
Slides from the anatomy of type lesson, culminating in a pop quiz.

James kicked things off with the essentials: the anatomy of type, and how to look at and describe a letterform. There are of course many rules and theories that can be applied to typography, but everything starts with seeing type in terms of its shape and structure. After a quick pop quiz, James covered specific tips for common tasks, like choosing an appropriate typeface, and the basics of a strong layout. Followed, of course, by pinning work to the wall for a large group crit .

Discussing the typographic approaches of critical graphic design pieces, like The Falklands Project by Metahaven
Discussing the typographic approaches of critical graphic design pieces, like The Falklands Project by Metahaven.

I picked up from there and led a brief historical overview of digital typography. It is already a cliché to say that computerized media tools have revolutionized design. But by discussing concrete examples of typographic evolution across recent decades, we hoped to find some threads toward understanding the current design climate, including many independently published “critical design” works. Plus, it was a chance to show off a few old issues of Émigré from the collection!

No workshop would be complete without handouts. We prepared a list of popular, well-designed typefaces for our students to test in future projects.
No workshop would be complete without handouts. We prepared a list of popular, well-designed typefaces for our students to test in future projects.
A second handout featured typographically relevant designers, publications, software, and other useful things to explore.
A second handout featured typographically relevant designers, publications, software, and other useful things to explore.

It was a whirlwind session. To be honest, we could have dedicated a semester’s worth of classes to exploring the issues raised in this one-evening event. But this introduction was an important part of our response to the current design landscape. Fathom’s hybrid approach to making, which cross-pollinates research, computation, and design throughout the creative process, is all the more relevant as audiences from various backgrounds become increasingly familiar with design and technological concepts.

It all comes back to print. We rounded the evening off with a show-and-tell session of books, posters and accessories featuring interesting type.
We rounded the evening off with a show-and-tell session of books, posters and accessories featuring interesting type.

We hope to make this the first of a continuing workshop series, so stay tuned for more reports!

January 08, 2016

Written by:

Topics:

For the past few weeks, I have served as Fathom’s in-residence explorer of 3D printed information design with Formlabs’ Form1+ printer. Because my goal was to focus on the physical medium and form, I tried to stay away from directly 3D-ifying data visualizations that already exist in 2D (think extruded line graphs, bar graphs, etc.), or from arbitrarily mapping data points onto 3D space for the sake of aesthetics. Instead, I zeroed in on the features of physical objects that cannot be expressed on a screen, breaking them into two categories: material and interaction. More on forks later.

To encode meaning into material itself, I considered what makes us want to pick up and touch certain objects, as well as the subtle features that cue our immediate understanding of an object – what it’s for, who uses it, how old it is. In terms of interactions, I analyzed tasks that are very efficient for humans in the 3D world: quickly sorting and distributing many small objects, using peripheral vision, rotating and seeing multiple views of an object, and focusing on a small detail while keeping the bigger picture visible in the background.

DataObjects_mindmap
Mind map of information in 3D

Most of my experiments employed texture as a way to show what an object represents. If the texture is legible and successfully references familiar objects, there is no need for a key – one piece would clearly represent grain, another meat – though both made of 3D printed plastic. My inspiration for the food-related textures came from a series of chocolates designed by Nendo, a Japan-based studio, which led me to a massive list of Japanese words with no English equivalent, all used to describe the textures of different foods.

textureTiles
Texture experiments inspired by the chocolatexture project from Japanese design studio Nendo.
Texture tiles 3D printed in black resin.
Texture tiles 3D-printed in black resin.

One example of an efficient human task that really stuck with me was the motion of quickly sorting silverware into compartments. Thinking along the lines of categorization, I remembered the card game SET from my childhood, and set out to design a 3D version. In this design, I also allowed for a hierarchy of information: certain characteristics and trends are discernible at a glance, while more subtle details reveal themselves through a closer look at a subset of pieces.

set3d
The number of prongs on each piece is immediately obvious, but subtle differences in the length of the prongs are apparent once similar pieces are grouped together.
The blocks can be stacked and combined in different ways to make the "game" more interactive.
The blocks can be stacked and combined in different ways to make the “game” more interactive.

In a more spontaneous experiment, I tested what kind of objects people are compelled to pick up and play with in order to understand them, designing a sort of handheld clock with multiple hands that nest within each other. No one (myself included) could quite figure out what it should be, though maybe that is partly what made it compelling. I also discovered some of the limitations of SLA printing, which is the method of 3D printing that uses a UV laser to harden a vat of liquid resin one layer at a time. For starters, the laser has difficulty printing articulating parts that require a certain clearance between them, as the parts tend to fuse together during the printing process. It is also challenging to clean support material out of inner channels.

Telescoping pie chart, Golden Compass, orbiting planets, turbine - what is it?
Telescoping pie chart, Golden Compass, orbiting planets, turbine – what is it?

My final series of explorations were based on data from a national public libraries survey, containing indicators on library use and spending from 1992-2013. I chose to really push the idea that objects can tell stories, with the example of sea glass in mind. Sea glass experts can tell how old a piece of glass is, what kind of bottle it came from, and where it was made – all from subtle cues like texture, color, thinness, purity, and knowledge of trade routes.

I let the content of the data itself inform my design: referencing the metal type used in letterpress printing, with each piece of type representing a state in 2003 (left) and 2013 (right). The height of each piece reflects how much money each state’s libraries spent on printed material per capita (as of 2013), and the amount of wear of each piece on the right indicates how much spending on printed material was cut in the last decade.

libraryType
Massachusetts was one of the biggest supporters of the printed word in 2013 – spending $3.51 per capita on books, journals, and magazines. Maine spent slightly less ($2.49), but has hardly reduced its spending since 2003. Georgia not only spends the least on printed materials ($1.02), but also cut its spending the most drastically in the last decade ($2.80 per capita in 2003).

letter_print

Tackling such an open-ended prompt, I feel I only scratched the surface of 3D printed information design, and further exploration is definitely in order. Some other ideas thrown around the studio were to make metal casts from 3D printed parts, design for different abilities (e.g. blindness), use mechanical properties like friction to sort how easily different parts slide across a table, and create a big data analogue to the silverware in a drawer: one million forks in a centrifuge.

December 18, 2015

Written by:

Topics:

The past year has been action-packed here at Fathom. We gave numerous talks, hosted a great collection of visitors, and launched one of our largest projects to date.

2015-02-02-02

2015 marks year six for Fathom, and it has been a big one. Over the past twelve months we’ve given talks at Internet Week, Eyeo, Williams College, The World Bank, Tufts, the Visualized Conference, PopTech, SATE, the MIT Media Lab, and Olin College.

IMG_0485-b-e

Girls Who Code and Olin College came to visit and learn about Fathom, Processing, and how we work.

We launched one of our largest projects to date, No Ceilings, and showcased it at this year’s Clinton Global Initiative as well as one of their partnered events with Self Magazine.

We also launched a piece on Animal Trade with National Geographic, a series of Watch Faces for your Android Wear, and a 2.0 version of World Bank India.

book-crop

We were even able to launch a few side projects of our own that looked at the composition of Jaws, the poetic nature of U.S. city names, and we redesigned Ben’s The Preservation of Favoured Traces into a set of prints.

We visited Salem to talk design, technology and data at DeSoFa.

And when we were done trampling around Salem, we snuck in some time to teach Python, celebrate Tau and learn about shaders.

All in all it was a great year, and we’re looking forward to the next. See you in 2016!

IMG_1130

December 04, 2015

Written by:

Topics: , , ,

Hot off the press—and just in time for the holidays—are two print projects that look at the six editions of Charles Darwin’s, On the Origin of Species. Originally developed as an interactive piece, we decided to continue our tradition of producing and selling unique printed artifacts. And as always, all of the proceeds from this work will be donated to charities focused on education, science, music, art, food, and homelessness.

The Preservation of Favoured Traces (book detail)
The Preservation of Favoured Traces (book detail)

Charles Darwin first published On the Origin of Species in 1859, and continued revising it for more than ten years. As a result, his final work reads as a composite, containing more than a decade’s worth of shifting approaches to his theory of evolution. In fact, it wasn’t even until his fifth edition—published ten years after the original book—that he introduced the concept of “survival of the fittest.” By color-coding each word of his final text by the edition in which it first appeared, our interactive and print representations of Darwin’s work trace the evolution of his thoughts and revisions, showing that even today’s most established scientific theories underwent major changes before becoming accepted or absolute ideas.

The original interactive version was built in tandem with exploratory and teaching tools, enabling users to see changes at both the macro level, and word-by-word. The printed poster allows you to see the patterns where edits and additions were made and—for those with good vision—you can read all 190,000 words on one page. For those interested in curling up and reading at a more reasonable type size, we’ve also created a book.

IMG_2688-on-wall
The Preservation of Favoured Traces (poster)

The poster measures 24 by 36 inches and is printed on Bright White Finch Fine 80lb cover. The type is set in Bell Centennial, a typeface that maintains legibility at very small sizes. We pushed the limits of this typeface at a very tiny 2.8 points. This allows the color-coded type to be seen as stripes of color from far away, but when you get very close to the print you can still make out all the words. The poster is printed using six unique Pantone spot colors to allow the text the cleanest detail possible. Purchase a copy of the poster here.

20151201-_MG_6386
The Preservation of Favoured Traces (book cover)

The 6 by 9 inch hardcover book is printed on demand, and sold through Blurb. Printing on demand means each book is printed individually for you. The type is set in Century Schoolbook at 9.75 points for a more pleasant reading experience, and contains the unique color-coded edition highlights. Purchase your copy here.

To see the full project description and to explore the interactive version, please visit our project page.

Happy holidays from all of us at Fathom!

November 10, 2015

Written by:

Topics:

In my last blogpost, I showed some visualizations generated by usage data from our tool Mirador. These visualizations rely on the calculation of a “distance” between variables in a dataset, and Information Theory allows us to define such distance, as we will see below.

The notion of distance is essential to most visual representations of data, and we are intuitively– possibly innately– familiar with it. If we are in two or three dimensional space, we can use the Euclidean distance between two points `p_{1}=(x_{1}, y_{1})` and `p2=(x_{2}, y_{2})`, defined as `d(p_{1}, p_{2}) = sqrt((x_{1} – x_{2})^2 + (y_{1} – y_{2})^2)`, to determine the distance between any pair of points in the space.

But how do we define “distance” between more abstract entities, such as random variables? Mathematically, a distance function in an arbitrary set is a function that gives a real number for any pair of objects from the set, and satisfies the following “metric” properties:

  • `d(p, p) = 0` for any `p`. The distance of any element with itself is always zero.
  • `d(p, q) = 0` if and only if `p = q`. The distance between two objects can only be zero when the two objets are identical, and vice versa.
  • `d(p, q) \leq d(p, w) + d(w, q)`. This last property is called the triangle inequality, and geometrically means that the distance traversed between two objects `p` and `q` is always less than traversing through an intermediate object `w`:

Any function that satisfies these three properties is called a distance. The Euclidean distance discussed before is one such function, but there are other distance functions in 2-D or 3-D space that are not Euclidean, for example the Manhattan and Chebyshev distances.

Thus, if we are in the 2-D or 3-D spaces there are several distance functions we can use to quantify how far apart are pairs of elements from each other. However, if we are working with sets of elements that are not 2-D or 3-D vectors, it can be harder to get a sense of “distance” between “points” in the space. I found it very interesting that we can actually define a proper distance function between arbitrary random variables. In a previous post, I did an informal introduction of the Shannon Entropy `H(X)`, a mathematical measure of the amount of “surprise” received upon measuring a random variable `X`. This definition led us to the concept of mutual information `I(X, Y)`, which quantifies the level of statistical dependency between two variables `X` and `Y`.

We concluded that `I(X, Y) = H(X) + H(Y) – H(X, Y)`, which we can visualize as the area shared between the marginal entropies `H(X)` and `H(Y)`, as depicted in this diagram.

The mutual information varies between `0`, when the two variables are independent, and `H(X, Y)`, when they are statistically identical. So what about the remainder of subtracting `I(X, Y)` from the joint entropy `H(X, Y)`? It is `0` when the variables are identical, and takes the maximum value `H(X, Y)` when they are totally unrelated. Could it be then that the following quantity:

`D(X, Y) = H(X, Y) – I(X, Y)`

is our distance function? We can use a simple Venn diagram to represent this function graphically:

The smaller the intersection is (the less correlated the variables are) then the larger the area of the disjoint pieces will be, and so the distance `D(X, Y)`. When the variables are entirely uncorrelated, then the intersection is empty and the distance reaches its maximum value `H(X, Y)`.

In order to find out, we need to prove that this function does indeed satisfy the three metric properties. From the Venn diagram itself we can quickly verify the first two: when the two circles are completely overlapping, then the difference between area of the intersection and the area of the union is exactly `0`, which means that `D(X, X) = 0`. We already discussed that if two variables are statistically identical then the mutual information is equal to the joint entropy and so `D(X, Y) = 0`. For the converse, we just need to note that if the area of the intersection is the same as that of the union, then the only possibility is that the two ellipses are coincident, hence `X = Y`.

The final part is to check the triangle inequality, meaning that we need to verify that:

`D(X, Y) \leq D(X, Z) + D(Z, Y)`

This looks like the most challenging step! However, we can put together a simple graphical proof inspired by the previous pictorial representation of our candidate distance function. Since this “informational distance” is precisely the portion of the joint entropy that is not shared between the two variables, we could represent the situation with three variables also via a Venn diagram as follows:

By hovering over the elements of the inequality, we can see that the sum `D(X, Z) + D(Z, Y)` is greater or equal than `D(X, Y)` since it covers the entire area of the union of the three circles, with the exception of the intersection between all of them.

This visual demonstration relies on identifying the circles with the Shannon entropies of each variable, and the intersecting areas with the corresponding mutual informations. Do you think this identification is valid? Send me an email if you have some thoughts about these assumptions, or any other comments!

Additional reading

Check out this essay by Jim Bumgardner on Information Theory and Art, published on the Issue #3 of the Mungbeing online magazine.

And another good example of combining online text with interactive illustrations of statistical concepts, in this case on the topic of P-hacking.

Implementation details

I used Processing and Miralib to generate the videos and images in the previous post, p5.js for the interactive snippets embedded in the blogpost, and MathJax for the mathematical formulas.