Dividing images in sections

Using Cinder
1

Hi
I am quite new to cinder
I was trying to develop a code which can divide one image in different sections and the next image will appear with the effect of joining those sections of image.
I have tried drawing with following code

for (int i = 0; i<10; i++) {
  for (int j = 0; j<10; j++) {
    if (mImages[activeTex]) {
      gl::draw(mImages[activeTex], Area(128 * i, 102.4 * j, 128 * (i + 1), 102.4 * (j + 1)));
    }
  }
}

resolution : 1280*1024

this code is drawing same image in 10 sections of the screen
I am not able to divide the image
Have tried using surface but couldnt
Please suggest me the way

Thanks :slight_smile:

2

Hi,

instead of cutting up the actual image, I would suggest to simply draw small sections of it. Have a look at this version of the draw function. The srcArea is the part of the image you want to draw. For the top left corner, this would be Area( 0, 0, 128, 102). The dstRect is the part of the window where the image should end up. This does not have to have the same size or aspect ratio, so for this example try Rectf( 50.0f, 200.0f, 500.0f, 300.0f ).

gl::draw( mImages[activeTex], Area( 0, 0, 128, 102), Rectf( 50, 200, 500, 300 ) );

You noticed that the srcRect uses integers to specify the coordinates and this can lead to rounding errors. You would be forced to divide the image into evenly divisible parts. If you want to be more flexible, consider doing a bit of extra work yourself: specify the exact texture coordinates when drawing a solid rectangle after binding the texture and a shader:

{
    // Bind texture to unit 0.
    gl::ScopedTextureBind scpTex0( mImages[activeTex], 0 );
    // Get a simple, default shader and bind it.
    auto glsl = gl::getStockShader( gl::ShaderDef().color().texture() );
    gl::ScopedGlslProg scpGlsl( glsl );

    // Loop over all sections... (omitted in this example).
    {
        // Draw a rectangle and specify the texture coordinates.
        const int kNumCols = 9;
        const int kNumRows = 7;
        auto sz = mImages[activeTex]->getSize();
        gl::drawSolidRect( dstRect, vec2( 0 ), vec2( sz.x / kNumCols, sz.y / kNumRows ) );
    }
}

Let me know if you have more questions.

-Paul

1 Like