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!

Tags

Web developer, Web design, Website design, Web design company, Web programming Web development company, Website developers,webdev, how to design a Website, create a Website, Web application development, freelance Web developer, freelance Web designer, Web creator, developer Website, new Website design, Webpage development, Weebsite design company JavaScript, html5, Web development, Web programming, WebGL programming, Web projects, html 5, Web GL, Web design, Website developer, Web programming, design a Website, js, JavaScript code,JavaScripts, JavaScript help, css3, JavaScript program, css,
Learn 3D Programming Learn 3D Programming
Copyright © 2015 Seven Thunder Software. All Rights Reserved.