Home

Awesome

NOTE

As of this commit all "pages" will be 2-sided. There's a new class CurlPage, using which you can assign a separate texture on both sides, one for front side only, or same texture can be shared on both sides. CurlPage contains also color values for blending which allows you to e.g share texture on both sides but do alpha blending only on back side of the page, leaving you with exactly same effect what earlier version of this example application did. This time with the difference there's some more freedom included.

Here's an example video from cags12 showing 2-sided page support in landscape mode;

[http://www.youtube.com/watch?v=iwu7P5PCpsw]

Introduction

Project for implementing 'page curl' effect on Android + OpenGL ES 1.0 (possibly 1.1/2.0 too if there's clear advantage in using them).

The source code is released under Apache 2.0 and can be used in commercial or personal projects. See LICENSE for more information. See NOTICE for any exceptions, these include namely the application icon and images used in the demo. Besides these exceptions, let it be as-is implementation or - maybe more preferably - as an example for implementing your own effect.

For the ones without Android development environment, and/or people willing to take only a brief look on what's happening here, there are a few video captures. While person responsible for capturing them is not a happy owner of Android device yet It's truly hoped performance is not that poor on actual device compared to what you see here;

So what you saw there;

What you didn't see;

ToDo

Some details

Implementation can be divided roughly in two parts.

Anyway, here are a few links describing this page curl implementation somewhat well. Only difference is that instead of using a static grid an algorithm which 'splits' rectangle dynamically regarding curl position and direction was implemented. This is done in order to get better render quality and to reduce polygon count. It's an absolute win-win situation if these things can be combined with limited amount of extra calculation to ease the work of renderer. In this particular case, we really do not want to draw polygons separately if they lie next to each other on same plane. It's more appropriate to have more vertices used for drawing rotating part instead. On negative side lots of code complexity comes from the need for creating a triangle strip for rendering. Using a solid grid such problems do not occur at all.

It isn't very difficult to see what happens here once you take a paper and simply curl it to some direction. If you fold paper completely, cylinder, curl happens around, radius becomes zero, making it more of a 2D effect. And likewise folding the paper so that curl radius is constant most of the characteristics remain - most importantly there is a line - at the center of this 'cylinder' - which has constant slope not dependent on radius. Its distance from the point you're holding the paper varies only. Keeping this in mind makes curl position handling based on touch events a lot easier compared to using a cone as solid curling is done around. For information on using a cone, it's highly recommended to take a look on W. Dana Nuon's blog post on the topic. Chris Luke's article is a good read too, even though he came to pretty much the same conclusion as me, better to go with cylinder instead.

Curl/cylinder is defined with three parameters, position, which is any point on a line collinear to curl. Direction vector which tells direction curl 'opens to'. And curl/cylinder radius. 'Paper' is first translated and rotated; curl position translates to origin and then rotated so that curl opens to right (1, 0). This transformation makes it a bit easier to calculate rotating vertices as all vertices which have x -coordinate at least 0 are not affected. Vertices which have x -coordinate between (-PIradius, 0) are within 'curl', and if x -coordinate is less than equal to -PIradius they are completely rotated. And scan line algorithm for splitting lines within rotating area is more simple as scan lines are always vertical. Not to forget rotating happens around y -axis as cylinder center is positioned at x = 0. And after we translate these vertices back to original position we have a curl which direction heads to direction vector and it's center is located at given curl position.

  1. At first there is a piece of paper represented by 4 vertices at its corners.<br/> Paper 1<br/>
  2. And let's say we want to curl it approximately like this.<br/> Paper 2<br/>
  3. Which could results in something like these vertices. Adding more scan lines within the rotating area increases its quality. But the idea remains, bounding lines of original rectangle are split on more/less dense basis.<br/> Paper 3<br/>

But, once again, using a piece of paper and doing some experiments by yourself works much more as a proper explanation than words, mine at least, can tell. And maybe gives some idea how to make better/more realistic implementation. Happy page flipping :)

Sources of inspiration

Some YouTube links to page curl/flip implementations which were found interesting for a reason or another.

Not to forget many of the true real-time rendering heros. One day We're about to beat them all. One day. Right?