Processing Day 4: Curves

For today’s installment of Processing, I am including complex curves and bezier curves. Luckily having used Illustrator I understand the concept of Bezier curves, though I’m still not sure I completely understand the complex curves shown here. These sketches are still from the lynda.com video titled “Interactive Data Visualization with Processing” by Barton Paulson.

Complex Curves
processing-sketch-bezier

//lynda.com video: drawing complex curves... these are not bezier curves!

size(600,200);
smooth();
noFill();

//black curve
stroke(0);
strokeWeight(3);
curveTightness(5);
beginShape();
curveVertex(100,100);
curveVertex(100,100);
curveVertex(150,150);
curveVertex(250,50);
curveVertex(300,10);
curveVertex(400,190);
curveVertex(500,100);
curveVertex(500,100);
endShape();


//gray curve
stroke(100);
strokeWeight(3);
curveTightness(-3);
beginShape();
curveVertex(100,100);
curveVertex(100,100);
curveVertex(150,150);
curveVertex(250,50);
curveVertex(300,10);
curveVertex(400,190);
curveVertex(500,100);
curveVertex(500,100);
endShape();


//white curve
stroke(255);
strokeWeight(3);
curveTightness(4);
beginShape();
curveVertex(100,100);
curveVertex(100,100);
curveVertex(150,150);
curveVertex(250,50);
curveVertex(300,10);
curveVertex(400,190);
curveVertex(500,100);
curveVertex(500,100);
endShape();

//draw a series of curves that all share points, and then draw the curves underneath them

//red dots
strokeWeight(8);
stroke(200,0,0);
point(100,100);
point(150,150);
point(250,50);
point(300,10);
point(400,190);
point(500,100);

Bezier Curves
complexcurves

//lynda.com videos: bezier curves

//specify anchor points (beginning and end of curve)
//and control points which influence shape of curve

size(600,200);
smooth();
background(#9f9694);
noFill();

//The First curve
//the control points
stroke(#f1e6d4);
strokeWeight(2);
line(100,50,250,50);
line(100,150,250,150);

//the curve itself
stroke(#791F33);
strokeWeight(3);
bezier(100,50,250,50,100,150,250,150);

//The second curve
//the control points
stroke(#ba3d49);
strokeWeight(3);
bezier(350,75,500,25,500,175,350,125);

//the curve itself
stroke(#f1e6d4);
strokeWeight(3);
line(350,75,500,25);
line(350,125,500,175);