Curves in Processing, Part 2. Spline and Bèzier Curves

Screen Shot 2015-07-09 at 6.31.05 PM

View part 1 of this post for information on arcs!

Spline Curves

Spline curves are the second type of curve in Processing. When you create a spline curve, you set the start and end points, and two control points.

What are control points?

In short, they’re points that influence the bend of the curve. The yellow curve in the picture below is a spline curve.

The instaneous slope of the yellow curve, as it’s coming off P1, is equal to the slope of the light blue line, the line from C1 to P2. This is how control point C1 affects the curve. The opposite is happening for P2. The slope of the line from P1 to C2 is equal to the instaneous slope of the curve as it comes off P2.

spline

Let that sink in for a second.

Bèzier Curves

These are effected in another way by the control points. This time the instaneous slope coming off a point is equal to a line drawn between the point and it’s own control point.

bezier

The instantaneous slope off P1 is equal to the slope of the line between P1 and C1, shaded in dark blue.

Creating a Continuous Shape With Curves

We can use these curves to create a shape! All we have to do is use the bezierVertex() or splineVertex() function. It follows the format –

beginShape();

vertex(x, y); // starting point!

bezierVertex(cpX1, cpY1, cpX2, cpY2, x, y); // control points and ending point!

endShape();

It’s pretty easy to use!

Jellyfish Example

Here is a cool example of how we can use all this. All I really did is randomly choose the control points (continuously), within a bounded area. Processing is a powerful tool and it only takes a few lines of code to get something cool.

Note – try to avoid hand engineering points. It takes forever. Either use random(), a for loop, or some math functions (i.e. sine).

color[] jellyfish = {#0B91CE, #0A41C2, #9691FF, #E0DDCE, #B587B8};

void setup() {
     size(1200, 800);
     background(240);
     smooth();
     noFill();
}

void draw() {
     stroke(jellyfish[int(random(5))]);
     int x = int(random(width-200, width+800));
     int y = int(random(height));
     int cpX1 = int(random(0, 200));
     int cpY1 = int(random(height));
     int cpX2 = int(random(0, 200));
     int cpY2 = int(random(height));

     beginShape();
     vertex(10, height/2); // for the first point!
     bezierVertex(cpX1, cpY1, cpX2, cpY2, x, y);
     endShape();
}

Screen Shot 2015-07-09 at 3.21.45 PM

Hope you enjoyed learning more about Processing! Below are my other two cool messing around with curve pictures haha. If you want a little challenge, try to recreate the second picture!

Screen Shot 2015-07-09 at 4.44.13 PM

Screen Shot 2015-07-09 at 3.52.40 PM

Advertisements

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 )

Twitter picture

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

Facebook photo

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

Google+ photo

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

Connecting to %s