Mehrfarbiger/nicht einheitlicher Farbverlauf

Question

Auf der Suche nach einem Farbverlaufseffekt wie diesem, entweder dem HTML-Canvas oder der Verarbeitung. Bunt/ungleichmäßig und etwas zufällig. Meine erste Neigung besteht darin, mehrere Punkte zu erstellen, ihnen eine Farbe und ein Gewicht zuzuweisen und dann jede Pixelfarbe auf der Leinwand um eine Funktion von 1/R^2 von jedem Punkt zu interpolieren?

Offensichtlich offen für andere Vorschläge. Vielen Dank!

Answer 1

Ich habe eine kleine Funktion zufällige Farbe-Anschläge für die HTML5 Canvas Linear- und/oder Radial Gradientenmethoden ...

HTML

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

JavaScript erstellen

/* 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(); 

Die Funktionen on randomColorStops() nimmt eine Zahl als Argument (hier zufällig generiert über nos()) und gibt ein Array von geordneten Objekten zurück, jedes mit einer Eigenschaft 'stops' und 'color'. Dies wird dann wiederholt und der Gradientenvariablen hinzugefügt (grad).

Es könnte jemand

Siehe jsFiddle of the above code nützlich sein.