How to make a gradient line path?

What would be the best method for making a line path (or shape with no fill) have a gradient? For example, I’d like a squiggle line to be green on the left and pink on the right with gradation between.

make a path with ofPath then get the tesselation in an ofMesh using path.getTesselation() and add color coordinates per vertex to create the gradient

1 Like

Thanks arturo! That works well if it’s a filled shape. When I make the path out of a stroke (no fill) it doesn’t seem to work (nothing is drawn).

I’m aiming for a result similar to the attached image.

![]( Shot 2013-02-10 at 2.22.29 PM.png)

yes if you have no fill then there’s no tesselation, you can just use a polyline (if you need bezier or similar) and then put all the resulting points in an ofMesh, then add the color coordinates

1 Like

i tried this line+gradient approach, but when i want to render the mesh to a pdf, there is nothing in the pdf, i guess this relates to my latest post, as i am getting the same error “ofCairoRenderer: draw(): cairo mesh rendering doesn’t support colors, textures, or normals. drawing wireframe”

as a workaround i am drawing short lines that are having different colours to achieve a gradient, but in print this would not look good…

hi lia, ofPath doesn’t support gradients yet, and as you said the cairo renderer doesn’t know how to render textures or color coordinates. one possibility would be to access the underlying cairo_t context in the cairo renderer and use native cairo functions like cairo_pattern_create... to create the gradient. having that functionality on ofPath would be great too.

you can access the underlaying cairo context with:

ofCairoRenderer * carioRenderer = (ofCairoRenderer*)ofGetCurrentRenderer().get();
cairo_t context = cairoRenderer->getCairoContext();
cairo_surface_t surface = cairoRenderer->getCairoSurface();

Is this still the best way to achieve a gradient in a line? I’m drawing a waveform, positive max to negative max, then positive average to negative average over it. I’d love to be able to add a gradient somewhere.

if you have an ofMesh with your waveform you can add texture coordinates to each point and it’ll create a gradient