Radial Distortion for Book Printing

---

Carrie had a nice idea for an upcoming science/book festival. She wanted to print on the sides of a book in way that, once openend, an undistorted image of the author (in our case Faulkner) would be visible. This required finding out the initial distortion for the image.

Implementation

A shader transforms the input coordinates into radial coordinates and uses those for texture lookup. The linear texture coordinates are scaled to lie within the given parameters of the opening and closing angles, as well as the minimum and maximum radius. Finally, the radial coordinates lie in [-1..1] and have to be scaled back to [0 .. 1] for the texture lookup.

Shader Code

      #version 120

      // input tex coords in (0 .. 1)
      varying vec2 texcoords;

      // input image
      uniform sampler2D colormap;

      // min and max radius for the book in (0 .. 1)
      uniform float minRadius = 0.05;
      uniform float maxRadius = 1.0;

      // opening and closing angle
      uniform float alpha = 15.0;
      uniform float beta = 345.0;

      #define M_PI 3.1415926535897932384626433832795

      void main()
      {
        // scale tex coords from 0 .. 1 to -pi .. pi
        float alpha = radians(mix(alpha, beta, texcoords.x));
        
        // calculate radial coordinates
        float r = mix(minRadius, maxRadius, texcoords.y);
        vec2 radialCoords = vec2(sin(alpha), cos(alpha)) * r;

        // scale radial coords back from -1 .. 1 to 0 .. 1
        radialCoords += vec2(1.0);
        radialCoords *= 0.5;

        // texture lookup
        vec3 color = texture2D( colormap, radialCoords ).rgb;
        gl_FragColor = vec4(color, 1.0);
      }
      

Results

This image shows the application in action. On the left side is a simulated preview of how the book would look like (don't mind the upside-down images). The center image shows the distorted image, as calculated by the shader. In this image left is the first and right the last page; bottom is the spine of the book and top the outside of the page. On the right is a sample page of the book, again with bottom the spine and top the outside of the book. Left and right are the top and bottom of a page.

A black line is visible in the left and center images and can be moved around using the mouse cursor. This line is the currently active page or resampling cut through the distorted image and updates the sample page on the right. Following the line in the image, for example, one can make out from bottom to top the dark shadow under the nose, the bright spot on the cheek, the black of the eye and eyebrow and on top the changing levels of grey of the hair.

Finally, the application allows the extraction of any number of pages for a book by resampling the center image in slices and writing it to files. The resulting files have the form on the right.

Final Product

The final product was then printed and bound to an actual physical book. Carrie Roy did the work here and she told me that the book has already toured some exhibitions successfully.

More info and photos of the final book can be found on Carrie Roy's flickr page.