Multicolored / Non uniform Gradient

Question

Looking to create a gradient effect like this either the html canvas or processing. Multicolored / nonuniform, and somewhat random. My first inclination is to create several points, assign them a color and a weight, and then interpolate each pixel color on the canvas by a function of 1/R^2 from the each point?

Definitely open to other suggestions. Thanks!

It sounds like you've got an approach you'd like to try. Why don't you just try it? Try something out and post a [mcve] if you get stuck. — Kevin Workman, Aug 08 '16 at 20:18
It seems you could get an acceptable effect using built in canvas functions. You could [create](https://developer.mozilla.org/en-US/docs/Web/API/CanvasRenderingContext2D/createLinearGradient) various [gradients](https://developer.mozilla.org/en-US/docs/Web/API/CanvasRenderingContext2D/createRadialGradient) and [mash them together](http://stackoverflow.com/questions/6787899/combining-two-or-more-canvas-elements-with-some-sort-of-blending). — Juan Tomas, Aug 08 '16 at 22:11
i think i see several radial grads mixed on top of each other — bjanes, Aug 09 '16 at 02:14
This answer will cover some of the techniques you can use to achieve the effect you want. http://stackoverflow.com/a/35526320/3877726 it has a demo snippet and uses masks to layer gradient and variouse composite methods to mix the colours. You can also use clip region rather than masks — Blindman67, Aug 09 '16 at 10:08

score 0 · Answer 1 · answered Aug 09 '16 at 21:05

I have a little function to create random color-stops for the 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 and add to grad */
for (var i = 0; i < len; i++) {
    grad.addColorStop(stops[i].stop, stops[i].color);
}

/* draw to 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 a number as an argument (here generated randomly via nos()) and returns an array of ordered objects, each with a 'stops' and 'color' property. This is then iterated and added to the gradient variable (grad).

It might be useful to someone

See the jsFiddle of the above code.

Multicolored / Non uniform Gradient

1 Answers1