canvas - Multicolored / Non uniform Gradient -

looking create gradient effect either html canvas or processing. multicolored / nonuniform, , random. first inclination create several points, assign them color , weight, , interpolate each pixel color on canvas function of 1/r^2 each point?

definitely open other suggestions. thanks!

i have little function create random color-stops html5 canvas linear- and/or radial-gradient methods...

html

<canvas id="cnv" width="300" height="200"></canvas> 

javascript

/* simple selection */ var $ = function(a) {return document.getelementbyid(a.slice(1));};  var randomcolorstops = function(num) {     var arr = [];     var stops = [];     var l = num;     var obj;      var randomrgb = function() {         var colorvalue = function() {             return math.floor(math.random() * 255);         };         return 'rgb('+colorvalue()+','+colorvalue()+','+colorvalue()+')';     };      while(l--) {         arr.push(             parsefloat(                 (math.random()).tofixed(2)             )         );     }      arr.sort();     l = num;      while(l--) {         obj = {             stop: arr[l],             color: randomrgb()         };         stops.push(obj);     }      return stops; }  /* canvas properties */ var canvas = $('#cnv'); var ctx = canvas.getcontext('2d'); var cx = canvas.width / 2; var cy = canvas.height / 2; var cr = canvas.height * 0.45;  /* number of stops: random number 5-50 */ var nos = function() {      return math.floor(math.random() * 45) + 5; };  /* create radial gradient */ var grad = ctx.createradialgradient(     cx - (cr * 0.33),     cy - (cr * 0.33),     2,     cx - (cr * 0.33),     cy - (cr * 0.33),     cr * 1.66 );  /* !!! stops = random number of random colour-stops */ var stops = randomcolorstops(nos()); var len = stops.length;  /* iterate stops , add grad */ (var = 0; < len; i++) {     grad.addcolorstop(stops[i].stop, stops[i].color); }  /* draw canvas */  /* background: black */ ctx.fillstyle = '#000'; ctx.beginpath(); ctx.fillrect(0, 0, canvas.width, canvas.height);  /* circle: random gradient */ ctx.fillstyle = grad; ctx.beginpath(); ctx.arc(cx, cy, cr, 0, math.pi*2, true); ctx.fill(); 

the function randomcolorstops() takes number argument (here generated randomly via nos()) , returns array of ordered objects, each 'stops' , 'color' property. iterated , added gradient variable (grad).

it might useful

see jsfiddle of above code.