EffectHub.com: your best source for gaming

Recommendation

More Effects...

'use strict';

var canvas = document.getElementById('c'),
    m_canvas = document.createElement('canvas');

canvas.width = window.innerWidth;
canvas.height = window.innerHeight;

m_canvas.width = window.innerWidth;
m_canvas.height = window.innerHeight;

var ctx = canvas.getContext('2d'),
    m_ctx = m_canvas.getContext('2d');

// let colors = ["#866FED", "#72B6EC", "#ED7A6F", "#86C49A", "#F1B8CB"];
// let colorIndex = Math.floor(Math.random() * colors.length);
// document.documentElement.style.backgroundColor = colors[colorIndex];

var circles = [],
    noOfCircles = 100;

for (var i = 0; i < noOfCircles; i++) {
  var circle = {
    x: Math.random() * canvas.offsetWidth,
    y: Math.random() * canvas.offsetHeight,
    radius: Math.random() * 1 + 1,
    speed: Math.random() * 20
  };

circles.push(circle);
}

function renderBubs() {
  m_ctx.clearRect(0, 0, canvas.offsetWidth, canvas.offsetHeight);
  // m_ctx.fillStyle = colorIndex > 1 ? colors[colorIndex - 1] : colors[colorIndex + 1];
  m_ctx.fillStyle = 'white';
  m_ctx.beginPath();

for (var i = 0; i < circles.length; i++) {
    var circ = circles[i];
    m_ctx.arc(circ.x, circ.y, circ.radius, 0, Math.PI * 2, true);
    circ.x += Math.random() * circ.speed;
    circ.y += Math.random() * circ.speed;

if (circ.x - circ.radius * 2 > canvas.offsetWidth) circ.x = 0 - circ.radius * 2;
    if (circ.y - circ.radius * 2 > canvas.offsetHeight) circ.y = 0 - circ.radius * 2;

if (i + 1 != circles.length) m_ctx.moveTo(circles[i + 1].x, circles[i + 1].y);
  }
  m_ctx.fill();
  requestAnimationFrame(renderBubs);
}

function render() {
  ctx.clearRect(0, 0, canvas.offsetWidth, canvas.offsetHeight);
  ctx.drawImage(m_canvas, 0, 0);
  requestAnimationFrame(render);
}

renderBubs();
render();

CSS

HTML

Recommendation

Join Effecthub.com