Bezier Interpolation and storing vertices


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 :

				// 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);  

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   


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

Any ideas gratefully received


Hi, those seem same questions that i have also…

did you get some work around?

Hi paul,

are you using this to make a “real time” painting app? i.e. can you display the mouse trail in real time while you paint?
could you give more detailed code, i would like to see it working and be able to help you/me.

I don’t think lines are limited to 10px - check out ofSetLineWidth