# Zooming and swiping with OpenGL ES

This topic is 1605 days old which is more than the 365 day threshold we allow for new replies. Please post a new topic.

## Recommended Posts

Hello!
I am making a 2D puzzle for iOS and currently Im trying to implement zooming and scrolling with UIPinchGestureRecognizer.
Zooming is done this way: I have a target 2D vector which is a "zooming point". The code is:
glTranslatef(target.x, target.y, 0); glScalef(scale, scale, 0); glTranslatef(-target.x, -target.y, 0);

Target is being selected with gesture recognizer this way:
-(void)handlePinchGesture:(UIPinchGestureRecognizer*)recognizer { if (UIGestureRecognizerStateBegan == [recognizer state]) { view->setTarget([recognizer locationInView:self]); } // Rest of the code omitted }

Everything works just fine.
Initially the game was designed for iPAD, but I want it to work on iPhone and iPOD too. But iPhone and iPOD have different aspect ratio. To keep initial picture proportions I decided to make initial Y scale a bit bigger. Also this made possible to swipe the game field up and down with initial zoom factor. The code is:
glTranslatef(target.x, target.y, 0); glScalef(scale, scale * aspectRatio, 0); glTranslatef(-target.x, -target.y, 0);

This works just fine IF the game field is "centered" at the screen(e.g. when there are equal space in bot swipe directions(up and down)). But if we swipe the field up or down and begin pinch gesture, the game field jumps to the centre again.
I understand that I need to translate the gesture position by some offset, but I cannot figure how exactly for 3 days.

##### Share on other sites
Hi,
how does your rendering framework looks like? Do you render on demand or on a permanent basis ?
Your code above just handles zooming. How do you handle scrolling?
It should something like:
 glTranslatef(target.x, target.y, 0); glScalef(scale, scale * aspectRatio, 0); glTranslatef(-target.x, -target.y, 0); glTranslatef(scroll.x, scroll.y * aspectRatio, 0); 
How is your viewport set up?

Are your coordinates in pixel or something uniformed?

##### Share on other sites
Hi.

I use pure OpenGL and handle scrolling this way:
 - (void)touchesMoved:(NSSet *)touches withEvent:(UIEvent *)event { UITouch *touch = [touches anyObject]; CGPoint pos = [touch locationInView:self]; CGPoint oldLocation = [touch previousLocationInView:self]; view->moveBy((CGPoint) { (oldLocation.x - pos.x) / (view->getScale() - 1.0f), (oldLocation.y - pos.y) / (view->getScale() * aspectRatio - 1.0f) }); } 

Where View::moveBy() is:
 void View::moveBy(const CGPoint& p) { if (_target.x + p.x >= 0 && _target.x + p.x <= _screen.x) _target.x += p.x; if (_target.y + p.y >= 0 && _target.y + p.y <= _screen.y) _target.y += p.y; } 

Viewport is set up this way:
 glMatrixMode(GL_PROJECTION); glLoadIdentity(); glOrthof(0, screen.x, screen.y, 0, -1, 1); 

Coordinates are in pixel.

What do you mean by rendering on demand or permanent?

##### Share on other sites
Do you have a render loop that updates screen frequently ? Or do you render on events ?
I have in mind that you render your scene without translating it when handling pinch gesture.
 view->getScale() - 1.0f 
Could it be that getScale() returns 1 and you get a division by zero in your touchesMoved routine ?
Did you console log all your scale and translation values to see if they behave in correct way?

##### Share on other sites

I have in mind that you render your scene without translating it when handling pinch gesture.[/quote]
Here is the rendering code:
 glMatrixMode(GL_MODELVIEW); glLoadIdentity(); glPushMatrix(); glLoadIdentity(); float scale = view->getScale(); CGPoint target = view->getTarget(); glTranslatef(target.x, target.y, 0); glScalef(scale, scale * aspectRatio, 0); glTranslatef(-target.x, -target.y, 0); renderScene(); glPopMatrix(); renderUI(); 
As you can see, i translate to the target position, scale and translate back. No explicit translation handled.

Could it be that getScale() returns 1 and you get a division by zero in your touchesMoved routine ?[/quote]
Whoops, it is possible. Thank you, ill fix it right now.

Did you console log all your scale and translation values to see if they behave in correct way?[/quote]
Yes, they behave correct. In fact, my puzzle is already released on iPAD, but I cannot pass QA to release it on iPhone because they demand swiping up and down with initial scale

##### Share on other sites
Does that fix your problem ? I think the first scaling which lead to div by zero destroyed your target vector. Maybe iPhone and iPad handled div by zero or plus operator with NaN differently.

##### Share on other sites
Ive fixed division by zero, but the main problem persists

##### Share on other sites
I'm wondering how your swiping works even with scale equals 1.
translate with -target
scale by scale,scale*aspectRatio
translate with target
in case that scale is 1 and aspectRatio is 1. These lines will not translate at all.
If these lines are just for scaling around target your first line should look like this:
 glTranslatef(target.x*scale, target.y*scale*aspectRatio); 

Maybe you could try to explain how you want to handle swipe and pinch.
I would do it like this:
scaleOrigin, scale describe scale configuration
 //handle swipe glTranslate(-target.x,-target.y); //handle scale glTranslatef(scaleOrigin.x,scaleOrigin.y*aspectRatio); glScalef(scale,scale*aspectRatio); glTranslatef(-scaleOrigin.x, -scaleOrigin.y); 
This code has one fallback. swipe, scale swipe, scale would not work since you have to accumulate this actions.

##### Share on other sites
I'm wondering how your swiping works even with scale equals 1.[/quote]
I dont need to swipe when scale equals 1 Only when we are zoomed.

in case that scale is 1 and aspectRatio is 1. These lines will not translate at all.
[/quote]
Yes, this is a feature. When aspectRatio == 1 we are on iPAD and dont need to swipe the initial picture. On iPhone aspectRatio is 1.25 and the picture is partially invisible so we can swipe it.

Maybe you could try to explain how you want to handle swipe and pinch.
(code)
This code has one fallback. swipe, scale swipe, scale would not work since you have to accumulate this actions.[/quote]
I want to handle both swipe and scale in one place.
I also have moveTo(point) method, zoomIn() and zoomOut() and all of them are avaible for scripters. I used the approach you suggested, but it was a big pain to handle all scale-swipe-change scale target events

##### Share on other sites
Ok.
So you want to scale your image around origin via _scalevalue and then translate the image to moveToPoint. Is that correct ?
 glTranslatef(-moveToPoint.x*_scalevalue, -moveToPoint.y*_scalevalue,0); glScalef(_scalevalue,_scalevalue,1); 

##### Share on other sites
No, i want to translate the image to some point, zoom it and then translate back

##### Share on other sites
like this ?
 glTranslatef(target.x*scale, target.y*scale * aspectRatio, 0); glScalef(scale, scale * aspectRatio, 0); glTranslatef(-target.x, -target.y, 0); 

##### Share on other sites
Ill check this now.

P.S. Sorry for late response, I was on vacation Edited by riens

##### Share on other sites
Nope, this does not work properly either

##### Share on other sites
ah ok i guess it's like this.
You move scale - it works
you move a second time and the image jumps correct ?
could you write down a sequence of actions you want to do ?

for example moveto (1,0) scaleto (1.5,1.5) moveto(-1,0) scaleto(1,1)
btw if you have icq message me and i'll add you

##### Share on other sites
You move scale - it works
you move a second time and the image jumps correct ?[/quote]
I don`t move scale - it works
I move scale - it jumps back before zoom

could you write down a sequence of actions you want to do ?[/quote]
swipe, pinch zoom
this corresponds to: moveby(1, 0), scaleby(delta, delta)

btw if you have icq message me and i'll add you[/quote]
I can create a new ICQ account if you have no jabber or skype

##### Share on other sites
I have skype at home so PN me your skype name.
Maybe we could chat later the day.

##### Share on other sites

Hi! I'm having almost the same issue with zooming and scrolling! Can you post your solution?