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.
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.
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 projects
There are many experiments and projects like BREATHING EARTH to discover other here.
- WE DON'T MAKE MISTAKES AT DEVONE 2019 Giving the closing keynote DEV ONE 2019, held on April 11 in Linz, Austria was absolutely fantastic. The conference was very well organized with one track, 11 talks about "scale" and 600 wonderful delegates. I learnt so much that day, got confirmation for some good practices but also learnt about many opportunities to improve our work. Also it was a pleasure to see familiar faces among the organizers and attendees from Script 17, in Linz
- MUSIC FOR TINY AIRPORTS AT WEB AUDIO CONFERENCE The Web Audio Conference 2018, held in September 19-21 in Berlin was a great mix of researchers, web developers, artists and performers presenting their projects. I had the chance to provide a deep dive into music for tiny airports, explaining how to generate hours and hours of music in a handful of bytes.
- MUSIC FOR TINY AIRPORTS 2/1 🛫 Celebrating the 40 years anniversary of Brian Eno's "Ambient 1: Music for Airports" with an homage written in 256 bytes with the Web Audio API.
- 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.
- 10 PRINT THEREMIN AT WEB REBELS A lighting talk about labyrinth generation and theremin instrument using the Web Audio API in 219 bytes presented at Web Rebels 2016.
- LRNZ SNGLRT LRNZ SNGLRT is a minimalist and energetic entry for JS1k 2016 showing twisted Lorenz attractors with ambient occlusion, soft shadows, ... a strong beat & clean design.
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.