# Zoom an image in cinder

**URL:** <https://discourse.libcinder.org/t/zoom-an-image-in-cinder/409>\
**Category:** Uncategorized\
**Created:** [November 23, 2016, 9:36am UTC](https://discourse.libcinder.org/t/zoom-an-image-in-cinder/409 "2016-11-23T09:36:14Z")\
**Posts on this page:** 8\
**Page:** 1

<div class="post-metadata">

**Author:** ![Rachanaa](https://yyz2.discourse-cdn.com/flex030/user_avatar/discourse.libcinder.org/rachanaa/32/239_2.png) [@Rachanaa](https://discourse.libcinder.org/u/Rachanaa)\
**Post date:** [November 23, 2016, 9:36am UTC](https://discourse.libcinder.org/t/zoom-an-image-in-cinder/409/1 "2016-11-23T09:36:14Z")

</div>

Hi,

I am finding it difficult to zoom an image from the centre of the window. Could you please help?

---

<div class="post-metadata">

**Author:** ![paul.houx](https://yyz2.discourse-cdn.com/flex030/user_avatar/discourse.libcinder.org/paul.houx/32/31_2.png) [@paul.houx](https://discourse.libcinder.org/u/paul.houx)\
**Post date:** [November 23, 2016, 10:45am UTC](https://discourse.libcinder.org/t/zoom-an-image-in-cinder/409/2 "2016-11-23T10:45:10Z")

</div>

Hi,

by default in Cinder, the origin (0,0) of an image is in the upper-left corner. This is the point around which the image is rotated or from which it is scaled. If you want to scale from the center, you’ll first have to translate the image so that (0,0) is in the center:

```auto
gl::translate( -0.5f * imageWidth, -0.5f * imageHeight );

```

Then you scale or rotate the image:

```auto
gl::scale( 2.0f, 2.0f );

```

And finally you translate the origin of the image (which is now its center) to the center of the window:

```auto
gl::translate( 0.5f * getWindowWidth(), 0.5f * getWindowHeight() );

```

It’s important to remember that, because of the way the [transformation matrices](https://www.processing.org/tutorials/transform2d/) are defined in OpenGL, you have to reverse the order of operations. Finally, make sure to push and pop the model matrix. The code therefor becomes:

```auto
gl::pushModelMatrix();
gl::translate( 0.5f * getWindowWidth(), 0.5f * getWindowHeight() );
gl::scale( 2.0f, 2.0f );
gl::translate( -0.5f * imageWidth, -0.5f * imageHeight );
gl::draw( texture );
gl::popModelMatrix();

```

-Paul

---

<div class="post-metadata">

**Author:** ![Rachanaa](https://yyz2.discourse-cdn.com/flex030/user_avatar/discourse.libcinder.org/rachanaa/32/239_2.png) [@Rachanaa](https://discourse.libcinder.org/u/Rachanaa)\
**Post date:** [November 23, 2016, 12:10pm UTC](https://discourse.libcinder.org/t/zoom-an-image-in-cinder/409/3 "2016-11-23T12:10:50Z")

</div>

Hi Paul,

Thank you for your reply. In fact now I am able to get the image from the centre by using translate().

I would be more happy to know as to how can I scale that centred image from 0 to 2?

Timeline function doesn’t give the option to scale from one value to another.

I am trying to apply scaling effect only after one animation is completed.

Request if you could please help me in this regard.

Thanking you 🙂

---

<div class="post-metadata">

**Author:** ![paul.houx](https://yyz2.discourse-cdn.com/flex030/user_avatar/discourse.libcinder.org/paul.houx/32/31_2.png) [@paul.houx](https://discourse.libcinder.org/u/paul.houx)\
**Post date:** [November 23, 2016, 4:44pm UTC](https://discourse.libcinder.org/t/zoom-an-image-in-cinder/409/4 "2016-11-23T16:44:40Z")

</div>

Hi,

have a look at the [Cinder Timeline samples](https://github.com/cinder/Cinder/tree/master/samples/_timeline). They will teach you how you can manipulate values using the timeline.

For instance, you could define a `ci::Anim<float> mScale` that you can then manipulate using the timeline:

```auto
void MyApp::startAnimation()
{
    mScale = 1.0f;

    const float kDuration = 1.5f;
    timeline().apply( &mScale, 2.0f, kDuration, EaseInOutQuad() );
    timeline().appendTo( &mScale, 1.0f, kDuration, EaseInOutQuad() ).delay( 1.0f );
}

void MyApp::keyDown( KeyEvent &event )
{
    startAnimation();
}

void MyApp::draw()
{
    // Safe alternative to pushModelMatrix/popModelMatrix. 
    // Remember to #include "cinder/gl/scoped.h".
    gl::ScopedModelMatrix scpModel;

    // The operator() will return the animated value as a float.
    gl::scale( mScale(), mScale() );

    gl::draw( mTexture );
}

```

---

<div class="post-metadata">

**Author:** ![Rachanaa](https://yyz2.discourse-cdn.com/flex030/user_avatar/discourse.libcinder.org/rachanaa/32/239_2.png) [@Rachanaa](https://discourse.libcinder.org/u/Rachanaa)\
**Post date:** [November 24, 2016, 10:40am UTC](https://discourse.libcinder.org/t/zoom-an-image-in-cinder/409/5 "2016-11-24T10:40:21Z")

</div>

Hi Paul,

Thank you so much for your help. Really motivates me to explore and learn new thing.

You are indeed very supportive.

---

<div class="post-metadata">

**Author:** ![Rachanaa](https://yyz2.discourse-cdn.com/flex030/user_avatar/discourse.libcinder.org/rachanaa/32/239_2.png) [@Rachanaa](https://discourse.libcinder.org/u/Rachanaa)\
**Post date:** [November 29, 2016, 9:30am UTC](https://discourse.libcinder.org/t/zoom-an-image-in-cinder/409/6 "2016-11-29T09:30:41Z")

</div>

Hi Paul,

As suggested, I have applied timeline function for scaling the text (which is white colored).

mScaleText = 20.0f;  
timeline().apply(&mScaleText, 1.0f, 1.5f, EaseInOutQuad());

And in the draw function the code is as below:

gl::pushModelMatrix();  
gl::translate(getWindowWidth()/2, getWindowHeight()/3-0.5f\*(mTexture-\>getHeight()));  
gl::scale(mScaleText(), mScaleText());  
gl::translate(-0.5f\*(mTexture-\>getWidth()), -0.5f\*(mTexture-\>getHeight()));  
gl::draw(mTexture);  
gl::popModelMatrix();

While my animation comes exactly from the centre of the screen and the centre of the text but after a delay. Till then it shows the color of the animated text which is white colored.

The screen remains white for some time and then the effect of scaling is executed.

Am I doing something wrong?

---

<div class="post-metadata">

**Author:** ![paul.houx](https://yyz2.discourse-cdn.com/flex030/user_avatar/discourse.libcinder.org/paul.houx/32/31_2.png) [@paul.houx](https://discourse.libcinder.org/u/paul.houx)\
**Post date:** [November 29, 2016, 5:31pm UTC](https://discourse.libcinder.org/t/zoom-an-image-in-cinder/409/8 "2016-11-29T17:31:28Z")

</div>

Hi,

if I understand correctly, the animation is OK but all you see is a white rectangle instead of text? If that is the case, make sure to enable alpha blending:

```cpp
{
    gl::ScopedBlendAlpha scpBlend;
    ...
}

```

or:

```cpp
{
    gl::enableAlphaBlending();
    ...
    gl::disableAlphaBlending();
}

```

---

<div class="post-metadata">

**Author:** ![Rachanaa](https://yyz2.discourse-cdn.com/flex030/user_avatar/discourse.libcinder.org/rachanaa/32/239_2.png) [@Rachanaa](https://discourse.libcinder.org/u/Rachanaa)\
**Post date:** [November 30, 2016, 5:47am UTC](https://discourse.libcinder.org/t/zoom-an-image-in-cinder/409/9 "2016-11-30T05:47:15Z")

</div>

Okay Paul, will try that.