429 words ~ 2-4 minsMathieu 'p01' Henri on June 26th, 2017

Breathing Earth

Another take on Nadieh Bremer mesmerizing Breathing Earth visualisation, running at 60fps on a 2D Canvas without libraries or frameworks.


The weekly data are provided by VIIRS geo files from NOAA STAR. Using Canvas ImageData, it was straight forward to render the vegetation health, or “greenness” across the planet.

The Canvas has a pale yellow backround to see the arid areas through. The ImageData is white on the water masses and dark green on the land masses. Setting the alpha channel of each data point allows to shift between the dark green of the lush areas and to see through the pale yellow background of the arid areas. To get smooth animation, the data of two consecutive weeks are linearly interpolated.

Tiny circles

By popular demand, and to be true to the original Breathing Earth, the data are also rendered as little discs of radius 1, 2 and 3. The circles are drawn in additive blending mode, which makes the land masses "greener". To compensate the accumulation of "greenness", there is a final pass mixing the exact value of each data point with the value of the circles overlapping it.

This approach cruises at 60 frames per second on a mid-range laptop.

Breathing ImageData

Click or tap the picture of the earth to start/pause the animation.

This was an interesting exersize to test this approach and see the performance one can get out of plain 2D Canvas and ImageData. Hope you liked this little project.