Blending Colors Source Code

Blending Colors Tutorial Radial Gradients Introduction Tutorial HTML5 Markup Function createColors() Function particleColors() Function drawColors()

Draw Beautiful Overlapping Colors

This Web page includes the source code to render beautiful blending colors with HTML5.

HTML5 Markup

<body 
 onload="loadColors()"
>

...

<canvas 
 id="cv"
 width="300" 
 height="300" 
>

Your browser doesn't 
support the canvas element.

</canvas>

<button>

 onclick="newColors()" 
 
 title="Tap for New Colors">
 
 Tap for New Colors
 
</button>

...

JavaScript

// Array of color
// channels: 
// red, green, blue
var A_COLORS = [
 255, 0, 0,
 0,255,0,
 0, 0, 255,
 0, 255, 255,
 255,0,255,
 255,255,0,
 255, 0, 255,
 128, 255, 64
];

// 24 channels divided
// by 3 channels each color:
var N_COLOR_LENGTH = new Number(8); 

// Default dimensions.
var nDim = new Number(300);
var nRadiusMax = new Number(64);

// Calculate circle
// circumference once.
var CIRCUM = new Number(Math.PI*2);
         
var canvas, context, eDebug = null;

// color particle array:
var arrayParticles = [];

var N_PARTICLE_LENGTH = new Number(64);

/**
 * Save local variables.
 * Assign event listeners.
 */
function loadColors(){ 

canvas = document.getElementById("cv");

context = canvas.getContext("2d");

eDebug = document.getElementById("eDebug");
 
canvas.addEventListener(
 'click',
 function () {
  newColors();
 },
 false
);

window.addEventListener(
 'resize',
 function () {
  resizeHandler();
 },
 false
);

// color particle
// array.
arrayParticles = new Array(
 N_PARTICLE_LENGTH
);

// Save current
// canvas dimension.
// resizeHandler();
resizeHandler();
 
} 

function newColors(){

 // Some browsers might
 // not implement the
 // HTML5 2D context.
 if (context == null) return;

 createColors();

 drawColors();

}

Function createColors()

/**
 * Create an array
 * of radial gradient
 * 'particles'.
 */
function createColors(){

 var j = Number(0);

 for(var i = 0; i <  N_PARTICLE_LENGTH; i++)
 { 
   arrayParticles[i] = new particleColor(j);
   j++;
   if (j > N_COLOR_LENGTH){
    j = Number(0);
   }
  }
}

Function particleColor()

/**
 * @param {Number} n:
 * index into array of 
 * color channels.
 */
function particleColor(n)
{
 
 // Random X and Y
 // circle coordinates
 // Limited to maximum diameter.
 this.nX = Math.random() * nDim;
 this.nY = Math.random() * nDim;

 // Random radius 
 // limited to maximum radius.
 this.radius = Math.random() * nRadiusMax; 
 
 // inner circle: X,Y coordinate 
 // plus radius.
 // outter cirlce: X,Y coordinate
 // plus radius.
 this.gradient = context.createRadialGradient(
  this.nX, 
  this.nY, 
  0, 
  this.nX, 
  this.nY, 
  this.radius
 );

 // Red, green, and
 // blue color channels
 // from predefined array
 // of colors.
 var nR = A_COLORS[n];
 var nG = A_COLORS[n + 1];
 var nB = A_COLORS[n + 2];
 var  sColor = "rgba("+nR+","+nG+","+nB;
 
 // alpha 1.0 for
 // circle in center.
 this.gradient.addColorStop(
  0,
  sColor+ ",1.0)"
 );

 // Alpha 0.6 at
 // starts at
 // one quarter of
 // the diameter.
 this.gradient.addColorStop(
  0.25,sColor+ ",0.6)"
 ); 

 // Alpha 0 at
 // circle's perimeter.
 this.gradient.addColorStop(
  1,sColor+ ",0.0)"
 ); 

 return this;
}

Function drawColors()

function drawColors()
{
 context.globalCompositeOperation = "source-over";
 
 context.fillStyle = "black"; 
 
 context.fillRect(
  0,
  0,
  nDim,
  nDim
 ); 

 // Render combination
 // of overlapping
 // brightest color channesl.
 context.globalCompositeOperation = "lighter";
 
 for (var i = 0; i < N_PARTICLE_LENGTH; i++){
  
  var p = arrayParticles[i];
  
  context.beginPath(); 
  
  context.fillStyle = p.gradient;
  
  context.arc(
   p.nX, 
   p.nY, 
   p.radius, 
   0, 
   CIRCUM
  );
  
  context.fill();    
 }   
}

Function resizeHandler()

Style sheets with media queries adjust canvas width based on orientation and screen width. Function resizeHandler() adjusts canvas height and saves the new dimension to number, nDim.

function resizeHandler(){
 nDim = canvas.clientWidth;
 canvas.width = nDim;
 canvas.height = nDim;
 newColors();
}

Summary

See the Beautiful Blending Colors example and Blending Colors Tutorial.

Copyright © 2015 Seven Thunder Software. All Rights Reserved.