Global Composite Options: JavaScript Source

Composite Operations with Alpha Example Introduction JavaScript Source Code Summary

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. Web design skills include Web graphics with Photoshop, animation with After Effects and 3ds Max.

Tags
Website developers, Website developer, freelance Web developer, webdev, create a Website, Web creator, developer Website, new Website design, Webpage development, Website development company, Web development, Web projects, design a Website, html 5, Web GL, js, JavaScript code, JavaScripts, JavaScript program, css,
Copyright © 2019 Seven Thunder Software. All Rights Reserved.