Echo JS 0.11.0

<~>
alonronin 757 days ago. link 2 points ▲ ▼
Sorry for my ignorance, but I couldn't figure out what it does. Would you mind explaining it to me?

Replies

kali 755 days ago. link 2 points ▲ ▼
At first I thought it should be obvious by looking at the repo, but no, it's not. "Cinematic effects" - it says. Not much of an explanation. Maybe looking at the linked demo code... Not really, no, there's little code there to understand. Then I looked at the demo site itself... and uh, again no. I click the buttons and... mmm... maybe it's something subtle.

And then, if you actually inspect with the dev tools what the code is supposed to be doing it turns out it's indeed a very subtle effect... It's like a "tv backlight" [0].

The readme suggest various applications, but the actual purpose of the library seems somewhat limited. What it does is simply connect a <video> to a <canvas>. "Connect" in the sense that it dumps frames from the video into the canvas. And it applies a sort of motion blur filter to it. The only thing you seem to have control over is how much of that motion blur is applied (setSensitivity).

To understand it better, I'd suggest going to [1], opening your dev tools, then finding the <video> and <canvas> elements and their container. Disable the container's relative position, and the canvas blur filter. That will make the canvas more visible. Then play one of the videos (the forest one is good) and from the console do effect.setSensitivity(1) and then effect.setSensitivity(0.5) and then effect.setSensitivity(0.1).

As far as I can tell, this is all it does, and I can't really think of much else to do with it other than the "tv backlight" effect or something very similar to it.



[0] https://duckduckgo.com/?q=tv+backlight&iax=images&ia=images
[1] https://simonwep.github.io/cinematic/
kali 755 days ago. link 2 points ▲ ▼
After thinking about it a bit more... You *could* apply a couple other effects.

I mean, initially you're restricted to applying CSS over the background canvas. Other than a blur(), you could do sepia() or invert() or a few others, but the effect isn't particularly interesting.

But you could also build an SVG filter and apply that on the canvas through url(#filterid). This does expand the options farther. Then again the problem is that SVG filters can be rather expensive and you're probably going to be blowing your reader's fans into turbine mode.