Reflections on Renature

6 February 2020

The end of January brought with it the conclusion of Formidable's first open source Fellowship. In just six weeks' time, Parker Ziegler brought our new physics-based animation library, renature, to life. To read more about the project, check out the introductory post, the technical deep dive, and our new docs site. You can also install v0.1.0 of renature from NPM today, and check out the source on GitHub.

In this final post in our three-part series on renature, Parker looks back on how this whole thing started, what we accomplished in the six weeks, and what programs like the Fellowship mean for our commitment to open source sustainability.

How This All Began

I remember clearly the first morning I began working on renature, sitting at the dining room table in my partner's family's home in Las Cruces, NM. The smell of black coffee and juniper wood, the sun glinting in through the windows, the sweet family hound nestled at my feet. The feeling of excitement and the feeling of trepidation. Not knowing quite how to start.

When I first came up with the idea for renature in late summer, I had been spending a considerable amount of my time outside in the Cascade and Olympic Mountains here in Washington state. These landscapes have always been a grounding force for me, a spring of inspiration and insight when my own creative well runs dry. Part of why I got into software engineering in the first place was to explore places like this through digital cartography and geographic information systems (GIS). Later, as I moved into full-time front-end engineering, the natural world became more of an artistic resource for me, something to mimic in the way I write code and specifically the way I think about animation on the web.

Around this time I stumbled upon the work of Daniel Shiffman and his book The Nature of Code. The mission of the book resonated deeply with me — to help readers develop an understanding of how to model the emergent properties of nature through software. In seeking to model elements of our natural world, Shiffman explains, we of course also need to become better observers of it. We need to emote with it, care for it, build an attachment to it. Fundamentally, that's what renature is all about — returning to the elegance and beauty of the natural world to create new flavors of animation on the web.

In my mind, software engineering and the natural world are inextricably linked. Elements of nature infuse the design of software all the time — neural networks, flocking simulations, cellular automata, fractals, and so, so much more. As computer scientists and software engineers, we rely on bringing elements of the natural world into the digital worlds we create. They help to make the artificial feel a little more familiar, a little more memorable. A little more awe-inspiring.

On that first morning, drinking that first sip of coffee, writing the first lines of renature, a lot of things weren't clear. But the purpose of pursuing this idea was. With this project, I want to return joy and whimsy to the world of UI animation on the web. I want to make UI animation fun, playful, and beautiful. I want to make good things for the sake of it. Most importantly, I want to help users feel the same delight and curiosity about their online worlds that they feel about the natural world we all share. I can only hope we've broken ground on the way to achieving this goal.

What We Accomplished

Looking back on the six weeks of the Fellowship, they were some of the fastest I've experienced in my career as a software engineer. My mind whirred constantly with new ideas around how to better optimize our frame loop, how to improve our physics simulations, how to efficiently handle interpolating CSS properties. Part of the beauty of having six full weeks is that you have the leeway to experiment and explore, to push the boundaries of an approach before you commit to it. You have the space to mess up, and to learn from it. You can go on that tangent, down that rabbit hole, into that abyss, and know it's OK if nothing tangible comes from it. We don't get opportunities like that often in our industry, and it's incredibly liberating when we do.

And all the twists and turns of this experimentation did result in concrete, tangible accomplishments. We started by building out a small library of operators in ReasonML to model and compute two-dimensional vectors. We then went on to write a performant abstraction over requestAnimationFrame to handle starting and stopping the frame loop at will. We modeled a whole handful of real world forces and built a small physics engine for computing motion. And this was all in just the first week!

We learned about interpolation, and figured out an efficient algorithm for mapping physics simulations to transitions in CSS properties. We got to work messing with animation state, adding support for reversing animations, looping animations, and composing animations that harken to the orbits of planets. We learned how to harness the strengths of two different programming languages, ReasonML and TypeScript, in the same codebase to build something better than what we could have achieved with one. All along the way, we used the physics of the real world to make it work — the universal gravitational constant, the kinematic equations, terminal velocity in fluids, the Two-Body problem. Somehow, we also managed to build a full documentation site, optimize our production build with Rollup, and set up continuous integration with Travis CI.

You may notice that I used "we" throughout all of this. Although I was the core engineer behind this project for these six weeks, I had a tremendous amount of help along the way. My colleagues Phil Plückthun, Mariano Martinez III, Brian Mathews, and Max Yinger provided invaluable code review throughout the Fellowship, using their backgrounds in game dev and animation to help me optimize renature for accuracy. Savannah Adams and Jack Christoforo entertained every one of my nerdiest inclinations and used their advanced math backgrounds to propose new and more efficient ways of running our physics simulations. Mariano and Amy Dickson reviewed my previous blog posts, helping me find just the right words to capture the spirit of my ideas. Ryan Roemer and Lauren Eastridge helped with the deployment of our documentation site, designed by Savannah Adams, with per PR staging builds and automated AWS deployments.

Most importantly, our Director of Open Source, Lauren Eastridge, had the insight and vision to start this program. I am incredibly grateful to her for being a champion of open source at Formidable, and for giving me the opportunity to be the first guinea pig for the Fellowship. We accomplished so much in these first six weeks, and I'm very excited to continue investing in renature's growth in the broader open source community.

What The Fellowship Means for Open Source Sustainability

Open source has always been a core part of who we are at Formidable, and it's been one of the most important catalysts for my growth as an engineer and computer scientist in my two+ years here. But before the inception of the Fellowship Program, our open source presence really relied on the motivation, creativity, and privilege of our engineers. Like many companies of our size, it was something that happened between projects, in the evening, on weekends. We also made a habit of writing tools that turned out to be useful for our clients, allowing us to devote some time to their development on a per-project basis.

But I think many of us who participate in open source know this model isn't sustainable. People have lives outside of their code. Not everyone wants to participate in open source. And sometimes folks have incredible ideas but lack the time or resources to execute on them. The goal of the Fellowship is to remove these obstacles by making contributions to open source your full-time job. It's a measure to help level the playing field, to make open source accessible and equitable for everyone at Formidable, to affirm that everyone's ideas matter to the broader open source community. It's also a statement on the value of intellectual freedom and creativity. In an industry so heavily focused on profits, estimates, and "shipping," it feels like a radical action to build something beautiful for the sake of it. For the joy of it.

Some engineers in my position may have felt a sense of intellectual isolation working on their own idea for six weeks. Perhaps they would have felt it wasn't meaningful because it wasn't a product. But I think these concerns fail to capture the spirit of a program like the Fellowship. Over these six weeks, renature became something everyone at Formidable contributed to in ways large and small. It may have started as my idea, but it took on an identity of its own as others contributed to it, remixed it, toyed with its internals, and changed it to be theirs too. In that sense, I think renature's focus specifically on animation and real-world physics was a boon to its success. There's something almost gravitational about its premise, something that cuts so deeply to the heart of what we love about the web. Maybe it serves as a little reminder to each of us about the reasons we started programming. Maybe it makes us of think of days when programming was about making fun things for our friends, about sharing our tiny sparks of creativity with the world. Maybe it pushes us to step away from our computers as well, to go outside more and appreciate how beautifully made our own world really is. How important it is to protect it.

And maybe renature won't do any of these things for you. That's ok. However you find your way to this library, I hope, at the very least, that you have some fun with it. I'm incredibly excited to keep supporting renature alongside my peers here at Formidable, to continue making something I fundamentally believe in. To track updates on renature, you can follow me, @parker_ziegler, and the official Formidable account, @FormidableLabs, on Twitter.

Related Posts

Building a Feature-Rich CMS with Open Source Softw ...

We recently created a feature-rich CMS that allows users to create new pages from scratch and preview their changes in real time using the same compon ...

Retail in the Time of Coronavirus: Today and Beyon ...

Current pandemic conditions have rapidly accelerated the rate of adoption of digital products in the retail industry. What happens when the shops reop ...

urql Devtools: The Road to V1

In June 2019 we (the urql team) decided to set an adventurous goal of creating fully-featured developer tool for our GraphQL client. 10+ months, 10+ ...

Check out more of Parker's blog posts