ryaninhust/Blurred-bubbles.markdown

## Blurred-bubbles.markdown

      
    Raw
  

              Blurred-bubbles.markdown
            
          
    Blurred bubbles

A script that creates bubbles which are blurred inside a canvas
A Pen by Linus Petren on CodePen.
License.

  
## index.html
<html>
	<head>
	</head>
	<body>
		<canvas id="bubbles"></canvas>
	</body>
</html>

## script.js
var canvas = document.getElementById('bubbles'),
    context,
    colors = new Array('#bf956f', '#bf956f', '#b96b6b', '#6c6164', '#31c3d9', '#f9ca6b'),
    directions = new Array('up', 'down'),
    background,
    windowWidth = window.innerWidth,
    windowHeight = window.innerHeight,
    bubbles = new Array();

canvas.style.width= windowWidth + "px";
canvas.style.height= windowHeight + "px";

if(canvas.getContext('2d')){
  context = canvas.getContext('2d');

  canvas.width = windowWidth;
  canvas.height = windowHeight;

  for(var i = 0; i < 20; i++){
    setBubble(true);
  }
}

function setBubble(init){
  var bubble = {
    centerX : Math.floor((Math.random() * (windowWidth - 0) + 0)),
    centerY : Math.floor((Math.random() * (windowHeight - 0) + 0)),
    radius : Math.floor((Math.random() * (400 - 10) + 10)),
    color : colors[Math.floor(Math.random() * (6))],
    speed : (Math.random() * (2)) / 300
  }
  if(init)
    bubble.direction = directions[Math.floor(Math.random() * (2))];
  else
    bubble.direction = 'up';

  if(bubble.direction == 'up')
    bubble.alpha = 0.0;
  else
    bubble.alpha = 0.9;

  bubbles.push(bubble);
}

window.requestAnimFrame = (function() {
  return window.requestAnimationFrame || window.webkitRequestAnimationFrame || window.mozRequestAnimationFrame || window.oRequestAnimationFrame || window.msRequestAnimationFrame
})();


function animate() {
  requestAnimFrame(animate);
  draw();
}

function draw() {
  context.clearRect(0,0,windowWidth,windowHeight)
  context.save();
  for(var i = 0; i < bubbles.length; i++){
    context.globalAlpha = bubbles[i].alpha;
    context.beginPath();
    context.arc(bubbles[i].centerX, bubbles[i].centerY, bubbles[i].radius, 0, 2 * Math.PI, false);
    context.fillStyle = bubbles[i].color;
    context.fill();

    if(bubbles[i].direction == 'up'){
      bubbles[i].alpha += bubbles[i].speed;
      if(bubbles[i].alpha >= 0.9)
        bubbles[i].direction = 'down'
        }
    else{
      bubbles[i].alpha -= bubbles[i].speed;
      if(bubbles[i].alpha <= 0){
        bubbles.splice(i, 1);
        setBubble(false)
      }
    }
  }
  context.restore();
}
animate();

window.onresize = function(event) {
  windowWidth = window.innerWidth;
  windowHeight = window.innerHeight;
  canvas.style.width= windowWidth + "px";
  canvas.style.height= windowHeight + "px";
  canvas.width = windowWidth;
  canvas.height = windowHeight;
}

## style.css
body{
  width: 0px;
  padding: 0px;
  background: #f6dfb0;
}
#bubbles{
  position: absolute;
  left: 0px;
  top: 0px;
  -webkit-filter: blur(30px);
  -moz-filter: blur(10px);
  -o-filter: blur(10px);
  -ms-filter: blur(10px);
  filter: blur(10px);
}
	<html>
	<head>
	</head>
	<body>
	<canvas id="bubbles"></canvas>
	</body>
	</html>
	var canvas = document.getElementById('bubbles'),
	context,
	colors = new Array('#bf956f', '#bf956f', '#b96b6b', '#6c6164', '#31c3d9', '#f9ca6b'),
	directions = new Array('up', 'down'),
	background,
	windowWidth = window.innerWidth,
	windowHeight = window.innerHeight,
	bubbles = new Array();

	canvas.style.width= windowWidth + "px";
	canvas.style.height= windowHeight + "px";

	if(canvas.getContext('2d')){
	context = canvas.getContext('2d');

	canvas.width = windowWidth;
	canvas.height = windowHeight;

	for(var i = 0; i < 20; i++){
	setBubble(true);
	}
	}

	function setBubble(init){
	var bubble = {
	centerX : Math.floor((Math.random() * (windowWidth - 0) + 0)),
	centerY : Math.floor((Math.random() * (windowHeight - 0) + 0)),
	radius : Math.floor((Math.random() * (400 - 10) + 10)),
	color : colors[Math.floor(Math.random() * (6))],
	speed : (Math.random() * (2)) / 300
	}
	if(init)
	bubble.direction = directions[Math.floor(Math.random() * (2))];
	else
	bubble.direction = 'up';

	if(bubble.direction == 'up')
	bubble.alpha = 0.0;
	else
	bubble.alpha = 0.9;

	bubbles.push(bubble);
	}

	window.requestAnimFrame = (function() {
	return window.requestAnimationFrame \|\| window.webkitRequestAnimationFrame \|\| window.mozRequestAnimationFrame \|\| window.oRequestAnimationFrame \|\| window.msRequestAnimationFrame
	})();


	function animate() {
	requestAnimFrame(animate);
	draw();
	}

	function draw() {
	context.clearRect(0,0,windowWidth,windowHeight)
	context.save();
	for(var i = 0; i < bubbles.length; i++){
	context.globalAlpha = bubbles[i].alpha;
	context.beginPath();
	context.arc(bubbles[i].centerX, bubbles[i].centerY, bubbles[i].radius, 0, 2 * Math.PI, false);
	context.fillStyle = bubbles[i].color;
	context.fill();

	if(bubbles[i].direction == 'up'){
	bubbles[i].alpha += bubbles[i].speed;
	if(bubbles[i].alpha >= 0.9)
	bubbles[i].direction = 'down'
	}
	else{
	bubbles[i].alpha -= bubbles[i].speed;
	if(bubbles[i].alpha <= 0){
	bubbles.splice(i, 1);
	setBubble(false)
	}
	}
	}
	context.restore();
	}
	animate();

	window.onresize = function(event) {
	windowWidth = window.innerWidth;
	windowHeight = window.innerHeight;
	canvas.style.width= windowWidth + "px";
	canvas.style.height= windowHeight + "px";
	canvas.width = windowWidth;
	canvas.height = windowHeight;
	}
	body{
	width: 0px;
	padding: 0px;
	background: #f6dfb0;
	}
	#bubbles{
	position: absolute;
	left: 0px;
	top: 0px;
	-webkit-filter: blur(30px);
	-moz-filter: blur(10px);
	-o-filter: blur(10px);
	-ms-filter: blur(10px);
	filter: blur(10px);
	}