# Bezier approximation of a circular arc, in Processing

22 March 2009 / code, reference/* Processing (http://www.processing.org, v.1.0.1) Java program for Approximating a circular arc with a cubic Bezier curve. Reasonably accurate for angles up to a quarter-circle or so. The solution is taken from this PDF by Richard DeVeneza: http://www.tinaja.com/glib/bezcirc2.pdf linked from this excellent site by Don Lancaster: http://www.tinaja.com/cubic01.asp Note: written for clarity; not optimized! */ void setup(){ size(600,600); } //-------------------------- // Global variables: // The true coordinates of the Bezier control points: float px0,py0; float px1,py1; float px2,py2; float px3,py3; float radius = 200; // radius of the circular arc float cx = 300; // center point of the circular arc float cy = 300; //-------------------------- void draw(){ background(230); // Establish arc parameters. // (Note: assert theta != TWO_PI) float theta = radians(mouseX/3.0); // spread of the arc. float startAngle = radians(mouseY/8.0); // as in arc() float endAngle = startAngle + theta; // as in arc() // Compute raw Bezier coordinates. float x0 = cos(theta/2.0); float y0 = sin(theta/2.0); float x3 = x0; float y3 = 0-y0; float x1 = (4.0-x0)/3.0; float y1 = ((1.0-x0)*(3.0-x0))/(3.0*y0); // y0 != 0... float x2 = x1; float y2 = 0-y1; // Compute rotationally-offset Bezier coordinates, using: // x' = cos(angle) * x - sin(angle) * y; // y' = sin(angle) * x + cos(angle) * y; float bezAng = startAngle + theta/2.0; float cBezAng = cos(bezAng); float sBezAng = sin(bezAng); float rx0 = cBezAng * x0 - sBezAng * y0; float ry0 = sBezAng * x0 + cBezAng * y0; float rx1 = cBezAng * x1 - sBezAng * y1; float ry1 = sBezAng * x1 + cBezAng * y1; float rx2 = cBezAng * x2 - sBezAng * y2; float ry2 = sBezAng * x2 + cBezAng * y2; float rx3 = cBezAng * x3 - sBezAng * y3; float ry3 = sBezAng * x3 + cBezAng * y3; // Compute scaled and translated Bezier coordinates. px0 = cx + radius*rx0; py0 = cy + radius*ry0; px1 = cx + radius*rx1; py1 = cy + radius*ry1; px2 = cx + radius*rx2; py2 = cy + radius*ry2; px3 = cx + radius*rx3; py3 = cy + radius*ry3; // Draw the Bezier control points. stroke(0,0,0, 64); fill (0,0,0, 64); ellipse(px0,py0, 8,8); ellipse(px1,py1, 8,8); ellipse(px2,py2, 8,8); ellipse(px3,py3, 8,8); line (cx,cy, px0,py0); line (px0,py0, px1,py1); line (px1,py1, px2,py2); line (px2,py2, px3,py3); line (px3,py3, cx,cy); //-------------------------- // BLUE IS THE "TRUE" CIRULAR ARC: noFill(); stroke(0,0,180, 128); arc(cx, cy, radius*2, radius*2, startAngle, endAngle); //-------------------------- // RED IS THE BEZIER APPROXIMATION OF THE CIRCULAR ARC: noFill(); stroke(255,0,0, 128); bezier(px0,py0, px1,py1, px2,py2, px3,py3); } |

«

*Prev post:*Art and Code recap!

»

*Next post:*Criteria for a Music Department Head Search