Posts RSS Comments RSS Digg Technorati Blinklist Furl reddit 73 Posts and Comments till now
This wordpress theme is downloaded from wordpress themes website.

Grid view prototype (such as a for thumbnails)

Here’s an Android (DroitAtScreen) screen shot and a Windows screen shot for a quick prototype of a grid view (such as for a thumbnail viewer).  Cross-platform OpenGL C++ SDL2.  Uses orthographic projection (not perspective).  The camera in my previous post did not have an ortho mode, so I added one (this was easy because although the camera did not have ortho, GLM does).
image image

Here’s what the same program looks like with projective perspective:
image image image image

Ideas.  A texture on each thumbnail.  Resize thumbnails with pinch-to-zoom.  Logic to organize the boxes based on the thumbnail size and the near plane dimensions…  Keep thumbnails in view horizontally, scroll down to see vertically off-screen thumbnails.  Fill screen top-left to bottom-right.  Horizontal spacing between thumbnails could either be constant, or a range (used to fill the row).

Edit: SDL2 made it super-easy to add a prototype pinch-zoom (tested on Android).  For this example, “zoom” just means to walk forward (or backward):
    const float fZoomSpeed = 10.0f;
    g_Camera.offsetPosition(fZoomSpeed * event.mgesture.dDist * g_Camera.forward());
image image

Edit: I added resizing to allow any number of boxes and different widths.  This could be used with vertical-only scrolling
image image image

Edit: I added the ability (quick prototype) to dynamically resize the grid based on a change in window width – here it is with orthographic projection.  For ortho, I use:
xMin = -m_state->window_w / m_fScaleOrtho + m_HalfModelW + xGap;
xMax = m_state->window_w / m_fScaleOrtho – m_HalfModelW – xGap;
image image image image image image image

Trackback this post | Feed on Comments to this post

Leave a Reply