LOADING...

Preview

Pen ID
Unlock Campus Themeforest adv

 

Code
CSS
canvas {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 100%;
  -webkit-transform: translate(-50%, -50%);
          transform: translate(-50%, -50%);
}

body {
  background: black;
}
JS
const canvas = document.getElementById("world");
const c = canvas.getContext("2d");
const imgSrc =
  "https://s3-us-west-2.amazonaws.com/s.cdpn.io/218538/nat-image.jpg";
const particles = [];
const w = 1000;
const h = 666;

canvas.width = w;
canvas.height = h;

const imageData = c.getImageData(0, 0, w, h),
  data = imageData.data,
  len = data.length;

const getIndex = (y, x, data) => {
  return y * 4 * data.width + x * 4;
};

const pixelate = img => {
  const imageData = c.getImageData(0, 0, w, h),
    data = imageData.data,
    len = data.length;

  c.clearRect(0, 0, w, h);
  a = c.createImageData( w, h );

  for (var y = 0, y2 = imageData.height; y < y2; y++) {
    for (var x = 0, x2 = imageData.width; x < x2; x++) {
      const index = getIndex(y, x, imageData);
      let r = imageData.data[index];
      let g = imageData.data[index + 1];
      let b = imageData.data[index + 2];
      const c = parseInt((r + g + b) / 3 > 128 ? 255 : 0);
      const errR = r - c;
      newR = r + errR * 1/4;
     
      
      var particle = {
        x: x,
        y: y,
        
        color: `rgb(${newR},${c},${c})`
      };
      particles.push(particle);
    }
  }
 

 drawParticles();
};

const drawImage = () => {
  let img = new Image();
  img.crossOrigin = "anonymous";
  img.onload = function() {
    c.drawImage(img, 0, 0, 500, 333);
    pixelate(img);
    
  };
  img.src = imgSrc;
};

const drawParticles = () => {
  for (var i = 0, j = particles.length; i < j; i++) {
    var particle = particles[i];
    c.fillStyle = particle.color;
    c.fillRect(particle.x * 2, particle.y * 2, 2, 2);
  }
};

  
const init = () => {
  drawImage();
  
};


init();
Term
Sat, 04/14/2018 - 20:43

Related Codes

Pen ID
Pen ID
Pen ID
Square Adv