EffectHub.com: your best source for gaming

Recommendation

More Effects...

'use strict';

var width = undefined,
    height = undefined;
var pixels = [];
var coloredPixels = [];
var colors = ['#540045', '#C60052', '#FF714B', '#EAFF87', '#ACFFE9'];
var currentPixel = 0;
var mousePosition = { x: window.innerWidth / 2, y: window.innerHeight / 2 };

var canvas = document.getElementById('canvas');
var ctx = canvas.getContext('2d');

var drawGrid = function drawGrid() {
  ctx.clearRect(0, 0, width, height);

for (var i = 0, l = pixels.length; i < l; i++) {
    pixels[i][4] = 0;
  }

for (var i = 0, l = coloredPixels.length; i < l; i++) {
    var pix = Math.floor(coloredPixels[i].y / 10) * (Math.floor(width / 10) + 1) + Math.floor(coloredPixels[i].x / 10);
    if (pixels[pix]) {
      pixels[pix][4] = coloredPixels[i].color;
      pixels[pix][5] = coloredPixels[i].alpha;
    }

if (coloredPixels[i].alpha > 0) coloredPixels[i].alpha -= 0.008;
    if (coloredPixels[i].alpha < 0) coloredPixels[i].alpha = 0;
    coloredPixels[i].x += coloredPixels[i].vx;
    coloredPixels[i].y += coloredPixels[i].vy;
  }

for (var i = 0, l = pixels.length; i < l; i++) {
    ctx.globalAlpha = 1;
    ctx.fillStyle = '#222';
    ctx.fillRect(pixels[i][0], pixels[i][1], pixels[i][2], pixels[i][3]);
    ctx.globalAlpha = pixels[i][5];
    ctx.fillStyle = pixels[i][4];
    ctx.fillRect(pixels[i][0], pixels[i][1], pixels[i][2], pixels[i][3]);
  }
};

var draw = function draw() {
  launchPixel();
  launchPixel();
  drawGrid();
  requestAnimationFrame(draw);
};

var launchPixel = function launchPixel() {
  coloredPixels[currentPixel].x = mousePosition.x;
  coloredPixels[currentPixel].y = mousePosition.y;
  coloredPixels[currentPixel].alpha = 1;

currentPixel++;
  if (currentPixel > 299) currentPixel = 0;
};

resize();
initColoredPixels();
draw();

window.addEventListener('resize', resize);
window.addEventListener('mousemove', function (e) {
  mousePosition.x = e.pageX;
  mousePosition.y = e.pageY;
});

var touchMove = function touchMove(e) {
  e.preventDefault();
  mousePosition.x = e.touches[0].pageX;
  mousePosition.y = e.touches[0].pageY;
};

document.addEventListener('touchstart', touchMove);
document.addEventListener('touchmove', touchMove);

CSS

HTML

Recommendation

Join Effecthub.com