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 instantaneous 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 instantaneous slope of the curve as it comes off P2. Let that sink in for a second. Bèzier Curves These are effected in another way by the control points. This time the instantaneous slope coming off a point is equal to a line drawn between the point and it’s own control point. 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 –

1 2 3 4 |
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).

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 |
color[] jellyfish = {#0B91CE, #0A41C2, #9691FF, #E0DDCE, #B587B8}; </code> <code>void setup() { size(1200, 800); background(240); smooth(); noFill(); }</code> <code>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(); } |

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!

Read More