# The anatomy of a page curl

As I was developing the *ABC of the Sea* App, which is an interactive picture-book based on a proof-of-concept Tara (my wife) made many years ago and did not publish, one of the early and obvious items on the checklist of cool things it should do is have a nice curling transition when moving between pages. Initially I expected this to be easy – Apples Apps do this, iBooks on the iPad especially, so it’s built in, right?

Wrong. Well, mostly wrong. I quickly discovered that the only documented curling transition for a

1 | UIView |

goes up/down, not left/right. It’s the one that Maps uses. Some Googling then revealed that an undocumented transition did perform left/right curling. However, being undocumented means it’s not viable for an App Store submission. It may later acquire an official constant and become kosher, but not yet.

My quest continued. I came across a number of implementations but most of them were lame approximations of a proper page curl. The most promising one was by CodeFlakes that promised very good page-corner-tracking using touch events, so a user could drag the corner around, but it didn’t attempt to curl – it used shadows and gradients to fake the effect. When I queried this they said nobody had asked for real curling.

### Page deformation

Then I came across this blog post by W. Dana Nuon: Implementing iBooks page curling using a conical deformation algorithm which was pretty close to what I wanted, except it used OpenGL – as yet an unknown quantity to me. I downloaded the code, examined it, tried to ignore the mathematics involved and eventually decided to use the concepts from it in my code. This took a while and I ended up with acceptable results, at least to be going on with. I parked the issue since I had working code and I wanted to focus on other aspects of the project.

Eventually I came back to it after I was working on some code to pre-render pages that touched the OpenGL code. As I dug in to it my confidence grew and then I finally decided to brave the math since I wanted to develop a touch-tracking mechanism, to drag the page around.

The basis of the conical deformation came from a research paper published by Xerox PARC on the topic where they used a cone with parameters that varied over the course of the transition as an approximation of a page turn. The model assumes a cone, apex-down, with a vertex running from that apex on the*y*-axis (that is,

*x*=0). The

*y*coordinate of the apex is a variable,

*A*. The other cone parameter is the angle,

*θ*, between the surface of the cone and a vertex that runs from the apex through the center of the cone. They then add a third parameter,

*ρ*, which is the rotation of the entire page about the

*y*-axis. The PDF from PARC linked above has a reasonably descriptive diagram showing this arrangement which I have shown here. Nuon then empirically determined a heuristic based on time

*t*that varied these parameters to produce a reasonable animation.

The original algorithm for mapping a point onto the surface of a cone, from Nuon’s sample code and taken directly from the mechanism described by PARC, looked like this:

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 104 105 106 107 108 109 110 111 112 113 114 115 116 117 118 119 120 121 122 123 124 125 126 127 128 129 130 131 132 133 134 135 136 137 138 139 140 141 142 143 144 145 146 147 148 149 150 151 152 153 154 155 156 157 158 159 160 161 162 163 164 165 166 167 168 169 170 171 172 173 174 175 176 177 178 179 180 181 182 183 184 185 186 187 188 | R = sqrt(vi.x * vi.x + pow(vi.y - A, 2.0f)); // Radius of the circle circumscribed by vertex (vi.x, vi.y) around A on the x-y plane. r = R * sin(theta); // From R, calculate the radius of the cone cross section intersected by our vertex in 3D space. beta = asin(vi.x / R) / sin(theta); // Angle SCT, the angle of the cone cross section subtended by the arc |ST|. v1.x = r * sin(beta); v1.y = R + A - r * (1.0f - cos(beta)) * sin(theta); // *** MAGIC!!! *** v1.z = r * (1.0f - cos(beta)) * cos(theta); [/cc{_objc] The short version of what this does is assume that the distance from the apex of the cone to the 2D location of a point on the flat page is the same as the distance from the apex to where that point would be when mapped onto the cone. Some simple geometry gives you a short cut to then work out the angle around the cone that this point ends up. When I started to dissect this algorithm, ostensibly to invert the equations, I came across some significant hurdles. The most significant one was that the cone deformation, as implemented, had a serious limitation of where it would position the corner of the page in the view-port. There were two major elements to this limitation: <ol> <li>The entire page was mapped to a position on the cone. There were no flat parts. To get the corner of the page into some locations, you ended up either having the page curl back in on itself slightly or you ended up with a large <em>z</em>-component which looked odd.</li> <li>The parameters necessary to achieve some corner locations required extreme values and these were hard to develop a heuristic for.</li> </ol> After messing around with a sheet of paper for 30 minutes and after examining some sketches of a page curl I decided I could overcome most of these limitations if I could introduce flat-parts into the deformation. In effect, I wanted to add an <em>x</em>-component to the position of the apex of the cone and limit how far around the cone a page would curl. It was time to dust off the trigonometry that I had not used in twenty years. <h3>Moving the apex</h3> Using my imagination, I called the new parameter <em>B</em> (meaning that {<em>x,y</em>} of the apex would be {<em>B,A</em>} in the code) and once I realised it was a small matter of offsetting in the right places and conditionally transforming a point, ended up with this: [cc{_objc] R = sqrt(pow(vi.x - B, 2.0f) + pow(vi.y - A, 2.0f)); // Radius of the circle circumscribed by vertex (vi.x, vi.y) around A on the x-y plane. r = R * sin(theta); // From R, calculate the radius of the cone cross section intersected by our vertex in 3D space. if(vi.x < B) beta = 0.0f; else beta = asin((vi.x-B) / R) / sin(theta); // Angle SCT, the angle of the cone cross section subtended by the arc |ST|. if(vi.x < B) v1.x = vi.x; else v1.x = B + r * sin(beta); if(vi.x < B) v1.y = vi.y; else v1.y = R + A - r * (1.0f - cos(beta)) * sin(theta); v1.z = r * (1.0f - cos(beta)) * cos(theta); [/cc{_objc] The effect of this code is to provide a flat page <em>prior</em> to the cone, which starts at <em>x=B</em>. Experimentally I found that the useful range of <em>θ</em> was about 18 to 30 degrees. I then wrote some code to map an arbitrary {<em>x,y</em>} point to the parameters for the curl and, though it was better than for the stock deformation, it was not perfect: [cc{_objc] CGFloat h = sqrt((x*x) + (y*y)); if(h > 1.0f) { // eep - map to somewhere we might actually be able to get to CGFloat e = (h - 1.0f); x -= e; y -= e; } x *= width; y *= height; // Attempts to set the deform parameters to something that would put // the corner of the page in the given position. CGFloat aRho = 0, aA = -15.0f, aB = 0.0f, aTheta = M_PI/2; CGFloat wx = sqrt((x*x) + (y*y)); wx *= 0.7; wx *= x; wx += 0.3f; aTheta = DEGREES_TO_RADIANS( funcLinear(y, 30, 18) ); // Initial part of turn is done mostly by B aA = -0.06f; aB = wx; aRho = 0.0f; rho = aRho; theta = aTheta; A = aA; B = aB; [/cc{_objc] In particular, though the corner does move with the touch location, it's not directly under it. I decided this was a matter of refinement but, more pressing, there was still a significant limitation to where it could place the corner of the page - it needed to flatten the page after the cone in order to reach more places. This proved to be rather tricky. In order to do this, you need to transform the points relative to the last position they would have had on the cone. All of the math discovered this location in terms of the distance from the apex, which is a function of the original 2D position. Not something that can be easily inferred from an arbitrary point. <h3>Would a tube work?</h3> Instead of going down a path of nasty trigonometry, I decided to attack it from a different angle. Instead of a cone, why not a cylinder whose point of rotation was freely moveable? The geometry involved would be much simpler - and it should be pretty easy to reverse, too. I went and found a kitchen paper-towel tube and a sheet of paper and convinced myself it was a reasonable model. Cylinders are pretty easy objects to draw in 3D - it's just a 2D circle, in our case with radius <em>C</em>, that you transform into 3D and then extrude. A bit trickier is using this simple model and wrapping a page around it - this is because the page doesn't simply follow the cylinder around in a circle, it's an elipse and for a given plane in the 2D page, one complete revolution around the tube does not end up at the same point it started - just wrap a page around a tube to see. The page travels up the tube when it's at an angle. Initially I thought that the angle formed by the path leading into the cylinder and the path leading out was 2<em>θ</em> but that ended up being too simplistic, not least because I inadvertently changed the meaning of <em>θ</em> to be the angle between the <em>x</em>-axis and the vertex that ran along the face of the cylinder at <em>z</em>=0. What I ended up with was [latex]2\pi - \theta[/latex]. The code to perform this deformation ended up reasonably clean, if not as simple as the conical one looked: [cc{_objc] #define CYL_RX(C, b) (C * sin(b)) #define CYL_DY(C, d) (C * (d>2.0f?2.0f:d)) #define ROT_X(xin, yin, angle) ((xin * cos(angle)) - (yin * sin(angle))) #define ROT_Y(xin, yin, angle) ((xin * sin(angle)) + (yin * cos(angle))) // theta is angle of cylinder in x,y plane // A,B are y,x of "bottom" of cylinder // C is radius of cylinder // Take Y and work out the corresponding X for the start of the cylinder sx = B + ((vi.y - A) / tan(theta)); // amount of flat x-travel around cylinder cx = (C * M_PI) * sin(theta); // How far round the cylinder we are tx = vi.x - sx; if(tx < 0.0f) tx = 0.0f; else if(tx > cx) tx = cx; // Excess of x after the cylinder. -ve if not finished xx = vi.x - (cx + sx); if(vi.x < sx) { // Flat before cylinder v1.x = vi.x; v1.y = vi.y; v1.z = 0.0f; } else if(xx >= 0.0f) { // Flat after cylinder beta = M_PI; dy = tan(M_PI_2 - (theta * 1.0f)); // Construct a vertical cylinder v0.x = CYL_RX(C, beta); v0.y = CYL_DY(C, dy); // Rotate... v1.x = ROT_X(v0.x, v0.y, theta - M_PI_2); v1.y = ROT_Y(v0.x, v0.y, theta - M_PI_2); // Extend by the excess v0.x = xx; v0.y = 0; // Rotate... v1.x += ROT_X(v0.x, v0.y, theta*2.0f); v1.y += ROT_Y(v0.x, v0.y, theta*2.0f); // Translate into place v1.x += sx; v1.y += vi.y; v1.z = C * 2.0f; } else { // Curl around cylinder beta = (tx / cx) * M_PI; // Lateral travel along cylinder dy = tan(M_PI/2.0f - (theta * 1.0f)) * (tx / cx); // Construct a vertical cylinder v0.x = CYL_RX(C, beta); v0.y = CYL_DY(C, dy); // Rotate... v1.x = ROT_X(v0.x, v0.y, theta - M_PI_2); v1.y = ROT_Y(v0.x, v0.y, theta - M_PI_2); // Translate into place v1.x += sx; v1.y += vi.y; v1.z = C * (1.0f - cos(beta)); } [/cc{_objc] Now this is not perfect either, in particular, for values of $latex \theta$ approaching $latex {\frac{\pi}{2}}$ there is a small tendancy for the page to curve below the <em>y</em>-axis a little. This I hope to remedy later. It's also straightforward to curl from a different corner, or even an edge, thanks to the complete flexibility of the rotation point of the cylinder. Significantly, however, the logic to map an {<em>x,y</em>} location to deformation parameters proved, if not straight forward then very achievable. <h3>But can you touch it?</h3> By looking at a sketch of three phases of the cylindrical deformation it became clear that there was a single equation that could involve all the parameters to hand. I called the distance along the bottom edge of the page that was after the cylinder <em>h</em>, the distance along that edge that was wrapped around the cylinder <em>c</em> and the distance along the bottom edge, on the <em>x</em>-axis, that runs from where the page leaves the <em>x</em>-axis back to the <em>x</em>-coordinate of the corner of the page being dragged Δ. [caption id="attachment_172" align="aligncenter" width="600" caption="Page Curl Phases"]<a href="http://blog.flirble.org/wp-content/uploads/2010/10/page-curl-phases.png"><img src="http://blog.flirble.org/wp-content/uploads/2010/10/page-curl-phases.png" alt="Sketches of three stages of a page curl using a cylinder" title="Page Curl Phases" width="600" height="252" class="size-full wp-image-172" /></a>[/caption] With this, it was apparent that [latex]B + h + c = 1[/latex], that [latex]h^2 = \Delta^2 + y^2[/latex] and that [latex]B = x + \Delta[/latex]. With substitution, you end up with: <p style="text-align: center;">[latex]\Delta = \frac{{\displaystyle y^2 - x^2 + (2 - 2c)x - c^2 + 2c - 1 }} {{\displaystyle 2x + 2c - 2}}[/latex]</p> and you know what? It works. Calculating <em>θ</em> was simple pythagoras and I ended up with: [cc{_objc] A = 0.0f; rho = 0.0f; C = 0.02f; // How much is lost in the curve? CGFloat dc = (C * M_PI * 0.5f); // Funky! CGFloat dx = ( y*y - x*x + (2.0f - 2.0f*dc)*x - dc*dc + 2.0f*dc - 1 ) / (2.0f*x + 2.0f*dc - 2.0f); // Limits on the range of B CGFloat mx = dx - dc; if((x + mx) <= 0.0f) { dx = - (x + dc); mx = - x; } B = (x + mx) * width; // And since we now have a right triangle, the angle is... if(dx == 0.0f) theta = M_PI_4; else { theta = atan(y / fabs(dx)); theta = (M_PI - theta) / 2.0f; if(dx < 0) theta = M_PI_4 - (theta - M_PI_4); } |

And there we have it. There are further refinements to make – for

*θ*approaching our OpenGL vertices have a problem coping and the edge of the curl looks ragged. There’s the problem noted above with the curl dipping below the

*x*-axis. And for larger values of

*c*the touch tracking code loses accuracy. But these can all be worked on.

Tags: ABC of the Sea, cone, curl, cylinder, iOS, iPad, iPhone, Objective C, OpenGL, page, page curl, page turn, Programming, Trigonometry

Posted in: iOS, Technology

Both comments and pings are currently closed.