Implement page curl on Android?

Question

I surfed the net, looking for a nice effect for turning pages on Android, and there seems to be more than one. As I study the platform, I thought it was nice.

I managed to find the 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 xy 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)); } } 

which gives an example (above) of the code for the iPhone, but I have no idea how I will implement this on android. Could any of the Math gods please help me on how I will implement this in Android Java.

Can I use my own drawing APIs, do I need to use openGL? Can I somehow change the behavior?

Any help would be greatly appreciated. Thank.

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

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

Can someone help me in the equation by simply folding the top right corner inwards the dialogs throughout the page to create a similar effect that I can later apply to shadows to increase its depth?

Answer 1

I just created an open source project that implements page curl modeling in 2D using my own canvas: https://github.com/moritz-wundke/android-page-curl I'm still working on this to add adapters and such as to make it suitable for use as a standalone presentation.

• EDIT: Updated links.
• EDIT: Missing files have been ported to repo.

Answer 2

I am currently experimenting with the effect of a page freezing on Android using OpenGL ES. This is a pretty sketch in fact, but perhaps gives some insight into how to implement page curl for your needs. If you are interested in implementing a flip page of a 3D page that is.

As for the formula you are talking about, I tried it and I didn’t really like the result. I would say that it simply does not fit the small screen very well and began to make out a simpler solution.

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

While writing this, I hastened to decide how to implement “fake” soft shadows, and whether to create a suitable application to show the waving effect of this page. Also, this is almost one of the few OpenGL implementations I have ever done, and it should not be taken too much as a good example.

Answer 3

I am sure you will have to use OpenGL for a nice effect. The main features of the user interface are rather limited; you can perform basic transformations (alpha, translate, rotate) in representations using animations.

One could reproduce something similar in 2D using FrameLayout, and a custom look in it.