Random Webkit Filter

Simple function to return a random webkit filter.

by eprouver

HTML

<button onClick="newFilter()">New Filter</button>
<hr/>
<img id="sample" src="http://i.imgur.com/hX4Red6.jpg" />
<div id="output"></div>

CSS

#output {
    font-family: arial, sans-serif;
    margin-top: 2em;
    font-size: 16px;
    text-align:left;
}

JavaScript

var filterTypes = [{
    "name": "blur",
    "pattern": "[1-6]px"
}, {
    "name": "grayscale",
    "pattern": "[0.1-1.0]"
}, {
    "name": "drop-shadow",
    "pattern": "[0.1-10.0]px [0.1-10.0]px [0.1-20.0]px black"
}, {
    "name": "sepia",
    "pattern": "[0.1-1.0]"
}, {
    "name": "brightness",
    "pattern": "[0.1-2.0]"
}, {
    "name": "contrast",
    "pattern": "[0.1-2.0]"
}, {
    "name": "hue-rotate",
    "pattern": "[0.1-360.0]deg"
}, {
    "name": "invert",
    "pattern": "[0.1-1.0]"
}, {
    "name": "saturate",
    "pattern": "[0.1-5.0]"
}, {
    "name": "opacity",
    "pattern": "[0.1-1.0]"
}]

var randFilter = function () {
    return filterTypes.filter(function (v) {
        return Math.random() > 0.7;
    }).map(function (v) {
        var reg = /\[(.*?)\]/g,
            match, output = v.pattern,
            rando = 0;
        while ((match = reg.exec(v.pattern)) != null) {
            rando = match[1].split('-').reduce(function (t, v) {
                return parseFloat((Math.random() * (v - t)) + t).toFixed(2);
            });
            output = output.replace(match[0], rando);
        }
        return [v.name, '(', output, ')'].join('');
    }).join(' ');
};

function newFilter() {
    var myFilter = randFilter();
    document.getElementById('sample').style.webkitFilter = myFilter;
}