Browser in the Dark: flashlights with CSS and canvas | Hacker News Reader

Browser in the Dark: flashlights with CSS and canvas

voussoir.net

151 pointsvoussoir20 comments

> I wanted to come up with a flashlight that really works for all elements on the page, but I don't think any combination of DOM elements and mix-blend-modes would do it.

I think CSS clip-path might be a solution like you want but without the canvas. Just tried it out here to confirm: https://codepen.io/dsmmcken/pen/BaJqrwX

Wow! That's perfect, thanks for your help. I'll add that to the article soon.

You could also use a mask, which would allow things like fuzzy edges. As a starting point, you can replace the clip-path in your example with this:

  mask: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" width="200%25" height="200%25"><circle r="160" cx="50%25" cy="50%25" fill="white"/></svg>') calc(var(--x) - 100%) calc(var(--y) - 100%) / 200% 200%;

This doesn’t seem to work below one screenful of content, though, and I’m not sure why and don’t intend to spend the time required to make it work. The SVG size technique I’ve used is a bit dodgy (in a fun kind of way) anyway. You’d probably be better to have a separate `position: fixed` element that sits on top of everything, and apply the mask to it.

I actually had the same thought and came up with a much simpler solution for this years ago, a giant box-shadow + border radius: https://codepen.io/wbobeirne/pen/WvyBQM.

The mix-blend-mode trick is cool for all of the variety of effects though!

That's a beautiful effect too, thanks!

The first time I came across the spotlight effect was in a Facebook game - I can't remember the game's name, but it was very much like Mystery Manor[1].

Kudos to the OP for coding up the feature in CSS. The effect is fairly easy to recreate in the canvas element, using a radialGradient in a rectangle for a simple spotlight or, for the replacement effect, playing with globalcompositeoperation when rendering the scene.

Here's my spotlight demo, which I did for a CodePen Challenge last year (warning: page will ask to use your device's camera): https://codepen.io/kaliedarik/pen/gORXpya

[1] - https://en.wikipedia.org/wiki/Mystery_Manor

Funny how the images change when you click "canvas on".

Ooh, yeah, nice little art project. Well done.

A bit of a tangent, but gosh did I find Dancer in the Dark to be traumatizing. So sad! Bjork (whom I love) said she wouldn't do movies again after that one but I was happy to see her pop up in The Northman trailer.

I did something similar on my homepage a while back, albeit not nearly as clean!

Take a look! https://www.davidwparker.com/

Haha, that's great! The accent color picker is a cool touch, too.

Bug report: I can see a tiny pixel of the tip of the cat's ear when the flashlight is out of his frame: https://i.imgur.com/XBWYLDI.png

Very neat.

I wonder if you could put the canvas/flashlight controls in a fixed corner of the page (instead of inline as you scroll up & down). Fixed, omnipresent controls would be more video game like.

Yes, good idea. For the purpose of this article I want the reader to encounter the features as I talk about them, but for other applications I would fix the controls.

Plus, inlined controls add to the suspense -- you might truly get lost in the dark! And breathe a sigh of relief when you find the button again :)

A radial gradient from transparent to black could work to mask away the darkness, then add the soft light layer to make it more flashlighty.

Great idea! This seems to work:

    background: radial-gradient(circle at var(--lightx) var(--lighty), transparent 0, transparent 100px, black 110px);

It would be faster to place the gradient on an overlay and move it using CSS transform. The method above causes a recalculation of the entire gradient on every move; transform would just move the already rendered texture (in hardware on modern browsers).

Oh I see. This requires the overlay to have enough extra black space on all sides, right? Like this:

    #blackout
    {
        position: fixed; 
        z-index: 1; 
        inset: -100%;
        background: radial-gradient(circle at center, transparent 0px, transparent 100px, black 110px);
        transform: translate(var(--lightx), var(--lighty));
        pointer-events: none;
    }

    document.body.addEventListener("mousemove", function(e){
        document.documentElement.style.setProperty('--lightx', (e.clientX - (document.body.clientWidth/2)) + "px");
        document.documentElement.style.setProperty('--lighty', (e.clientY - (document.body.clientHeight/2)) + "px");
    });

This works too. I'm finding that while the dev tools are open, the transform method drops to very low fps whereas the recalculating method only loses a bit of fps. While the dev tools are closed they seem to be equal on my computer. Of course on a weaker computer there might be a bigger difference.

Thanks!

Was nicely surprised by the dream theater reference.

Very cool. Quick note. A flash warning would be appreciated on the “Wild West” option. :)

Not bad. canvas is perfectly suited for that sort of thing

But where does "CSS" come in?

dsmmcken has shown that making a full blackout with CSS is possible with clip-path, but at the time I wrote this, I didn't know that.

The CSS comes in the form of the mix-blend-mode divs, "grayscale", "bright white", "inverse", etc. They are more like lenses than flashlights since they don't illuminate what's not already there, but flashlights were my inspiration for doing this so that's the term I stuck with, though I did use the word lens once.

The CSS idea came first, and the canvas idea came second when I wanted to make a full blackout and didn't know about clip-path.

Reply on news.ycombinator.com