cbanowsky/gradient-bubbles-on-canvas.markdown

## gradient-bubbles-on-canvas.markdown

      
    Raw
  

              gradient-bubbles-on-canvas.markdown
            
          
    Gradient Bubbles on Canvas

A Pen by Cameron Banowsky on CodePen.
License.

  
## index.html
<canvas>
</canvas>
<body>
  <h2>hi</h2>
</body>

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

function rand(max,min) {
  min = min || 0;
  return Math.floor(Math.random()*(max-min)) + min;
}

function gradient(from,to) {
  var grd = ctx.createLinearGradient(0, 0, canvas.width, canvas.height);
  grd.addColorStop(0, from);
  grd.addColorStop(1, to);
  return grd;
}

var gradients = [
  gradient('rgb(142,214,255)','rgb(179,76,0)')
];

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: x,
        y: y,
        start: tm,
        vx: Math.random()*maxVelocity*2 - maxVelocity,
        vy: Math.random()*maxVelocity*2 - maxVelocity,
        g: rand(gradients.length),
        r: rand(200,40)*3,
        speed: rand(50,5)*4
    });
  }
}

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,gradients[0]);
      if ( erase )
        drops[i] = null;
    }
  });

  requestAnimationFrame(draw);
};


function drawDrop(drop,tm,ctx,grd) {
  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.globalAlpha = Math.max(0,(1-(r/drop.r)))*.8;
  ctx.strokeStyle = grd;
  ctx.lineWidth = 6;
  ctx.beginPath();
  ctx.arc((drop.x/width)*canvas.width,(drop.y/height)*canvas.height,r,0,2*Math.PI,false);
  ctx.stroke();
  ctx.lineWidth = 0;
  ctx.fill();
}


start();

function start() {

  for ( var i=-10000; i<0; i+=100 )
    updateDrops(i);

  requestAnimationFrame(draw);

  $("canvas").click(function(ev) {
    addDrop = {
      x: Math.floor((ev.clientX/canvas.width)*width),
      y: Math.floor((ev.clientY/canvas.height)*height)
    };
  });
}

## scripts
<script src="//cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/underscore.js/1.5.1/underscore-min.js"></script>

## style.less
body {
  background: black;
}

div {
  overflow:hidden;
  //background:black;
  width: 800px;
  height: 300px;

  canvas {
    -webkit-filter: blur(3px);
  }
}
	var canvas = $("canvas")[0];
	var ctx = canvas.getContext('2d');
	var out = $(".out");
	var dropCount = 30;
	var drops = [];
	var nextAdd = -1000000;
	var maxVelocity = .1;
	var width = 1050;
	var height = 700;
	var addDrop = null;

	function rand(max,min) {
	min = min \|\| 0;
	return Math.floor(Math.random()*(max-min)) + min;
	}

	function gradient(from,to) {
	var grd = ctx.createLinearGradient(0, 0, canvas.width, canvas.height);
	grd.addColorStop(0, from);
	grd.addColorStop(1, to);
	return grd;
	}

	var gradients = [
	gradient('rgb(142,214,255)','rgb(179,76,0)')
	];

	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: x,
	y: y,
	start: tm,
	vx: Math.random()maxVelocity2 - maxVelocity,
	vy: Math.random()maxVelocity2 - maxVelocity,
	g: rand(gradients.length),
	r: rand(200,40)*3,
	speed: rand(50,5)*4
	});
	}
	}

	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,gradients[0]);
	if ( erase )
	drops[i] = null;
	}
	});

	requestAnimationFrame(draw);
	};


	function drawDrop(drop,tm,ctx,grd) {
	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.globalAlpha = Math.max(0,(1-(r/drop.r)))*.8;
	ctx.strokeStyle = grd;
	ctx.lineWidth = 6;
	ctx.beginPath();
	ctx.arc((drop.x/width)canvas.width,(drop.y/height)canvas.height,r,0,2*Math.PI,false);
	ctx.stroke();
	ctx.lineWidth = 0;
	ctx.fill();
	}


	start();

	function start() {

	for ( var i=-10000; i<0; i+=100 )
	updateDrops(i);

	requestAnimationFrame(draw);

	$("canvas").click(function(ev) {
	addDrop = {
	x: Math.floor((ev.clientX/canvas.width)*width),
	y: Math.floor((ev.clientY/canvas.height)*height)
	};
	});
	}
	<script src="//cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
	<script src="https://cdnjs.cloudflare.com/ajax/libs/underscore.js/1.5.1/underscore-min.js"></script>
	body {
	background: black;
	}

	div {
	overflow:hidden;
	//background:black;
	width: 800px;
	height: 300px;

	canvas {
	-webkit-filter: blur(3px);
	}
	}