Another take on Nadieh Bremer mesmerizing Breathing Earth visualisation, running at 60fps on a 2D Canvas without libraries or frameworks.
Approach
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.
Other recent experiments
There are many experiments and projects like BREATHING EARTH to discover other here.
FRONTFEST MOSCOW It was an honour to be invited to Fronfest Moscow 2017 with the little family to give my first workshop; implementing a Twin-stick shooter using ES6 and Canvas, and to continue my CODE🎙ART series of talks + live coding aiming to inspire new web developer artists. on November 18th, 2017
VOLTRA VOLTRA: Grinding the Universe, a gritty JavaScript demo, winner of the 1024 bytes demo competition at the Assembly 2017. on August 6th, 2017
CODING⯌ART AT RENDER CODING⯌ART at Render 2017 was part of my series of talks + live coding aiming to inspire new web developer artists. on March 31th, 2017
DRAGON PUNCH An itsy bitsy Dragon curve renderer in 121 bytes. on February 26th, 2014
JAVASCRIPT IS JARIG Javascript is 18 years old! Let's celebrate with a nice little tune. on September 14th, 2013
TV NOISE Fall 2011, another meme struck Pouet.net. TV NOISE. Over the course of a few weeks, every single platform went psssh. There you go open web platform: TV noise in 128 bytes. on November 13th, 2011
WOLF1K The idea of this entry for the JS1K contest was to do the impossible: a 1K remake of the famous WOLF5K that rocked the final edition of the5K. It does not feature guns, evil grins and violence for in WOLF1K there is no room for guns or any form of violence. on September 10th, 2010
MANDELBROT ROTOZOOM Many people did fractals renderers in Javasript in 256 bytes, but no one ever made one that zooms and rotate... until today. on September 1st, 2006
Let's talk
Don't be shy; get in touch by mail, twitter, github, linkedin or pouet if you have any questions, feedback, speaking, workshop or performance opportunity.