Floating Rainbow 3D Easter Eggs!

Floating rainbow-colored 3D easter eggs.
Floating rainbow-colored 3D easter eggs.

The Easter Bunny seems to have gone all out this year. These magical Easter eggs can levitate and come in multiple designs and colors! Learn how a single shape can be used to construct a three-dimensional egg. Or just sit and stare at them for a while. Happy Easter!


Programming Language

Typeface Used

Floating Rainbow 3D Easter Eggs!

These Easter eggs are magical and will change color before your eyes. They can levitate above the ground and will even follow your mouse. How curious!

These special Easter eggs come in five varieties:

  • Plain
  • Striped
  • Dotted
  • Glowing
  • Ghost

Click to toggle between each variety, or see them all together in the “mixed basket” view.

Sometimes an egg will magically rainbow-ify itself. Can you spot it?

How To Construct A 3D Egg Out Of One Shape

Imagine you’re standing up and looking straight down at an open book on the floor. You’re about to turn the page. You lift the page from the right and start turning it slowly. Then you stop when the page is perpendicular to the floor.

Now you’re about to do the same thing to the page on the left. You lift the page and start turning it slowly. Then you stop when the page is perpendicular to the floor.

If you consider all the 3D space that the two pages traveled through, you’ll notice that the volume takes the form of the front half a cylinder – a solid of revolution obtained by rotating a 2D shape around an axis.

While we can’t fully construct a solid figure using wafer-thin pages, we can approximate it pretty closely by “fanning” the pages out. Each page is turned at its own angle, but there is enough that we can discern the overall shape.

I used this approach to draw 3D eggs. But instead of rectangular book pages, I used pages that were shaped like half-eggs.

I started with one half-egg shape, or egg “slice”. Then I put another half-egg shape on top, but scaled down horizontally to simulate rotation. I kept overlaying egg “slices” at smaller and smaller horizontal scales until I drew a slice that was “rotated” 90 degrees. This process accounts for one side of the egg, so this is repeated for the other side.

I’m drawing 2D shapes on top of each other, but how do I achieve a three-dimensional appearance? By coloring each slice according to a color gradient. The hue changes very slightly from slice to slice; the more slices you make, the smoother the gradient becomes.

As a final touch, I added a translucent white ellipse to make the eggs have a “shine”. Don’t these eggs look so appealing?

Behind a few of the designs…

For the “striped” design, the color of every other egg slice is lightened.

For the “glowing” design, every slice has a translucent white stroke. The width of the stroke is affected by the horizontal scale, so the outside seems to glow more than the inside.

For the “ghost” design, the egg slices are slightly translucent. Spooooky!

Contest: DecoratEgg

This project was one of five winning entries for Khan Academy‘s “DecoratEgg” contest (April 2 – 7, 2015). Winners received a Golden Winston Badge. Don’t forget to try out the sitewide Easter Egg Hunt – visit the egg icon in the upper-left corner to play! Happy Easter!

By | 2016-10-14T13:33:10-07:00 July 4th, 2016|Tags: , |0 Comments

About the Author:

Darryl Yeo is a young programmer, web developer, computer graphics artist, musician, and composer who hopes to inspire others through his projects and inventions. Read more about Darryl.

Leave A Comment

This site uses Akismet to reduce spam. Learn how your comment data is processed.

Go to Top