Catmull-Rom, Casteljau and Kawano curves

I have finished week fourteen of Andrew Glassner’s 2D Animation and Interaction Course. This week was about creating, drawing and using free-form curves. Processing offers two types of curves. Catmull-Rom and Bézier. And with these curves there is a lot of history involved. Edwin Earl ‘Ed’ Catmull (born March 31, 1945) is a computer scientist and current president of Walt Disney and Pixar Animation Studios. Strange enough I could not find any relevant information about Raphael J Rom. Pierre Étienne Bézier (born September 1, 1910) popularized the Beziér curve but did not create the Bézier curve. He used such curves to design automobile bodies. It seems that these curves were first developed in 1959 by Paul de Casteljau (born 1930) at Citroën Automobiles. He devised a system based on the use of Bernstein polynomials. Sergei Natanovich Bernstein (born March 5, 1880) was a Russian mathematician. Polynomials in Bernstein’s form were first used by Bernstein in a constructive proof for the Stone-Weierstrass approximation theorem. The original version of this result was established by Karl Theodor Wilhelm Weierstrass (born October 31, 1815). He is often cited as the ‘father of modern analysis’. So far my Wikipedia knowledge. Interesting how all these theories follow and build on each other (also known as evolutionary development).

Back to the homework. The assignment for this week is to create an interactive program that draws a picture using curves, and moves objects along curves. Use at least one Catmull-Rom curve using multiple, smoothly joined-up segments. Use at least one Bézier curve using multiple, smoothly joined-up segments. I am free to make my curves out of multiple individual segments if I like. And I can also use Processing’s built-in tools for making big, multi-segment curves instead if I prefer.

Ok… now the first thing I did is trying to get a better understanding of how Catmull-Rom and Bézier curves are handled in Processing. Spend some time using them. Than I used a Processing sketch from the previous week because I thought that maybe the arrays could do unexpected things with it. And with very minor change to the sketch it did something unexpected. But there were no curves involved.

In this sketch I used the bezier statement to create some curvy-ness. But I thought that the result was too chaotic. And it slowed down my computer.

Tried random and if statements to check if that would make sense. But it did not make sense at all.

Also tried to get random points from the array but that also did not work out very well. Beside of that it takes atleast more than ten seconds to load the static image.

Used one call to bezier per second. Just to create one large thick curve.

Than I thought why go through all the trouble to get numbers from the array. Lets throw that array away and create just random thick horizontal lines which are bent by some calls to the bezier function. I only used the colors from Hiroshi Kawano’s original painting. That seemed to make some sense.

I did not like that these lines did not have anything to do with Hiroshi Kawano’s original. So I designed simple patterns of horizontal lines connected by curves which filled in the shapes of the painting with the appropriate colors. As an interactive possibility I added functionality to the plus and minus keys. Hitting the plus key makes the lines thicker. Hitting the minus key brings them back to their default thickness. Black was left out because it did not do any good to the final result. Kept that color for the background.

Another variation of the previous sketch shows only the top and right side of the shapes used in Hiroshi Kawano’s panting. Theses top and right sides are connected using bezier curves. The movement from top to bottom worked better for me than the opposite movement. The plus and minus keys have the same functionality as in the previous sketch.


Comments? Leave a reply.

Fill in your details below or click an icon to log in: Logo

You are commenting using your account. Log Out /  Change )

Google photo

You are commenting using your Google account. Log Out /  Change )

Twitter picture

You are commenting using your Twitter account. Log Out /  Change )

Facebook photo

You are commenting using your Facebook account. Log Out /  Change )

Connecting to %s