Global Composite Options: JavaScript Source

Alpha, Composite & Animate Combine Visual Effects Static on Black Global Composite Operations

Introduction

This page includes JavaScript source code for interactive global composite operations with alpha transparency selections. Selections apply to a set of radial gradient circles. Use the code as it is, or consider applying images, SVG graphics, or other procedural shapes.

Supporting JavaScript files include rg-control.js and rg-model.js.

JavaScript Source Code

var sMenuComposite = "source-over";

var A_GRADS = [
"rgba(128, 0, 255, 1.0)",
"rgba(128, 128, 255, 1.0)",
"rgba(0, 255, 255, 1.0)",
"rgba(128, 64, 255, 1.0)",
"rgba(128, 255, 64, 1.0)",
"rgba(64, 64, 255, 1.0)",
"rgba(128, 255, 32, 1.0)",
"rgba(255, 32, 64, 1.0)","
rgba(32, 64, 128, 1.0)",
];

var eGraphic = null;
var eAlpha = null;
var nAlpha = Number(0.6);
var aAudio = null;

function init(){

 window.addEventListener
 (
  'resize',
  function (e) {
   resizeHandler(e);
  },
  false
 ); 
 
 N_RAD = new Number(64);
 
 N_OFFSET = new Number(150);
 
 eAlpha = document.getElementById('eAlpha');
 
 aAudio = document.getElementById('aAudio');	
 
 resizeHandler(null);
 
 N_PARTICLE_LENGTH = new Number(60);
 
}

function reset(){

 if(eAlpha != null){
 
  nAlpha = Number(eAlpha.value);
  
  if(isNaN(nAlpha)){
  
   eDebug.innerHTML = "Please enter a value between 1.0 and 0.1 above. You entered <em>"+eAlpha.value+"</em>.";
    
   nAlpha = Number(1.0);    

  else {
  
   eDebug.innerHTML = "Enter value between 0.0 and 1.0, then select an option from the menu above.";
	
  }
 }
 
 context.globalAlpha = nAlpha;
 
 nIdx = new Number(0);
 	
 context.globalCompositeOperation = "source-over";
 
 context.clearRect(0,0,N_DIM,N_DIM);
 	
}

function particle(n)
{	
 this.nX = Math.random() * N_OFFSET + N_DIM_Q;
 
 this.nY = Math.random() * N_OFFSET + N_DIM_Q;
 
 var nIdxColor = n % 9;	
	
 this.radius = Math.random() * N_RAD;	
	
 //colors
 this.gradient = context.createRadialGradient(
  this.nX, 
  this.nY, 
  0, 
  this.nX, 
  this.nY, 
  this.radius
 );
 
 this.gradient.addColorStop(
  1, 
  A_GRADS[nIdxColor]
 );
 
 return this;
}

function playAnim()
{	
 if (nIdx == N_PARTICLE_LENGTH){
  stop();
  return;
 }
	
 if (nIdx % 2 == 0){
 
  context.globalCompositeOperation = sMenuComposite;
  
 }	
 		
 else {
 
  context.globalCompositeOperation = "source-over";
  
 }	
 var p = arrayParticles[nIdx];
 
 context.beginPath();	
 
 context.fillStyle = p.gradient;
 
 context.arc(
  p.nX, 
  p.nY, 
  p.radius, 
  0, 
  CIRCUM
 );
 
 context.fill();	
 			
 nIdx++;	
 	
}

function getMenuComposite() {
	
 sMenuComposite = document.getElementById("n").value;	
 
 stop();
 
 reset();
 
 aAudio.play();	
 
 timer = setInterval(playAnim, N_TIME);
 			
}

/**
 * function resizeHandler()
 * Obtains scroll
 * and resize
 * coordinates. 
 */
function resizeHandler(e){

 getDimensions();
 
 if(context != null && arrayParticles != null 
    && arrayParticles.length > 0)
 {
 
   resetParticles();
   
   stop();
   
   nIdx = 0;
   
   playAnim(); 
   
 }
}

function getDimensions(){

 if(eGraphic == null){
 
  eGraphic = document.getElementById('eGraphic');
  
 }
 
 N_DIM = eGraphic.clientWidth;
 
 if(canvas == null){
 
	canvas = document.getElementById('cv');
	
 }
 
 canvas.width = N_DIM;
 
 canvas.height = N_DIM;
 
 canvas.style.width= N_DIM+"px";
 
 canvas.style.height = N_DIM+"px";
 
 N_DIM_Q = N_DIM/4;
 
 N_OFFSET = N_DIM/2;
 
 N_RAD = N_DIM * 0.213;
 
}

function resetParticles(){

 arrayParticles = new Array();
 
 for(var i = 0; i < N_PARTICLE_LENGTH; i++)
 {  
 
  arrayParticles.push(new particle(i));	
  		
 }	
}

Summary

This page included the source code which applies global composite operations and alpha to a set of radial gradient circles. Use the code as it is, or consider applying different graphics such as rectangles, SVG graphics, and images.

Supporting JavaScript files include rg-control.js and rg-model.js. Have fun and love learning!

Web Development Company

Seven Thunder Software's Web programming skills include HTML5, CSS3, JavaScript, WebGL, GLSL and some PHP with MySQL and Python 3. Web design skills include Web graphics with Photoshop, animation with After Effects and 3ds Max.

Tags