[csswg-drafts] [css-images] Turbulence/noise image function

AmeliaBR has just created a new issue for https://github.com/w3c/csswg-drafts:

== [css-images] Turbulence/noise image function ==
>From [Henrik Andersson on the www-style mailing list](https://lists.w3.org/Archives/Public/www-style/2017Apr/0056.html):

> As many image effect specialists can tell you, noise can be used well in
various effects.
>
> As such, I think that it would be useful if there was a way to generate
noise images in css.
__________________________________________________

>From me:

The web platform already has a way to generate a noise image, [the `<feTurbulence>` filter primitive](https://drafts.fxtf.org/filters/#feTurbulenceElement).  However, using it to generate a rectangle of noise requires:

- SVG filter markup
- a dummy element to which the filter will be applied

Which 

Turbulence doesn't make sense as a shorthand filter function, because the shorthands only work with a single image processing line, starting with the original and modifying it on each step.  Most uses of noise would want to modify the noise and composite or blend it with the original rendering of the element. 

However, a noise primitive could be very useful as an image layer in a background image stack, now that we have `background-blend-mode`.  And even more so when/if browsers implement [the `filter()` function for modifying an image value](https://drafts.fxtf.org/filters/#FilterCSSImageValue).

I'm imagining something like

```css
background-image:
    filter(turbulence(stitch 0.2/3), saturate(10%)), 
    linear-gradient(lightBlue, darkRed);
background-size: 3em 3em, 100% 100%;
background-blend-mode: hard-light;
```

Considering that browsers already implement the feTurbulence algorithms, it probably wouldn't be too difficult to implement (although there are a few [open issues](https://github.com/w3c/fxtf-drafts/issues?utf8=%E2%9C%93&q=is%3Aissue%20is%3Aopen%20feturbulence) on the spec that need to be resolved).  

It could even be easily polyfilled using SVG data URIs (or as easy as any other CSS polyfill, anyway).

Initial proposal, to be added to [CSS Images 4](https://drafts.csswg.org/css-images-4/):
________________________

## Noise images

A noise image generates a rectangular region of Perlin noise, following the algorithms described for [the `<feTurbulence>` filter primitive](https://drafts.fxtf.org/filters/#feTurbulenceElement).  A noise image is drawn into a box with the dimensions of the concrete object size. However, the image itself has no intrinsic dimensions.

There are two noise image functions, corresponding to the two noise algorithms.  The amount of noise is determined by a base-frequency (usually a decimal between 0 and 1) in the horizontal and vertical directions, and by the number of octaves (multiples of the base frequency) which are compounded (an integer, usually between 1 and 10).  The noise function can be "stiched" across edges to provide a smooth appearance when the image is tiled (such as in a repeating background image).  An optional seed parameter can be used to further alter the final generated noise.

```
<noise-image> = [<turbulence> | <fractal-noise>]
<turbulence> = turbulence( <noise-parameters> )
<fractal-noise> = fractal-noise( <noise-parameters> )

<noise-parameters> = [stitch | no-stitch]? <base-frequency> 
                         [/ <num-octaves>]? [seed  <seed>]?
<base-frequency> = <non-negative-number>{1,2}
<num-octaves> = <non-negative-integer>
<seed> = <integer> (or <number>: feTurbulence allows decimals, but truncates them)
```

The default values are no-stitch, `<num-octaves>=1`, and `<seed>=0`, matching the defaults for `feTurbulence`.  A single `<base-frequency>` value is used for both x and y.
________________________




Please view or discuss this issue at https://github.com/w3c/csswg-drafts/issues/1273 using your GitHub account

Received on Friday, 21 April 2017 16:45:58 UTC