Lunar Eclipse

Sprite Sheet

Swipe left and right to see an eclipse of the moon from different vantage points. The lunar eclipse simulation was prepared with sprite sheets. What's a sprite sheet? Learn to create sprite sheets with the Kindle book, HTML5 Sprite Sheets.

Swipe to View Eclipse of the Moon

3D Sprite Sheet

Swipe to spin around space. View the sun, moon, and Earth, renactment of a lunar eclipse as Earth blocks the sun's light from fully reaching the moon.

Graphics

The size and distance between planets were reduced, to communicate concepts more clearly with animation.

3D animation was rendered with 3DS Max and the volume light atmosphere effect. Graphics were modified with Photoshop. Before modifications, maps of the earth and moon were provided courtesy of Nasa Images.

The lunar eclipse simulation was implemented with with HTML5, JavaScript and sprite sheets. The graphics were created with 3ds Max and Photoshop. The Kindle book, HTML5 Sprite Sheets teaches you how to prepare sprite sheets.

Total Lunar Eclipse

A total eclipse of the moon occurs when the earth prevents direct light of the sun, from reaching the moon. When the earth blocks all direct sunlight, indirect sunlight becomes filtered and refracted by the earth's atmosphere. Gases around the earth remove the blue color from light, often providing a beautiful orange red glow to the moon.

Sequence of Events

The animation illustrates a lunar eclipse from different perspectives. As the planets begin to line up and sun light gradually decreases on the moon, the moon darkens. The lunar eclipse animation displays a blood red moon, when the earth, moon, and sun, line up. At that time, the earth blocks the light of the sun, and reflected light colors the moon. The moon rotates away from the earth, and becomes darker as the sun's rays are slightly blocked. Eventually the moon receives direct light from the sun again.

Four consecutive total lunar eclipses will display April 15, 2014, October 8, 2014, April 4, 2015, and September 28, 2015.

Those who study prophecy suggest four blood moons represent significant events in history. Both the Jewish Scriptures and Christian Bible reference similar events in Joel chapter 2 of the Hebrew minor prophets, and Acts chapter 2 of the New Testament.

Joel 2:28-31

And it shall come to pass afterward, that I will pour out my spirit upon all flesh; and your sons and your daughters shall prophesy, your old men shall dream dreams, your young men shall see visions: And also upon the servants and upon the handmaids in those days will I pour out my spirit. And I will shew wonders in the heavens and in the earth, blood, and fire, and pillars of smoke. The sun shall be turned into darkness, and the moon into blood, before the great and the terrible day of the LORD come (Joel 2:28-31 KJV).

Acts 2:19-21

And I will shew wonders in heaven above, and signs in the earth beneath; blood, and fire, and vapour of smoke: The sun shall be turned into darkness, and the moon into blood, before that great and notable day of the Lord come: And it shall come to pass, that whosoever shall call on the name of the Lord shall be saved (Acts 2:19-21 KJV).

More Sprite Sheets

Sprite Sheet

Sprite sheets combine multiple frames of an animation sequence into one graphic file. Software increments the X and Y pixel coordinates, within the graphic file, to display frames in order. Sprite sheet software displays individual frames within a sprite sheet based on canvas mouse or touch points.

As you move your finger, or mouse, across the display screen, code calculates which frame to display.

Learn to prepare sprite sheets with the Kindle book, HTML5 Sprite Sheets.

HTML5 Sprite Sheets

Development & Design

Learn the basics of sprite sheet design and development.

This short book explains how to create animated graphics with HTML5 sprite sheets. Learn how to prepare sprite sheets with JavaScript, HTML markup and Photoshop, or a similar graphics application. Learn to arrange sprite sheet images and display animation online with code.

This book demonstrates how to create three sprite sheet animations including the spinning Android tablet, explosion and exploding coffee pot. Each animation includes different techniques. The spinning Android covers the basics of sprite sheet animation with JavaScript and HTML. The explosion includes an array of coordinates, try-catch blocks, lighting and transparency effects. The exploding coffee pot adds background graphics. The full source code's included with this book along with links to the graphics and JavaScript for each project.

Sprite sheet animation runs on any phone, tablet or computer with an HTML5 compatible browser, which includes most current Androids, iPhones, Windows and Macintosh computers.