How to draw only a certain part of an object? (Image attached)

Hi, I would like to know if drawing something like this is possible without having to draw another object on top to hide the previous one.

Any easy solution?

perhaps just use this:

http://openframeworks.cc/documentation/gl/ofTexture/#!show_drawSubsection

Hey @kashim thank you for your answer!

I’m actually trying to figure out if creating something like a table view on iOS is possible with OF.

The tricky part is the rows should be only visible in the view area which means it should be hidden as it goes out of the box but the view should be the topmost than other objects so the row cannot be hidden by other object.
I really don’t know how to achieve this with the knowledge I have…
Do you think it’s possible to implement this with draw subsection? Or would there be any easier way?

perhaps it can be convenient to use the object:“ofxDatGuiScrollView” of addons ofxDatGui:

but I’m not sure if it handles touch events…
maybe you have to work a bit for mobile use.

I used this addons to write a small project generator to openFrameworks androidstudio to select addons:

1 Like

I’d suggest drawing your content into an ofFbo with the table view dimensions you want. Then any thing that’s drawn inside the fbo but outside the dimensions of the fbo will be cropped when you draw the fbo itself. Then you can just move the content with push/pop matrix inside of the fbo to get the scroll effect.

1 Like

@afernandez @kashim

Thank you I think I will use ofFbo as your suggestion.

One question, Do you mean I have to draw the table view content to ofFbo every frame and draw it with fbo.draw() right?

I tried it and the frame rate significantly drops down since it’s drawing twice every frame.

Can you please confirm what I understood is correct?

Thank you so much!

It’s more like you’re drawing all of your content into the fbo then drawing that fbo later:

myFbo.begin();

ofPushMatrix();
ofTranslate( contentPos.x, contentPos.y);

//draw all of your content in here

ofPopMatrix();
myFbo.end();

ofSetColor(255);
myFbo.draw();

The code above will let you scroll through all the content you draw in your fbo by changing the contentPos (ofPoint or ofVec2f) variable. Technically you’ll be drawing everything but anything outside of the dimensions of the Fbo wont be visible when you draw the Fbo itself. Unless you’re using it incorrectly, drawing into a single Fbo then displaying it should be very fast. You’re not actually drawing it twice, when you draw between the begin() and end() calls it’s really just storing the graphical data in a buffer and only drawing it to the screen when you draw the Fbo. This is kind of an oversimplification, but it should be nearly as fast as drawing it to the screen directly.

1 Like

as long as your mask is rectangular you can use glScissor: https://www.khronos.org/opengles/sdk/docs/man/xhtml/glScissor.xml

how many objects do you keep? the biggest performance improvement in the ios table view comes from the fact that it separates the data from the view. there are never more table cells drawn than are visible, the tableview takes care of giving each table cell the correct data to display.

here is a simpler approach, but this should be fast enough to handle thousands of items:

  1. assuming your scroll thing is at tableX, tableY and sized tableWidth, tableHeight
  2. assuming that the nested item position can be calculated as itemY = itemIndex*itemHeight
  3. scrollY is the translation (negative values mean scrolling down, so scrollY<=0 must always be true)

now, this is the code:

  1. set the glScissor to tableX,tableY,tableWidth,tableHeight (on mobile,pay attention to device rotation)
  2. loop through all data items
  3. calculate bool itemVisible = itemY + scrollY + itemHeight >= 0 && itemY + scrollY <= tableHeight
  4. if visible, do a pushmatrix, translate to (tableX, tableY+itemY+scrollY) and draw there. then a popmatrix.
  5. disable the glScissor again.

don’t use the fbo in the way @afernandez suggested. it’s a quick trick, but has problems. the fbo has a maximum pixel height depending on your graphics card, maybe 4k pixels, maybe 16k, but far from infinite. this will limit the number of items you can display.

all in all: you don’t really want to enter this territory. there are many good ui libraries for openFrameworks now! (datgui was already mentioned, then there’s ofxGui, and quite a few others! )