random filter

_.md

[ Launch: random gradient ] 4758922 by roundrobin
[ Launch: Tributary inlet ] 4758697 by roundrobin

config.json

{"description":"random filter","endpoint":"","display":"svg","public":true,"require":[],"fileconfigs":{"inlet.js":{"default":true,"vim":false,"emacs":false,"fontSize":12},"_.md":{"default":true,"vim":false,"emacs":false,"fontSize":12},"config.json":{"default":true,"vim":false,"emacs":false,"fontSize":12}},"fullscreen":false,"play":false,"loop":false,"restart":false,"autoinit":true,"pause":true,"loop_type":"period","bv":false,"nclones":15,"clone_opacity":0.4,"duration":3000,"ease":"linear","dt":0.01}

inlet.js

var defs = g.append("defs");
                    
var gradient = defs.append('linearGradient')
	.attr({
	x1: '0%',
	x2: '0%',
	y1: '0%',
	y2: '100%',	
  spreadMethod: 'pad',
  id: 'gradient1'
	});

var radial = defs.append('radialGradient')
	.attr({
	cx: '50%',
	cy: '50%',
	fx: '50%',
	fy: '50%',
	r:  '100%',
  spreadMethod: 'pad',
  id: 'gradient2'
	});
function r(min, max) {
    return (Math.random() * (max - min) + min).toFixed(2);
}    
var filter = defs.append('filter')
.attr({id:'filter1'});

var type = ['Turbulence','fractalNoise'];

filter.append('feTurbulence')
.attr({
	result: 'turb1',
	id: 'turb1',
	seed: '27',
  type: type[r(0,1)],
	numOctaves: "5",
baseFrequency: r(0,0.4)
})   
                                                                                                                               
var mat = [r(-1,1),r(-1,1),r(-1,1),r(-1,1),r(-1,1),r(-1,1),r(-1,1),r(-1,1),r(-1,1),r(-1,1),r(-1,1),r(-1,1),r(-1,1),r(-1,1),r(-1,1),r(-1,1),r(-1,1),r(-1,1),r(-1,1),r(-1,1)];

var filter_elem4 = filter.append('feColorMatrix')
      .attr('result','result9')
      .attr('values',mat.join(" "))
      .attr('id','fe4')
                                
       
var randomNumber = r(1,6);
var stepSize = 100 / randomNumber;
var colors = [];

for(var i= 0; i < randomNumber; i++){

  var color = '#'+Math.floor(Math.random()*16777215).toString(16);
  colors.push(color);
  gradient.append('stop')
	.attr({'stop-color': color, 'stop-opacity': '1', offset:(stepSize*i).toFixed(2)+'%'})
              
  
  radial.append('stop')
.attr({'stop-color':color, 'stop-opacity': '1', offset:(stepSize*i).toFixed(2)+'%'})


  
}    
                                                       
var attr ={
        fill: "#000000",
        x : 0,
        y: 300,
        "font-size": 14,
        "font-family": "Arial",
        "text-anchor": "start"
    };


g.append("circle")
.attr({
	r: 100,
	cx: 200,
	cy: 100,
    fill: "url(#gradient2)"
});
                 
                
  
g.append("circle")
.attr({
	r: 100,
	cx: 500,
	cy: 100,
    fill: "url(#gradient2)",
    filter: "url(#filter1)"
});

                                
var text = g.append('text')
.text(colors[i])
.attr(attr)
.attr("y",350);

var string0 = " var vals = ["+mat.join(",")+"];";
var string1 = " var colors = ["+colors.join(",")+"];";

                                

g.append("g")
.append("foreignObject")
    .attr("width", 480)
    .attr("height", 500)
    .attr("y", 400)
  .append("xhtml:body")
    .style("font", "14px 'Helvetica Neue'")
  .html("<textArea>"+string0+""+string1+"</textArea>");