I recently mentioned that I was interested in creating a kind of code narrative — a progression of steps the shows how to create things like that procedural bubble I posted.
In the movie business, there is a term for showing, step by step, how a special effects scene is built up. It’s called a scene breakdown.
As it happens, a good friend was really interested in learning how the different parts of the procedural bubble work together. Inspired by that request, I made it a priority to create such a breakdown.
Mostly this involved wrapping a bunch of HTML5 code around the core program to create a framework for telling such a step-by-step story. Then of course telling the story.
So now I have something workable: Perhaps the world’s first bubble breakdown.
Very educational! WebGL is on my list of things to learn, and this is a great introduction. Question: Why do you take the sqrt(c) before setting the gl_FragColor?
The call to turbulence() reminds me of the classic Sidney Harris cartoon:
https://avionod.wordpress.com/2009/04/06/and-then-a-miracle-happens/
The sqrt() is to deal with gamma correction. Our calculations need to add light linearly, but the final display needs to (roughly) square 0…1 rgb values (which it then discretizes to 0..255), so that images displayed in only 8 bits per component can roughly match human perception. The “gamma” in question is the power in a power curve, in this case around 2.0.
So after we are done, if we want our calculations to actually reflect photons adding linearly, we need to do the inverse of the gamma correction.
I totally agree with the point in the Sidney Harris cartoon (one of my favorites). The difference is that we will be able to do another of these breakdowns for how turbulence() is implemented, and we can link to it from this page. 🙂