Implement page curl on android?

Question

I was surfing the net looking for a nice effect for turning pages on Android and there just doesn't seem to be one. Since I'm learning the platform it seemed like a nice thing to be able to do is this.

I managed to find a page here: http://wdnuon.blogspot.com/2010/05/implementing-ibooks-page-curling-using.html

- (void)deform
{
  Vertex2f  vi;   // Current input vertex
  Vertex3f  v1;   // First stage of the deformation
  Vertex3f *vo;   // Pointer to the finished vertex
CGFloat R, r, beta;
  for (ushort ii = 0; ii < numVertices_; ii++)
  {
    // Get the current input vertex.
    vi    = inputMesh_[ii];                       
    // Radius of the circle circumscribed by vertex (vi.x, vi.y) around A on the x-y plane
    R     = sqrt(vi.x * vi.x + pow(vi.y - A, 2)); 
    // Now get the radius of the cone cross section intersected by our vertex in 3D space.
    r     = R * sin(theta);                       
    // Angle subtended by arc |ST| on the cone cross section.
    beta  = asin(vi.x / R) / sin(theta);       

// *** MAGIC!!! ***
v1.x  = r * sin(beta);
v1.y  = R + A - r * (1 - cos(beta)) * sin(theta); 
v1.z  = r * (1 - cos(beta)) * cos(theta);
// Apply a basic rotation transform around the y axis to rotate the curled page.


 // These two steps could be combined through simple substitution, but are left
    // separate to keep the math simple for debugging and illustrative purposes.
    vo    = &outputMesh_[ii];
    vo->x = (v1.x * cos(rho) - v1.z * sin(rho));
    vo->y =  v1.y;
    vo->z = (v1.x * sin(rho) + v1.z * cos(rho));
  }  
}

that gives an example (above) code for iPhone but I have no idea how I would go about implementing this on android. Could any of the Math gods out there please help me out with how I would go about implementing this in Android Java.

Is it possible using the native draw APIs, would I have to use openGL? Could I mimik the behaviour somehow?

Any help would be appreciated. Thanks.

****************EDIT**********************************************

I found a Bitmap Mesh example in the Android API demos: http://developer.android.com/resources/samples/ApiDemos/src/com/example/android/apis/graphics/BitmapMesh.html

Maybe someone could help me out on an equation to simply fold the top right corner inward diagnally across the page to create a similar effect that I can later apply shadows to to gie it more depth?

Upbear

Answer 1

I just created a open source project which features a page curl simulation in 2D using the native canvas: https://github.com/moritz-wundke/android-page-curl I'm still working on it to add adapters and such to make it usable as a standalone view.

• EDIT: Links updated.
• EDIT: Missing files has been pushed to repo.

Raquel

I will commit a new version soon which acts as a ListView and so you will be able to add any kind of view in it! – Raquel

Interesting but still needs to be a standalone view. – Upbear

I'm on it :D When I got some spare time a nice new version will be up! – Raquel

thanks,can add many images,and the opposite side of the image not white? – Outlandish

@Moss, I checked out your project but R.styleable.PageCurlView and R.layout.list_item is missing. – Parliamentary

I think this finally looks mature enough to accept. Although it's beginning to get more complex than I think it needs be in the repo, it does do the job. I had a play by ripping out all the code related to the manual page flipping and it works well, I think maybe consider shifting the "follow your finger" flip and the automated flip into separate classes so they can be used independently. Well done though so far. Very good implementation. – Upbear

do you know how to make it from left to right instead from right to left ? – Qua

The idea would just 'invert' the math I'm doing regarding the horizontal axis. Try to play around with the paths and the points, you should also invert the horizontal directions where applied. – Raquel

Can I use this on fragment transitions? – Monahon

@AdilMalik Thanks for pointing that out, it seams that the maintainer of that app removed it from the store. – Raquel

@Raquel I am facing a problem with Curling animation on epub books, where curling animation is going transparent. I don't know why? Can you suggest any solution regarding the same? – Bruit

@SanatPandey the whole canvas is getting transparent? – Raquel

@SanatPandey Could you verify that the color it set somehow to 0 in it's alpha component? – Raquel

can we autoplay this curl pages? – Kalgan

@Raquel It just take images to slide or the source can be pdf files too? – Abb

It's just a prove of concept that renders bitmaps, from there you have to code it on your own. – Raquel

can we apply this to activities? – Maggio

Answer 2

I'm doing some experimenting on page curl effect on Android using OpenGL ES at the moment. It's quite a sketch actually but maybe gives some idea how to implement page curl for your needs. If you're interested in 3D page flip implementation that is.

As for the formula you're referring to - I tried it out and didn't like the result too much. I'd say it simply doesn't fit small screen very well and started to hack a more simple solution.

Code can be found here: https://github.com/harism/android_page_curl/

While writing this I'm in the midst of deciding how to implement 'fake' soft shadows - and whether to create a proper application to show off this page curl effect. Also this is pretty much one of the very few OpenGL implementations I've ever done and shouldn't be taken too much as a proper example.

Vociferant

Anyway, as my code tends to be somewhat unreadable, I'm using quite similar idea as in the code you provided. With the difference I'm doing curl around a cylinder instead of a cone. This makes it a lot easier to calculate curl position so that curled surface edge follows pointer at all times. And at the end I'm spending much more effort in creating a valid triangle strip for rendering than doing actual calculations. – Vociferant

Thank you! Yours is the first code that I've been able to simply slap into an "existing source" new project and have it run. :-) – Lambart

@Vociferant Good one .. I want some modification that image should fit to full screen in both landscape and portrait. where i exactly need to modify your code? – Gerbil

Hi harism, I looked at ur code, It is very useful for me, but I have a one little problem, in my app I want to display pages as like a book, and when the page curl its back side I want to add new page (image) rather than the shadow effect of the front page(image).I dont know how to do it. Waiting for your response. Thnx in advance. – Jarrell

@Vociferant Any plans to add support to Views? The example today only displayed images. Thanks – Lucialucian

@Vociferant i looked into your code that is very nice but How to stop this curl page when it curl half from right bottom.. pls guide me.. – Immature

Answer 3

I'm pretty sure, that you'd have to use OpenGL for a nice effect. The basic UI framework's capabilities are quite limited, you can only do basic transformations (alpha, translate, rotate) on Views using animations.

Tho it might be possible to mimic something like that in 2D using a FrameLayout, and a custom View in it.

Sago

Well I found Bitmapmesh in the API demos, so if I can create a mesh, surely I can transform it somehow? The Demo isn't well documented so i'm having difficulty figuring it out, but it can be found here: developer.android.com/resources/samples/ApiDemos/src/com/… – Upbear

I managed to get hold of the mesh, the problem now is creating the mathematical equation to perform the transform on the mesh. – Upbear

Hi,Is it possible in page curl for action bar swipe tabs? – Avron