Infographics

◄Page 12►

Lunar Eclipse, Color Filters

The lunar eclipse image, with labeled information, illustrates planetary bodies lined up as the moon changes color. The harp displays three HTML5 color filters, plus the full color image. Tap an image for more information.

Color Filtering Full Color & Three Color Channels

Lunar Eclipse Size and Distance Modified for Better Viewing

Infographics - Diagrams, Graphs, Charts

Infographics use charts, graphs, callouts, colors and images to convey concepts visually. Infographics are a form of technical illustration; often using cutaways, arrows with labels, exploded views, detail views, three dimensional or two dimensional images and blueprints to help viewers understand new ideas.

Tags

Eclipse of the Moon Information

A total eclipse of the moon occurs when the earth prevents direct sunlight from reaching the moon. When the earth blocks direct sunlight, indirect sunlight filters and refracts through 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

As the planets begin to line up and sunlight gradually decreases on the moon, the moon darkens. A lunar eclipse displays a 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 happened April 15, 2014, October 8, 2014, April 4, 2015, and September 28, 2015.

Eclipse Illustration Preparation

Distance and scale were changed for easier viewing. The graphic was created with 3ds Max's fire effect for the sun. The moon's texture map was modified from an original photograph at NASA images.

Color Filters

A color channel represents one hue from an image. Most digital images include red, green and blue channels. Some images also include an alpha channel which represents the amount of transparency per pixel. Color filters modify color channels to change the overall appearance of an image.

This example was prepared from screen shots of color filters which use the HTML5 2D context getImageData() method. Code accesses every pixel to remove all but the red channel values for the first filter, all but the blue channel values for the second filter and all but the green channel values for the last filter.