A Geometric Approach to Page Curl Simulation

Ever noticed that satisfying feeling when you flip through digital pages, whether it's an e-book reader, a magazine app, or a gaming interface? That smooth, realistic page-turning animation isn't just eye candy – it's a clever combination of geometric math that brings a touch of physical reality to our digital experiences.

While this effect appears everywhere in modern applications – from reading apps and digital catalogs to interactive menus and educational software – many developers might be surprised to learn that creating a convincing page curl doesn't require complex physics simulations. In fact, we can achieve this effect with some straightforward geometric calculations that are both performant and visually pleasing!

Choosing the Right Approach

When implementing page curl effects, there are several common approaches, each with their own strengths and trade-offs:

Texture-Based Animation

• ✓ Simple to implement
• ✗ Lacks realistic behavior
• ✗ Limited interaction possibilities

Physics-Based Simulation

• ✓ Highly realistic results
• ✗ Computationally expensive
• ✗ Complex implementation

Our Geometric-Based Approach

• ✓ Computationally efficient
• ✓ Easy to customize and maintain
• ✓ Suitable for real-time applications
• ✓ Balance between realism and performance

By leveraging geometric mathematics, we can create a solution that captures the essence of page curling without the overhead of full physics simulation. This approach is particularly well-suited for applications where performance is crucial, such as mobile apps and games.

Understanding the Concept

Before diving into the implementation details, let's visualize how our geometric approach works. Imagine rolling a piece of paper around an invisible cylinder – this is essentially what happens during a page turn animation. The key aspects of this mental model are:

• The page curves around an imaginary cylinder.
• The cylinder's position and radius determine the curl's shape.
• Only the portion of the page within 180 degrees of the curl remains curved. That is to say, any part of the page that would wrap beyond the halfway point of the cylinder remains flat.

This 180-degree limitation is crucial because it mimics how real paper behaves – paper naturally resists folding back on itself and tends to maintain a flat shape once it passes the midpoint of a curl. This detail helps create a more realistic and physically plausible animation.

This cylinder-based visualization helps us break down the page curl effect into manageable geometric calculations. Now, let's look at how we can implement this mathematically...

Implementation Details

Defining Cylinder's Axis Vector

Assume we have a sheet of paper lying flat on the xz-plane in a 3D coordinate system. We grab the top-right corner at (x0, z0) and begin to turn the page from right to left, with the current cursor position at (x1, z1).





The center axis of the cylinder is perpendicular to the drag vector and passes through the current cursor position at (x1, z1). For drag vector we have \vec{D}=(x_1-x_0,\ z_1-z_0). The vector representing the central axis of the cylinder can be expressed as \vec{C}=(z_1-z_0,\ x_0-x_1) (which is a clockwise rotation of \vec{D} by 90 degrees).

Identifying Movable Part of the Paper

With the cylinder's axis defined, we can determine which part of the paper needs to wrap around it. In the image below, the green area should wrap around the cylinder, while the blue area remains stationary. If we treat the paper as a mesh, the vertices within the green area shift in both the xz-plane and the y-axis. In other words, the vertices on the right side of the cylinder's axis need to have their transformations calculated.





With the cursor point as the start point (x_1,\ z_1), we can use the cross product to determine a point's position relative to the line formed by the vector's start and end points (cylinder central axis). For a point (x,\ z), we construct a new vector \vec{V} from cursor to this point \vec{V}=(x-x_1,\ z-z_1).

• If \vec{C} \times \vec{V} < 0, \vec{V} is in the clockwise direction relative to \vec{C}, which means the point is on the right side of the cylinder axis.
• If \vec{C} \times \vec{V} > 0, \vec{V} is in the counterclockwise direction relative to \vec{C}, which means the point is on the left side of the cylinder axis.
• If \vec{C} \times \vec{V} = 0, \vec{V} is parallel to \vec{C}, which means the point is on the cylinder axis.
  
  
  

Calculate the Transformation

Before calculating the vertex transformation, we need to determine the distance from a point to the cylinder's central axis on the paper. Given that \vec{C} and \vec{V} share a common start point, we can calculate the distance using \frac{|\vec{C}\times \vec{V}|}{||\vec{C}||}, where |\vec{C}\times \vec{V}| represents the absolute value of the cross product between \vec{C} and \vec{V}, and ||\vec{C}|| is the magnitude of vector \vec{C}.





The angle (in radians) can be calculated from the arc length divide by radius: \theta = \frac{dist}{R}. Based on the above discussion, there are two scenarios:

Case 1. Angle \theta <= 180 \degree

First, let's calculate the point's transformation in the xz-plane. Using the method described above, we compute the distance (dist) from the point to the projected cylinder axis on the paper. As shown in the figure, subtracting R \cdot sin\theta from this distance gives us the displacement magnitude. Multiplying this by the normalized drag vector \vec{D} yields the point's transformation in the xz-plane. From below figure, it's easy for us to compute the y-axis displacement: R-R\cdot cos\theta. Then we have:

\begin{align} Pos_{xz}&=(x,\ z)\ +\ norm(\vec{D}) \cdot (dist-R \cdot sin\theta) \\\\ Pos_{y}&=y + R-R \cdot cos\theta \end{align}

Case 2. Angle \theta > 180 \degree.

Note that any part of the paper that would extend beyond the cylinder's midpoint remains flat instead of continuing to curl. So, the magnitude of displacement of the point is dist+dist-\pi \cdot R. Then we have:

\begin{align} Pos_{xz}&=(x,\ z)\ +\ norm(\vec{D}) \cdot (dist+dist-\pi \cdot R) \\\\ Pos_{y}&=y+2 \cdot R \end{align}

Now we can compute the displacement of mesh vertices in the deformable area of the paper, effectively simulating the paper's deformation during the page curl.

What happens when there are pins on the paper?

The solution for handling fixed points (pins) is quite straightforward. We first determine the position of the cylinder's central axis, then check if any pins exist on its right side. If found, we should translate the axis to the pin's position and repeat this check. This process continues until no pins remain on the right side of the axis. Similar to our previous vertex transformation determination, we can use the vector cross product to identify relevant fixed points (pins).

Recover

To simulate the paper's recovery animation after releasing the drag, we need to interpolate the cursor position from its release point back to the top-right corner of the paper.

Conclusion

In this post, we've explored a geometric approach to creating page curl effects. By treating the deformation as a paper wrapping around an invisible cylinder, we've developed a solution that is:

• Computationally efficient
• Easy to implement
• Highly interactive

The method handles not only basic page turning but also accommodates fixed points (pins) and smooth restoration animations. While more complex physics-based simulations exist, this geometric approach provides an excellent balance between performance and visual quality, making it particularly suitable for real-time applications like games, e-readers, and interactive UIs.

By understanding the underlying mathematics and geometric principles, we can create engaging page-turning experiences that feel natural to users while maintaining optimal performance across different platforms.