Acrylic UI Test

[joecooldoo]

Just a small test to recreate the Windows 11 Fluent design UI.
You can see it process the image by turning on Visible Stepping.
https://snap.berkeley.edu/snap/snap.html#present:Username=joecooldoo&ProjectName=Acrylic%20UI%20Window

I wish there was a library to blur images super quickly.

[bh]

@joecooldoo

I wish there was a library to blur images super quickly.

Will this do?

[joecooldoo]

That doesn't do anything (for me).

[dardoro]

You may try convolution filters as described

Digital Phonograph Stylus

I've made a project to play with 3x3 convolution filters as described (filters are implemented as a hyperized sum of the whole shifted arrays) Below is a Stage image with 3 segments Orig > Gaussian > Sobel Y (edge detection) > Sobel Y result Orig - original record groove image Orig > Sobel Y result [Stage (37)] Even if this is not directly applicable to the problem maybe can be used to further experiments (at least converting to grayscale and threshold cut). BTW.It seems that there are…

:Snap! Build Your Own Blocks

Ot scale down and up to engage smoothing

[joecooldoo]

@dardoro

You may try convolution filters as described

I couldn't seem to figure it out. It just turned the image into a bunch of wavy lines.

@dardoro

Ot scale down and up to engage smoothing

I do that already, but I don't like the way it smooths it.

[bh]

@joecooldoo

That doesn't do anything (for me).

Really? I started with this costume:

and the result of that expression I posted looks like this:

If that's not blurry enough, you could average in the pixel two later also:

Here's another costume before and after:

It's a pretty subtle blur; maybe you'd have to add ten shifted versions of the costume (writing a little procedure to help) to get it to look how you want.

[joecooldoo]

It's not blurry enough, I want something like the Gaussian Blur

[bh]

@joecooldoo

Gaussian Blur

Well, the article gives an algorithm...

But you could probably get something good enough by using a simpler weighting. Something like

but with 10 shifted versions on each side of the central one, created with a helper procedure rather than by making expressions by hand as I've done here, and also being more efficient by, e.g., making the last one by applying ALL BUT FIRST OF once to the next-to-last one, rather than by calling ALL BUT FIRST OF twice on the original costume. And by computing RESHAPE 0 TO (4) only once and storing it in a script variable (or even in a global variable, if you're going to do this to more than one costume).

And if you want to do a really good job, take the result of this horizontal blurring, exchange rows and columns, do this computation again, then exchange rows and columns back, to get a vertical blurring. (As that article says, one big advantage of a Gaussian weighting is that doing horizontal and vertical blurring in two separate steps as I'm suggesting is mathematically equivalent to doing a two-dimensional blurring all at once, which is what you really want but is too complicated to compute. So instead of my linear weightings 1, 0.9, 0.8 you could look up the actual correct values for a Gaussian distribution, which are given in the article.)

[joecooldoo]

This takes too long to compute to use it every frame. Maybe there should be an official library that uses javascript to blur images.

[bh]

I'm not entirely convinced that rewriting it in JS would do better at speeding it up than coding the optimizations I suggested. SInce hyperblocks, we are really pushing JS speed.

[joecooldoo]

Then how come some webpages use this effect for the title bar and can be updated every frame using javascript?

[bh]

Because they write optimized JS, not trivial JS the way I wrote trivial Snap! rather than optimized Snap!. At least maybe.

Image blurring seems a little specialized for a library. Maybe a more general graphic effects library would be more interesting.