Coding Stories: Biking Balance

Cresting the wood planked deck of the Brooklyn Bridge on a bicycle is an experience to behold. The early dawn light illuminates the buildings of downtown Brooklyn. The multitude of steel cables rising to the top of the ominous stone tower ahead of me intersect and appear to reshuffle as I glide along the path. A glimmering Statue of Liberty can be seen on my right balancing the imposing structure of the Manhattan Bridge to my left.

As I launch into the fast paced downhill portion of the bridge, the clacking of the wooden planks under my spinning tires jolts every part of my body. The cool winter air blowing though my helmet and over my jacket is invigorating. Having the opportunity to get substantial exercise every day I go to work is a true blessing in my life. On many days, particularly during these crazy days of the pandemic it is what keeps me grounded. Being on my bike is my safe space providing a calm and collected bubble for my mind. It is also one of the best ways to socially distance.

There is so much I can say about the satisfaction I get from this daily ritual. But the aspect I want to focus on here is my riding outfit. Each day I study the weather closely, avoiding precipitation, noting the temperature, wind speed and humidity. I try to carefully pick the perfect clothing items to keep me comfortable throughout the ride. If I overdress I am hot and sweaty. If I wear too little I shiver and lose feeling in my fingers and toes. Often I shed a layer or two along the way to maintain thermal equilibrium. When I get it right the balance adds immeasurably to the enjoyment of the ride. I can feel the heat build up in my legs as I power up the hill of the bridge and the incredible ability of the cool air to dissipate that heat. Trying to find that balance is part of what I love about the ride.

Finding a temperature equilibrium when exercising is not always easy. I think about it a lot when distance running in the winter. It also plays a key role in backpacking during all seasons. There is a saying in hiking that there is no such thing as bad weather only the wrong gear. So I spend a fair amount of time dialing in my gear to a particular outing and then adjusting that gear to the moment. Sometimes being comfortable is about putting on another layer to stay warm and sometimes it means keeping moving. The right pair of gloves can be the difference between elation and misery. When I find that perfect balance between body, clothing, and environment I am euphoric. I devote a considerable amount of time to exploring this balance and so it felt meaningful to express it artistically. I began by sitting down to program a p5.js sketch.

As I started thinking about this idea I began with a literal interpretation of the scenario. Temperature is the average kinetic energy of the molecules of a substance. I started playing around with moving particles in the frame. In a previous post I built a 2D gas model with elastic collisions. I thought maybe I could build upon this work having one wall of the animation impart energy to the particles while another wall drained away that energy similar to the way the cool air absorbs energy emitted from my body. I first explored how an ordered grid of particles quickly moved to apparent disorder. Here is a preliminary animation of the 2D collision model where energy is conserved on the canvas.

As I worked on the animation the model became complex. How should the particles bounce off the heat source? How should they bounce off the heat sink? Even more challenging was finding a simple beauty in the chaotic appearance of the animation. This computational model of heat transfer is a wonderful line of inquiry that is probably worthy of its own blog post, but despite making scientific progress with the model I seemed to be moving away from the central idea of the story. My experience while hiking, biking or running is a feeling of balance. Maybe it is not about heat and particles. I started thinking about photography. Balance achieved through tone, form, or color is central to the making of a successful photograph. I started to wonder if I could demonstrate balance more simply in my p5.js sketch and by keeping it simple more effectively connect to my lived experience.

For me simple seems to always come back to the world of fundamental Physics. I started with a simple mass with a position and a velocity. I then placed another mass at a fixed position. Creating a simple animation using Newton’s law of gravitation was fairly straight forward. Here is the Planet class that accomplishes it.

class Planet {
constructor(pos,v){
this.pos = pos;
this.velocity = v;
}
force(pos, magnitude) { // pos is the position of the central mass
const dist = this.pos.dist(pos);
const v = p5.Vector.sub(pos,this.pos);
// Newton's law of gravitation with modified constants
return v.normalize().mult((magnitude) / (dist*dist));
}

update() {
const f = this.force(center,3000);
this.velocity.add(f);
this.pos.add(this.velocity);
}

show() {
fill(255);
ellipse(this.pos.x,this.pos.y,20);
}
}

Notice how the gravitational force is calculated in the .force() method. Technically both masses should be experiencing force but in the limiting case where the fixed mass is much more massive than the orbiting mass my approximation holds. Here is an animation of what is created.

This animation creates visual balance in a number of ways. The elliptical path of the planet is symmetrical and therefore balanced. There is more graphical weight at the bottom of the screen as the dark red circle is below the vertical center, however, the orbiting body spends more time at the top of the screen due to Kepler’s laws of motion and this creates a sense of balance. However, the balance of this planetary model goes beyond the visual field. The orbiting body is constantly balancing the inertia of traveling in a straight line with the gravitational pull that accelerates it toward the central mass. The elliptical orbit represents that balance which ultimately emerges from the laws of nature. Much of the world around us can be understood through the lens of balance and equilibrium. Exploring this concept deeply is important in many domains of scientific understanding. Also there is something pleasing about watching this simple animation.

At this point I added a few aesthetic components to the sketch changing the shading and size of the orbiting body based on its calculated energy. I also included a radial line that rotates proportionally to the y position of the body. Finally, I added multiple planets along the elliptical orbital path one at a time. I really liked the fact that multiple aspects of balance are interwoven in the sketch. After experimenting with different configurations of the parameters I arrived at the version below which I find pleasing to watch.

Here is the link to the p5.js sketch in case you want to explore the code yourself.

This sketch is fairly distant from the literal ideal gas model that I started with. In the end of I have achieved a sense of balance that feels connected to the balance I felt that morning crossing the Brooklyn bridge.

exploring the intersection of coding, education and disciplinary knowledge

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store