Canvas experiments

by Yaroslav Samardak

HTML

<canvas id='can'></canvas>

CSS

body {
  margin: 0;
  height: 100vh;
}

#can {
  width: 100%;
  height: 100%;
}

JavaScript

function gBlur(blur, ctx, canvas) {
  let sum = 0;
  let delta = 5;
  let alpha_left = 1 / (2 * Math.PI * delta * delta);
  let step = blur < 3 ? 1 : 2;
  for (let y = -blur; y <= blur; y += step) {
    for (let x = -blur; x <= blur; x += step) {
      let weight = alpha_left * Math.exp(-(x * x + y * y) / (2 * delta * delta));
      sum += weight;
    }
  }
  let count = 0;
  for (let y = -blur; y <= blur; y += step) {
    for (let x = -blur; x <= blur; x += step) {
      count++;
      ctx.globalAlpha = alpha_left * Math.exp(-(x * x + y * y) / (2 * delta * delta)) / sum * blur;
      ctx.drawImage(canvas,x,y);
    }
  }
  ctx.globalAlpha = 1;
}

(function() {
  const canvas = document.getElementById('can')
  const c = canvas.getContext('2d')
  let cx, cy, dpr = window.devicePixelRatio;
  let s = 250 * dpr, p = dpr * 15, pp = dpr * 45, sc = 3;
  let req, animTime = 6000;
  
  const dr = (x, y, delta) => {
    const d = 128
    c.fillStyle = 'rgba(0, ' + Math.floor(255 - d * x / sc) + ', ' + 
                           Math.floor(255 - d * y / sc) + ', 0.7)';

		const o = p + pp * delta
    const ss = s * ((o * delta) / s) + s / 4
		const w = (sc * (ss + o) - o) / 2
    c.fillRect(-w + x * (ss + o), -w + y * (ss + o), ss, ss)
  }

  window.addEventListener('resize', resizeCanvas, false);

	let i = 0;
  function draw() {
    c.fillStyle = 'rgba(255, 255, 255, 0.03)'
    c.fillRect(0, 0, canvas.width, canvas.height)
    c.translate((0.5 - Math.random()) / 1.3, (0.5 - Math.random()) / 1.3)
    
    c.save()
    c.translate(cx, cy)
    dt = Math.abs((animTime / 2 - (performance.now() % animTime)) / animTime)
    
    c.rotate((dt * 360) * Math.PI / 180)
    for (let x = 0; x < sc; x++) {
      for (let y = 0; y < sc; y++) {
        dr(x, y, dt)
      }
    }
    
    c.restore()
    
    req = window.requestAnimationFrame(draw)
  }
  
  function resizeCanvas() {
  	window.cancelAnimationFrame(req);
    canvas.width = window.innerWidth * dpr;
    canvas.height =...