As I understand it, your lines are originally based on vectors (they are polylines). Polylines are resolution independent and can be scaled up as much as you want without loosing detail. If you convert them to a bitmap (ofPixels, PNG, JPG), the vector data is lost and the lines become resolution dependent. If you scale up a pixel based image it becomes pixelated.
Maybe you could explain what you are trying to achieve with these images?
Oh I see…is there a way then to just export the polylines directly to svgs? If that is done, will the drawings still look blocky or will they be like the image on the left: https://imgur.com/a/1bfR8 ?
Other than that, maybe if there were a way to increase the polyline thickness/thickness of the drawing that might be an easier way to resolve my problem.
Basically im breaking down the drawings into smaller lines, but then segmenting them for later use in another program: Help with script
// create a test polyline
ofPolyline stroke;
for(int i=0; i<20; i++) {
float x = 20 + i * 20;
float y = 50 + 50 * ofNoise(i * 0.1f);
stroke.addVertex(x, y);
}
You can save it like this:
ofBeginSaveScreenAsSVG("thePolyline001.svg");
ofSetLineWidth(10); // control the thickness
stroke.draw();
ofEndSaveScreenAsSVG();
// Note that the line won't be visible on the screen.
// If you want to see it also in your program, draw it
// again outside ofBegin../ofEndSaveScreenAsSVG()
It should look like the image on the left. You can open the resulting svg in your web browser and zoom in (CTRL+), or in Inkscape, Illustrator, etc.
Oh well thats good news!
So do I replace ofSaveImage(pix, ofToDataPath("output/" + foldername + "/" + ofToString(_counter) + ".png"));
with ofBeginSaveScreenAsSVG ?
Sorry…im a bit lost here
Ok, I realized that all I actually need is: ofSetLineWidth(10); in order for my segmentation program to recognize the lines.
They just needed to be a bit thicker so that they could be contoured properly, nevermind outputting it as an svg. https://imgur.com/a/HEIsb
However what im wondering now is, can the lines be smoothed without the need to export it as a svg?
Is there a way of rendering it more graphically pleasing like the idea they show in the second picture of: https://github.com/bgstaal/ofxShivaVG ?
I think there’s a bit of confusion with the terms smoothing can mean different things.
What getResampledBySpacing and getSmoothed would solve is a low amount of vertices in the polyline. So if your polyline looked like a Z with only 4 vertices, by resampling and smoothing you could make it look more like an flipped S with many more vertices.
On the other hand, the rendering engine does not produce beautiful lines when the thickness of lines is set very high. They look broken on sharp curves.
For that issue you can use ofxPoly, which converts a line into a mesh. ofxPolyToMesh is different to other functions, in that it does not return the result, but it puts the result into its first argument. So you would call it like this:
ofMesh resultMesh;
ofxPolyToMesh(resultMesh, stroke, 10); // 10 pixel thickness
// now draw resultMesh (which is no longer a polyline, but a mesh!)
As @hamoid said before, to avoid those artifacts we can use ofxPoly. You need to download this addon and add it to your project using project generator. Add #include "ofxPoly.h" to ncQuickDrawImageSave.h. This code produces this:
@SebastianSobotka Yeah thats right. Thanks for the help so far guys…ill look around as well and see if I can find anything else that can smooth those corners a bit better
Looks pretty good. Still a little rough on the edges, but better than before for sure. Another thing from github: https://github.com/apitaru/ofxSmoothLines
Maybe this could help too? No idea
I think this will be ok for my application, I appreciate the help. I have another question: is there an easy way I could make the background of the images (currently white) transparent? Cheers
smoothing can mean different things.
