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.

W6_01_02

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.

W6_03_01

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

W6_03_03

And what happens if they can overlap in time?

W6_03_05

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

W6_03_06

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.

W6_04_01

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.

W6_04_02

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.

W6_04_03_02

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

W6_04_04

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.

W6_04_07_a
W6_04_07_b
W6_04_07_c
W6_04_07_d

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

W6_05_01_02

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.

W6_05_01_03

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.

W6_06_06_a
W6_06_06_b
W6_06_06_c
W6_06_06_d

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.

W6_06_06_e
W6_06_06_f
W6_06_06_g
W6_06_06_h

Advertisements

Comments? Leave a reply.

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

WordPress.com Logo

You are commenting using your WordPress.com 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