Drawing polyline curves within bounderies

#1

I’m building a timeline style interface to draw a motion curve between ‘keyframes’ with a polyline. My issue is that I want to limit the polyline to only be drawn within the window, and not outside of its own panel. Since the polyline needs the keyframes to know the direction and the curve, I don’t know how to draw just the part of the line up to the edge of the panel. Is there a trick to only draw it, or only make it visible, within a given rectangle?

I’ve considered using the z-axis and paneling over the bits that are visible in the wrong places but that doesn’t seem very elegant. Maybe there is some kind of inverse occlusion? Thanks!

#2

hi @davideo, have you considered using a scissor test?

https://www.khronos.org/registry/OpenGL-Refpages/es2.0/xhtml/glScissor.xml

The scissor test effectively allows you to specify a rectangle into which to draw, everything drawn outside this rectangle will be “cut away”.

In openFrameworks it is possible to directly issue OpenGL instructions. In this particular case, you could:

  1. define a scissor rectangle (in screen coordinates) into which to draw via glScissor(...) (see link above for parameters)
  2. enable scissor testing via glEnable(GL_SCISSOR_TEST),
  3. issue the draw calls for your polylines (don’t worry about overshooting the scissor rectangle)
  4. disable scissor testing via glDisable(GL_SCISSOR_TEST)

Note that the scissor rectangle is specified in window coordinates, and that window coordinates have their origin in the bottom left corner.

#3

That seems like it’s exactly the kind of thing I was looking for! Will get at it now. Thank you!

@tgfrerer -> works a dream!

#4

you can use an ofFbo too

#5

Hi, you can use ofViewport(ofRectangle ...) which will set the view port to the rectangle you pass to it, although I think it would be a better idea using an Fbo in which you render only when you modify something, thus reducing computational resource usage.