How to make a gradient line path?

[cerupcat]

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.

[arturo]

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

[cerupcat]

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.


[arturo]

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

[liasomething]

@arturo
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”

https://github.com/openframeworks/openFrameworks/issues/3804

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…

[arturo]

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... http://cairographics.org/manual/cairo-cairo-pattern-t.html#cairo-pattern-type-t to create the gradient. having that functionality on ofPath would be great too.

you can access the underlaying cairo context with:

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

[rjlwest]

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.

[arturo]

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