Today marks the launch of the Sun’s new web design, complete with a tidal wave of new online content in all sections. On this site, you’ll find videos in Art and Science, podcasts in opinion, blog posts in all sections, and (throughout the site) a brand new look and feel. To mark the event and draw readers onto our site, we decided to make a statement with out front page:
this design, unarguably the most ambitious I’ve ever attempted, is designed to grab your attention. A standard front page slowly morphs into a swirling torrent of binary, collapsing to a single line, that comes to a screeching halt in the lower left corner of the page, where you’ll find a rather understated announcement: “Introducing a brand new layout and original web-only features: CORNELLSUN.COM.”
Making this mammoth project work required crafting smooth curves in our design software, Quark. Each line of binary needed to be hand drawn with meticulous care. This gives you a taste of what it was like to work with the text:
Using the software got me thinking … I am always curious as to how the software functions: the code behind the beautiful user interface. Sure you tell the software, like Quark or In-Design, to “draw a curve!” But how, mathematically, does the computer figure it out? My goal was to understand better how this tool works, and also try and guess how the programmers who wrote Quark programmed the function (mathematically). Instead of resorting to an e-mail or industrial espionage, I thought it would be fun to try a couple experiments on my own, and refer back to some programming literature.
Basically, we want to understand how Adobe let’s us picks points at random and assign them some sort of “curvature” before automatically producing a beautifully arced line, satisfying our wishes. In mathematics this is known as “interpolation.” The simplest interpolation scheme is to just connect every point with lines:
This method works well enough. For one thing, it’s simple. Between each point is the basic equation:
which you can solve, given some points, in a couple lines of algebra. But I don’t like this simple answer. For one thing, it’s not pretty! There are nasty kinks at each point. What if we were designing a roller coaster, and we wanted each point to be the top or bottom of a hill? If the track followed the above diagram, it would be a very nasty ride indeed. Instead engineers try to up the ante, by fitting curves to each set of points that feature smooth transitions — aka the slope of the curve has no “kinks” but changes smoothly. The simplest function that allows us to satisfy both requirements are parabolas:
where we now have an extra “x-squared” term. This extra bit of complexity gives us more freedom. The result might look a little like this:
which seems like a much nicer roller coaster to ride. Adobe In-Design lets us play around with the points and slopes, and then it figures out the math in between on its own. Below is an example of the freedom we have:
Here I’ve placed three points in a row, and the program has drawn a curve connecting all three. Sticking out of those points are slender blue lines. When I rotate the blue lines, it tells the program what the slope of the curve should be at that point (in math the blue line would be called a tangent). I made the end-points horizontal. Then I played around with the middle point. The top example has a gently sloping middle point. Then I “wound up” the curve by rotating the blue line, and the result became more twisted. I can also adjust how “powerful” the curvature at that point should be, as shown below:
here, I only have two points, but I gave the first a nice dipped slope. The curve rebounds in time to match the slope at the far end. But I can give the first point a more powerful “voice” over how strong the curvature should be by lengthening the slender blue line at that point. The three images here show the first point getting progressively stronger, until it forces a curled up loop to form! Pretty crazy stuff …
All this reminds me of a cool trick we learn about in engineering used to fit curves to points, using “splines.” The method is used by ship builders and architects to craft elegantly curved shapes. I’ve illustrated the process here:
A ship builder would have a table with pin holes. He would place big wooden pins in the holes representing “fixed points” he wanted the curved wood to pass through (shown in red). At the end points, if he wanted to also fix the slope of the line (say, forcing it to end horizontally) he would place big wooden blocks down (shown as red blocks). Then he would force a piece of wood into the spaces between all these objects. The piece of wood (shown here as a thick black line) is the spline. This method is a great way to fit an equation to a set of points. It gaurantees a smooth function with gently sloping curves.
Today, engineers can replicate this process mathematically on a computer. In technical language, an engineer wishes to find “a set of cubic polynomials that fit all data points, such that the piece-wise function and its first two derivatives are smooth.” In English, that just means we need the simplest curve that hits all the points in a smooth, elegant manner. In general, the process involves a dash of calculus and some heavy-duty algebra with big matrices. The result is (more or less) identical to the physical process of forming wooden splines around pins. But now, instead of a wood shop, you just need a laptop and some programming experience. To satisfy the “smooth and elegant” constraint actually requires an even more complicated equation than just lines or parabolas. You actually need a third order (cubic) equation:
To demonstrate, I decided to fit my own cubic function to follow a desired curve. I stipulated the slope be horizontal at the starting point, and that the curve bend back to it’s original height a small distance (2 units) away. I also wanted it to end at a 45-degree angle. With a bit of calculus and some algebra I arrived at a nice function and graphed it. Then I repeated the process in Adobe In-Design, by simply tugging on the blue points and lines. The formal derivation took a few minutes to solve-for and graph. The In-Design version took a couple seconds and absolutely no mathematical skills. It also looks nicer. I guess this proves that simple tools are powerful. In case you’re curious, I included the algebra at the end of this post. The result is here for you to see:
It’s important to notice that the two blue lines in the In-Design version are not of equal length. In general, Adobe is using a much more complicated algorithm than simply spline-interpolation. We know this because we’re allowed to impose more demands on the curve than a spline would allow: we can set our own slope at every single point, and add more length between each point. In an architect’s studio this would require more than just pins at each point and blocks on one end. You would need blocks at every single point, and some glue as well. Also, as we saw above, the Adobe software allows loops to form. No function of just x — of any complexity — would be capable of producing those. For a computer programmer, this would require an algoroithm that took boundary slopes and the curve’s overall length as a given, and then found a path that minimized curvature. In short, things get complicated.
——————-
NOTES:
1. Adobe In-Design is available for experiments in many locations around campus. Most notably, every computer in Mann Library has the software, and the computer labs in Uris Library also feature it.
2. You can find out more about cubic splines and linear interpolation by checking out “Numerical Recipes for Scientists and Engineers” by William Press et al.
3. The sketch of a “better rollercoaster” could not be made of simply parabolas. To see why, note that some of the interpolated curves have inflection points, which require higher order equations. If you spotted that mistake before reading this, kudos.
4. The math for figuring out a good cubic function:
Original Author: Munier Salem