"Дрожащее небо" - пример html js css

• HTML код


• CSS код
• JS код
• Результат кода

<div class="wrap">

  <canvas id="world" width="292" height="400"></canvas>



</div>

canvas {

  position: absolute;

  height: 100%;

}



.wrap {

  height: 100vh;

  position: relative;

  z-index: 1;

  display: flex;

  align-items: center;

  justify-content: center;

}



body {

  background: black;

}

const canvas = document.getElementById("world");

const c = canvas.getContext("2d");

const imgSrc = "https://assets.codepen.io/218538/sky.jpeg";

const particles = [];

const w = 584;

const h = 800;



canvas.width = w;

canvas.height = h;



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);



  for (var y = 0, y2 = imageData.height; y < y2; y += 3) {if (window.CP.shouldStopExecution(0)) break;

    for (var x = 0, x2 = imageData.width; x < x2; x += 3) {if (window.CP.shouldStopExecution(1)) break;

      const index = getIndex(y, x, imageData);

      const r = imageData.data[index];

      const g = imageData.data[index + 1];

      const b = imageData.data[index + 2];

      const c = parseInt((r + g + b) / 3 > 128 ? 255 : 0);

      const errR = r - c;

      const errB = b - c;

      const errG = b - c;

      newR = r + errR * 1 / 4;

      newB = b + errB * 1 / 4;

      newG = g + errG * 1 / 4;



      var particle = {

        x: x,

        y: y,

        color: `rgb(${newR},${newG},${newB})` };



      particles.push(particle);

    }window.CP.exitedLoop(1);

  }window.CP.exitedLoop(0);



  drawParticles();

};



const drawImage = () => {

  let img = new Image();

  img.crossOrigin = "anonymous";

  img.onload = function () {

    c.drawImage(img, 0, 0, 292, 400);

    pixelate(img);

  };

  img.src = imgSrc;

};



const drawParticles = () => {

  for (var i = 0, j = particles.length; i < j; i += 2) {if (window.CP.shouldStopExecution(2)) break;

    var particle = particles[i];

    c.fillStyle = particle.color;

    c.fillRect(particle.x * 2, particle.y * 2, 4, 4);

  }window.CP.exitedLoop(2);

};



drawImage();

//# sourceURL=pen.js