Drawing smooth curves with Toxiclibs

araidz

Drawing smooth curves with Toxiclibs

in Contributed Library Questions • 5 months ago

I've been working with Spline2D and BezierCurve2D in Toxiclibs. To draw them, I compute the vertices with a certain resolution and then draw them as a series of vertices, or as a Polygon with ToxiclibsSupport, as it's done in the examples.

The problem is that, with variable segment lengths, either I found the resolution to be too small (I see the angles) or too high (the stroke is not smooth). That's especially noticeable if you have to export to a PDF vector file, where instead of having a nice bezier with control points you end up with a series of straight lines.

I haven't looked at the Processing implementation, but I wonder if there's any way to render this curves smoothly, like ellipse(), arc() or curveVertex() do in Processing.

thanks!

Replies(4)

amnon.owed

Re: Drawing smooth curves with Toxiclibs

5 months ago

Have you looked at the examples in this folder:

Examples/Contributed Libraries/toxiclibscore/splines

?

araidz

Re: Drawing smooth curves with Toxiclibs

5 months ago

Yes, of course. I'll try to be more clear: I know how to draw different kinds of curved lines with ToxicLibs, but I don't know if there's any way to render them as smoothly as the default curved shapes in Processing.

For example, a simple bezier with Processing and Toxiclibs:

The blue one is not as smooth because it's rendered as a series of small straight lines. That's more clear when we export to vector and open in Illustrator:

Is there a way to render the red way from toxiclibs? Or should I extend ToxiclibsSupport to do it? Can anyone link me to the Processing implementation that does that?

This is the code I used to create the lines (it uses some functions of toxiclibs 0021, but the result is the same with splines or other classes). I might be missing something...

void setup()
{
size(600, 400);
background(255);
smooth();
// create bezier points
ArrayList<Vec2D>points = new ArrayList();
for (int i=0; i<4; i++) points.add(new Vec2D(75 + i*150, random(350)));
beginRecord(PDF, "test.pdf");
// draw them processing style
strokeWeight(2);
stroke(255, 0, 0);
bezier(points.get(0).x, points.get(0).y, points.get(1).x, points.get(1).y, points.get(2).x, points.get(2).y, points.get(3).x, points.get(3).y);
// draw them toxiclibs style
translate(0, 50);
stroke(0, 0, 255);
BezierCurve2D curve = new BezierCurve2D(points);
LineStrip2D line = curve.toLineStrip2D(20);
beginShape();
for (Vec2D v: line.getVertices()) vertex(v.x, v.y);
endShape();
endRecord();
// show points
strokeWeight(1);
stroke(0);
noFill();
for (Vec2D p: points) ellipse(p.x, p.y, 10, 10);
endRecord();
}

darius.mo

Re: Re: Drawing smooth curves with Toxiclibs

5 months ago

Hello araidz, line 25:

for (Vec2D v: line.getVertices()) curveVertex(v.x, v.y);

http://processing.org/reference/curveVertex_.html

I think, that will help you.

Darius

shiffman

Re: Drawing smooth curves with Toxiclibs

5 months ago

Looks like to me ToxiclibsSupport doesn't have curve drawing functionality. So I think either you try higher resolution (which isn't working for you?) or you need to interpolate the curve yourself or using curveVertex() as darius suggests.

Top Reply