A Pen by Aran Mulholland.

Gradient-Bubbles-on-Canvas.markdown

Gradient Bubbles on Canvas

A Pen by Aran Mulholland on CodePen.

License.

index.html

<canvas width="1050" height="700"></canvas>

Radiating-circles.markdown

Radiating circles

A Pen by Aran Mulholland on CodePen.

License.

script.js

var canvas = $("canvas")[0];
var ctx = canvas.getContext('2d');
var out = $(".out");
var dropCount = 0;
var drops = [];
var nextAdd = -1000000;
var maxVelocity = .1;
var width = 1050;
var height = 700;
var addDrop = null;

// Function: Convert HSL to RGB
function hsl2rgb(H, S, V) {
  var R,G,B,var_h, var_i, var_1, var_2, var_3, var_r,var_g,var_b;
  
	if ( S == 0 )	{
		R = V;
		G = V;
		B = V;
	}
	else	{
		var_h = H * 6;
		if ( var_h >= 6 ) var_h = 0; //H must be < 1
		var_i = var_h; 
		var_1 = V * ( 1 - S );
		var_2 = V * ( 1 - S * ( var_h - var_i ) );
		var_3 = V * ( 1 - S * ( 1 - ( var_h - var_i ) ) );

		if ( var_i == 0 ) { var_r = V ; var_g = var_3 ; var_b = var_1; }
		else if ( var_i == 1 ) { var_r = var_2 ; var_g = V ; var_b = var_1; }
		else if ( var_i == 2 ) { var_r = var_1 ; var_g = V ; var_b = var_3; }
		else if ( var_i == 3 ) { var_r = var_1 ; var_g = var_2 ; var_b = V; }
		else if ( var_i == 4 ) { var_r = var_3 ; var_g = var_1 ; var_b = V; }
		else { var_r = V ; var_g = var_1 ; var_b = var_2; }

		R = Math.floor(var_r * 255);
		G = Math.floor(var_g * 255);
		B = Math.floor(var_b * 255);
	}
  console.log("rgb("+R+","+G+","+B+")");
  return "rgb("+R+","+G+","+B+")";
}

function updateDrops(tm) {
  if ( !addDrop && (tm < nextAdd) )
    return;
  nextAdd = tm+400;
  
  if ( !tm )
    addDrop = null;
  
  // remove the nulls
  drops = _.compact(drops);
  if ( drops.length < dropCount || addDrop ) {
    var x = !addDrop ? rand(width) : addDrop.x;
    var y = !addDrop ? rand(height) : addDrop.y;
    addDrop = null;
    
    drops.push({
        x: 525,
        y: 350,
        start: tm,
        vx: 0.,//maxVelocity*2 - maxVelocity,
        vy: 0.,//maxVelocity*2 - maxVelocity,
        r: 10000,
        speed: 100,
        colour: hsl2rgb(x, 1, y)
    });
  }
}

function draw(tm) {
  canvas.width = $(window).width();
  canvas.height = $(window).height();

  // clear the field
  ctx.globalAlpha = 1;
  ctx.fillStyle = 'black';
  ctx.fillRect(0,0,canvas.width,canvas.height);
  
  // update the drops
  updateDrops(tm);

  // draw the drops
  _.each(drops,function(drop,i) {
    if ( drop ) {
      var erase = drawDrop(drop,tm,ctx);
      if ( erase )
        drops[i] = null;
    }
  });

  requestAnimationFrame(draw);
};
  

function drawDrop(drop,tm,ctx) {
  var r = ((tm-drop.start)/drop.speed);
  if ( r > (drop.r*1.5) )
    return true;
  
  drop.x += drop.vx;
  drop.y += drop.vy;
  if ( drop.x < 0 || drop.x > width )
    drop.vx = -drop.vx;
  if ( drop.y < 0 || drop.y > height )
    drop.vy = -drop.vy;

  ctx.beginPath();
  ctx.arc((drop.x/width)*canvas.width,(drop.y/height)*canvas.height,r,0,2*Math.PI,false);
  ctx.lineWidth = 0;
  ctx.strokeStyle = drop.colour;
  ctx.stroke();
  ctx.fillStyle = drop.colour;
  ctx.fill(); 
}


start();

function start() {

  requestAnimationFrame(draw);

  $("canvas").click(function(ev) {
    console.log("x: " + ev.clientX/canvas.width + "\n y: " + ev.clientY/canvas.height);
    addDrop = {
      x: ev.clientX/canvas.width,
      y: ev.clientY/canvas.height
    };
  });
}

style.less

body {
  background: black;
}

div {
  overflow:hidden;
  //background:black;
  width: 800px;
  height: 300px;
  
  canvas {
    //-webkit-filter: blur(3px);
  }
}