# Bezier Interpolation and storing vertices

Hi

I’m doing my first OF project here, and I’m running into a few obstacles.
I’m trying to create an algorithmically smoothed painting/drawing application, that can eventually output to SVG.

I’m smoothing the mouse path with a quadratic bezier interpolation which is very similar to the last post in this forum http://bit.ly/ifQzAZ :

``````
// calculate control points
controlPoint1 = ofPoint((x1 + 2.0*xc)/3.0,(y1 + 2.0*yc)/3.0);
controlPoint2 = ofPoint((2.0*xc + x2)/3.0, (2.0*yc + y2)/3.0);
actualPoint = ofPoint(x2,y2);

``````

Pop these ofPoints into an object and push_back into a vector. This is then looped through to draw (see below) On mousedown, the vector is cleared and we start again.

``````
// first point
ofVertex(mousePts[0].x, mousePts[0].y);

// loop through other points
for (int i = 0; i < smoothLine.size() - 1; i++) {
bezierPoint pointToDraw = smoothLine[i];

// if drawPoints is checked in gui
if (drawPoints) {
drawPoint(pointToDraw.actualPoint, ofColor(100,100,100), i, true, drawLabels);
}

// draw tangent line
if (drawTangents) {
ofSetColor(0, 0, 0);
ofLine(pointToDraw.controlPoint2.x, pointToDraw.controlPoint2.y, pointToDraw.actualPoint.x, pointToDraw.actualPoint.y);
}

// now draw the next part of the line
ofBezierVertex(pointToDraw.controlPoint1.x, pointToDraw.controlPoint1.y, pointToDraw.controlPoint2.x, pointToDraw.controlPoint2.y, pointToDraw.actualPoint.x, pointToDraw.actualPoint.y);
}
ofEndShape(false);

``````

This seems to work beautifully. The next step is to widen the lines… As I understand OF lines can only be 10px. So… my solution is a bit of trig, that takes tangents to the bezier curve at every ofBezierVertex.

I then add on a thickness, so I end up with nearly-parallel sets of bezierVertices, that I store in another 2 vectors, then draw.

``````
for (int i = lhsLine.size(); i < smoothLine.size() - 1; i++) {

bezierPoint newPoint = smoothLine[i];

// calculate perpendiculars
float direction =  (newPoint.actualPoint.y - newPoint.controlPoint1.y);
float theta = asin((newPoint.actualPoint.x - newPoint.controlPoint2.x)/sqrt(pow(newPoint.actualPoint.x - newPoint.controlPoint2.x, 2) + pow(newPoint.actualPoint.y - newPoint.controlPoint2.y, 2)));

// invert theta to find alpha
float alpha = 0 - theta;

// find the length of the perpendicular
float dy = sin(alpha) * thickness;
float dx = cos(alpha) * thickness;

//then add this on to each point

``````

Problems:

a) if I soften the edges using this, performance goes right down

``````
window.setGlutDisplayString("rgba double samples>=4 depth");

``````

b) if the lines cross over, the shape becomes negative… is it possible to join these so they are all part of the same shape?
c) I think maybe my whole approach is inefficient… it could be that I don’t understand allocation of memory, or it could be that i’m just attempting too many calculations. I’m not going to have huge numbers of vertices, but there is a lot of recursive looping… looked at openGL and other things but I thought I’d ask here first