Lights and Shadows
ciechanow.skiI love the format of interactive educational documents, especially when you can tell that the 'teacher' is also the UI designer and developer in one and there's a very high level of quality and polish. There's nothing quite like it for learning a complex subject.
Check out the archives [1] for more amazing interactive documents by this author.
Can anyone share any more examples of this kind of thing? The OP's archives [1] are amazing.
https://distill.pub is such a platform for articles about machine learning
https://explorabl.es is a more general hub.
> especially when you can tell that the 'teacher' is also the UI designer and developer in one and there's a very high level of quality and polish. There's nothing quite like it for learning a complex subject.
Agreed. Unfortunately I think this is the inherent limitation to the explosion of such material (Bret's seminal essay [0] was almost a decade ago) - it takes an insane amount of skill, in mostly orthogonal disciplines, as well as a lot of time and effort to make it. Some tools attempt to make them a little straightforward to program, but due to the nature of it you can't really have a one size fits all solution that isn't just a general programming language + rendering engine.
And there is no "explorables industry" to fund the production of those (unlike say, textbooks), so it ends up being mostly side projects for otherwise gainfully employed developers.
It would be amazing to have eg. attempts at building an entire K-12 curriculum around explorable explanations. It's also the kind of work that probably loses in clarity and value when done by a team/committee rather than a single person dedicated to their vision.
> Agreed. Unfortunately I think this is the inherent limitation to the explosion of such material (Bret's seminal essay [0] was almost a decade ago) - it takes an insane amount of skill, in mostly orthogonal disciplines, as well as a lot of time and effort to make it.
This is what I figured out as well. Often the people that have the knowledge are not the ones who know how to put this on to a webpage in a another form then text and images. Like mygo comments below most explanations are done in interactive news articles but this has to be done with a team of programmers and designers who are working together. I am currently building a tool trying to narrow this gap. The tool is at a very early stage, but I'm sharing early previews at [1]. The goal is to create a tool for interactive visualizations that people without much programming experience can use which outputs something that is more dynamic then just text. Such a tool could never do what could be done with a full blown programming language but I'm hoping to start at an easy to use tool and expand it outwards to more complex visualizations.
[1] https://dribbble.com/shots/12517016-Essay-with-dynamic-backg...
Did you take any inspiration from this Washington Post article? [1]
1 - https://www.washingtonpost.com/graphics/2020/health/coronavi...
I did not see that article but that is definitely the kind of thing I want to make possible. Thank you for the link!
This is one example of showing information in an interactive way but there are other forms as well. There are currently around 10 other visual representations in the tool (think maps, presentations etc).
It seems as though it’s a developing trend in web design.
https://english.elpais.com/spanish_news/2020-06-17/an-analys...
Can you share the other presentation forms? I may have some examples for each found out in the wild.
I sent you an email!
I’m a high school English teacher. If I can be helpful in any way, get in touch.
The Washington Post sometimes does this: https://www.washingtonpost.com/graphics/2020/world/corona-si...
And then Bloomberg's "What is Code": https://www.bloomberg.com/graphics/2015-paul-ford-what-is-co...
Slate has some as well, such as their interactive transatlantic slave trade visualization (pause the animation and click on a dot to learn more about the vessel)
http://www.slate.com/articles/life/the_history_of_american_s...
Although these aren't interactive, I like this person's blog: http://tabletopwhale.com
I try to do the same at STEM Lounge, although it takes a lot of time and effort. I haven't gone full interactive yet (although that's the goal). Just static articles so far. https://stemlounge.com The "muddy america" article took a while.
The amount of care put into preparing this is amazing. The back-up lights even illuminate on the car when moving the slider backwards.
Yeah that also caught my eye, it was a very nice touch :)
I love the touch of the car's reverse lights coming on when you're sliding it closer to you!
I think this is the most beautiful rendering explanation I've ever seen.
Those are some well made demonstrations! Really intuitive and I think this would be a good theoretical starting point for anyone interested in computer graphics.
I think it should be clarified that with a real monochromatic cyan light source the tiles in this example [1] would be different hues of cyan, and not different hues of green, blue, and cyan (which is due to the cyan light source being modeled as a combination of green and blue light in the example).
This reminded me of an article about James Turrell and his experimentation with light as "not a tool to enable vision but something to look at":
https://www.archdaily.com/380911/light-matters-seeing-the-li...
Great resource! (I love the amount of thought the author put into how learners might best grasp the concepts via examples that differ from the typical diagrams.) I only wish it had continued with more complex setups!
As someone interested in how light works for its impact on photography and cinematography, I’d like to find expanded similar resources.
The main one that comes to my mind is "Light: Science and Magic" (978-0415719407) which I own. Another possible learning tool (which I have not yet had a chance to use) is Cine Tracer: https://store.steampowered.com/app/904960/Cine_Tracer/
Any other books, sites, or software that might help one learn how to better understand or shape light?
Looks really nice, the widgets are great and run well on my phone. Is it a real time ray tracer doing the rendering? Still amazes me these days what’s possible in browsers or on a phone.
> Is it a real time ray tracer doing the rendering?
With these shapes, this can be solved analytically with the equations shown. If this was raytracing, you'd need a lot of rays for such a clean image.
> Still amazes me these days what’s possible in browsers or on a phone
I'm more amazed at the author, it doesn't even kick in the fans on my old MBP 2013! And even then, this is the least praise-worthy feature of the explorable explanation! I find the whole thing quite mindblowing. Congrats to the author.
I have not checked the source, but I would guess that the lighting is pre-baked into textures, which are then simply blended with the sliders.
I sent this to several of my friends who are professional photographers and all they could say was ‘shhhh don’t give away our secrets.’
It’s all about the light. Really beautiful demonstrations.
Wow, yes, this, thank you, kudos, "please sir may I have another".... 10/10, A+, bookmarked, sharing, inspired...
My only complaint is that I hoped for a second half of the article with equally detailed visualizations, explaining the physically-based rendering algorithms used to create the visualizations in the first half. The last diagram showing multiple matte reflections is just a teaser.
Excellent example of where JavaScript really is useful!
Very cool. Was there a specific framework or library you used to make these demos besides just Three JS?
It's cool, but I see that it requires WebGL.
I wonder if it could be done without it.
So good!
Delightful!