Loading...
BlogPortfolioWeb

Unwrapping the Egg

Several years ago I was asked to create a web page that would allow young children to paint a Ukrainian Easter Egg(Pysanka). They would do this by selecting a color from a pallet of pre-selected colors. After selecting a colour, they could fill in any area by simply clicking on the image.

Colored Design

Not long after the initial version was released, I was asked to create some sort of preview of how this image would look like on an egg.

This was one of my first experiences using WebGL on a project. To show the egg, I generated a polygonal revolved sphere and the radius to “1 + 0.2 * theta”; where theta is the current latitude angle. This created the desired egg shape.

I then placed the coloured image onto the with respect to the eggs normal vectors and whether we were mirroring the image on two sides of the egg or four.

Finally I added three lights to make the egg pop a little bit. On the right side, there is a white light to view the true colors of the egg, and on the left side there is a yellow and blue light. These two lights are positioned to mimic the coloring of the Ukrainian flag and was done to tie it into the rest of the site.

3D Egg

For a few years, this is how the page was used; but, recently I was asked if we could make a physical 3D version of the egg available.

The first thought was, could we generate a file that can be used for 3D printing . The answer to this is of course yes, the egg itself would be a relatively safe object to print, but since this site was for young children(at about Grade 3 in elementary school) the chances that they would have access to a 3D printer were quite low.

We decided the best option would be to print out a two dimensional version of the egg which could then be folded into a 3D model. This was a simple enough solution, what could possibly be difficult about this? Turns out, a little something called Gaussian curvature would show that this is technically impossible.

In short a sphere(or egg) has a positive curvature while a piece of paper has zero curvature. When trying to transform shapes while keeping the same surface area, this total curvature has to remain the same; otherwise you would see rips along the shape where the tension was too great.

So, we knew this would never be a perfect solution but an approximation would work just fine. Luckily I was able to find a great paper, titled “Wrapping spheres with flat paper”, which addressed this issue (https://www.sciencedirect.com/science/article/pii/S0925772109000182). In this they described several methods of generating this approximation while limiting materials.

I extracted their n-petal method of rendering a sphere on a sheet of paper. To do this I used their formula to find the outer edges of the petals. I would then interpolate between that edge and the middle to find where each vertex of this shape would be placed. I then rotated each petal based on their angle on the sphere. Finally I increased the height of each petal by 10%. This gave the printout a look which resembled an egg(even if it wasn’t the dimension in the 3D visual) while still being easy to cut out and tape together.

Finally I had to create a border around the image to make it easier to cut out. This was done by creating a stencil with the current printout, then drawing black versions of the printout with an offset of two in each direction.

Overall I think the results turned out beautifully. I can’t wait for the kids to give try this out and see their digital creations become a reality.

Please visit the Ukraine Alive site for this and other fun activities.

Ukraine Alive: http://ukrainealive.ualberta.ca/

Ukrainian Egg: http://ukrainealive.ualberta.ca/wp-content/iframes/Pysanka/index.html