Curves and curves

The assignment for Week 6 of the 2D Animation and Interaction Course of Andrew Glassner was: 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. You’re free to make your curves out of multiple individual segments if you like. You can also use Processing’s built-in tools for making big, multi segment curves if you prefer. Don’t use language elements we haven’t covered yet. Remember that fill (), stroke (), and strokeWeight () all apply to curves.

I started with some Catmull-Rom curve experiments. Because Catmull-Rom is easy to use and pretty straightforward. I thought it would be nice to make some vertical waves. While I was working on that I found this result.


Very colorful indeed. So what happens if you throw the color out and just work in black and white. Moving the mouse left and right moves the blob’s right-side.


What happens if I make a lot of these elements instead of one and place them in row and columns.


And what happens if they can overlap in time?


Or what does it look like when they start all over again just before overlapping each other?


I think that is not the way to go. Maybe its better to make large curves because that is what it’s all about in this week. I made three objects which are animating from left to right. They all animate round the vertical center.


While the previous setup was only rotating I also started to make some of the points going up and down on the vertical axis. This gives interesting distortions to the curves.


Here I gave it another distortion when it’s on the left side that what it has on the right side of the vertical axis. I also used a very high amount of transparency which makes that it renders in layers.


This is a combination of two distorted objects. The transparency settings mix very nice so I continued to work with that.


I decided to make eight different objects which were combined under four keys. So every time you press a key the same two images are rendered.


Until so far the Catmull-Rom curves. Continue with the Bézier curves. A totally different beast.


I worked in Fontographer and Adobe Illustrator with Bézier curves. But in Processing it is much more complicated. You have to draw the curve on paper or make it up in your head and that is very difficult in the beginning. After a while you get used to it. I also found it hard to draw the curve first in Illustrator and then read the points from the file. It just did not work very well and the results were not what I expected. So I tried to do it half on paper and half in my head. That worked better.


You can get really much better curves with Bézier. And you have a lot more control. But it is more complicated to work with them. So I made again four objects which I defined under a key. The interesting thing is that you can combine the images by hitting the previous define keys. Combinations of Catmull-Rom curves with Bézier curves.


Another possibility is to combine all eight defined keys together. As a follow-up I would like to get more randomness into these images. But that’s for later.



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