Background Noise - Canvas

background-noise-canvas.markdown

Background Noise - Canvas

A Pen by Ibe on CodePen.

License.

index.html

<main role="main" class="main-content">
    <canvas id="noise" class="noise"></canvas>
    
    <h1 class="main-title">
        Background Noise
    </h1>
    <p>
        <a href="https://codepen.io/IbeVanmeenen/pen/awjyPV" class="link" target="_blank">
            Alternative: Background image and CSS Animation
        </a>
    </p>
</main>

script.js

const noise = () => {
    let canvas, ctx;

    let wWidth, wHeight;

    let noiseData = [];
    let frame = 0;

    let loopTimeout;


    // Create Noise
    const createNoise = () => {
        const idata = ctx.createImageData(wWidth, wHeight);
        const buffer32 = new Uint32Array(idata.data.buffer);
        const len = buffer32.length;

        for (let i = 0; i < len; i++) {
            if (Math.random() < 0.5) {
                buffer32[i] = 0xff000000;
            }
        }

        noiseData.push(idata);
    };


    // Play Noise
    const paintNoise = () => {
        if (frame === 9) {
            frame = 0;
        } else {
            frame++;
        }

        ctx.putImageData(noiseData[frame], 0, 0);
    };


    // Loop
    const loop = () => {
        paintNoise(frame);

        loopTimeout = window.setTimeout(() => {
            window.requestAnimationFrame(loop);
        }, (1000 / 25));
    };


    // Setup
    const setup = () => {
        wWidth = window.innerWidth;
        wHeight = window.innerHeight;

        canvas.width = wWidth;
        canvas.height = wHeight;

        for (let i = 0; i < 10; i++) {
            createNoise();
        }

        loop();
    };


    // Reset
    let resizeThrottle;
    const reset = () => {
        window.addEventListener('resize', () => {
            window.clearTimeout(resizeThrottle);

            resizeThrottle = window.setTimeout(() => {
                window.clearTimeout(loopTimeout);
                setup();
            }, 200);
        }, false);
    };


    // Init
    const init = (() => {
        canvas = document.getElementById('noise');
        ctx = canvas.getContext('2d');

        setup();
    })();
};

noise();

style.scss

.main-content {
    position: relative;
    
    display: flex;
    align-items: center;
    justify-content: center;
    flex-flow: column;
    
    height: 100vh;
    
    background: #673ab7;
    color: #fff;
    text-align: center;
}

.noise {
    z-index: 100;
    position: absolute;
    top: 0;
    left: 0;
    
    width: 100%;
    height: 100%;
    
    pointer-events: none;
    opacity: .05;
}

.main-title {
    padding: .3em 1em .25em;
    
    font-weight: 400;
    font-size: 3vw;
    line-height: 1;
    text-transform: uppercase;
    letter-spacing: .15em;
    color: #4c2298;
    
    background: #794fc5;
}

.link {
    display: inline-block;
    padding: 1em 1em;
    
    color: #4c2298;
    line-height: 1;
    background: #794fc5;
    text-decoration: none;
    
    transition: color .3s ease, background .3s ease;
    
    &:hover, &:focus {
        background: #4c2298;
        color: #794fc5;
    }
}

const noise = () => {
  let canvas, ctx;

  let wWidth, wHeight;

  let noiseData = [];
  let frame = 0;

  let loopTimeout;

  // Create Noise
  const createNoise = () => {
    const idata = ctx.createImageData(wWidth, wHeight);
    const buffer32 = new Uint32Array(idata.data.buffer);
    const len = buffer32.length;

    for (let i = 0; i < len; i++) {
      if (Math.random() < 0.5) {
        buffer32[i] = 0xff000000;
      }
    }

    noiseData.push(idata);
    console.log(noiseData);
  };

  // Play Noise
  const paintNoise = () => {
    if (frame === 9) {
      frame = 0;
    } else {
      frame++;
    }

    ctx.putImageData(noiseData[frame], 0, 0);
  };

  // Loop
  const loop = () => {
    paintNoise(frame);

    loopTimeout = window.setTimeout(() => {
      window.requestAnimationFrame(loop);
    }, 1000 / 25);
  };

  // Setup
  const setup = () => {
    noiseData = [];

    wWidth = window.innerWidth;
    wHeight = window.innerHeight;

    canvas.width = wWidth;
    canvas.height = wHeight;

    for (let i = 0; i < 10; i++) {
      createNoise();
    }

    loop();
  };

  // Reset
  let resizeThrottle;
  const reset = () => {
    window.addEventListener(
      "resize",
      () => {
        window.clearTimeout(resizeThrottle);

        resizeThrottle = window.setTimeout(() => {
          window.clearTimeout(loopTimeout);
          setup();
        }, 50);
      },
      false
    );
  };

  // Init
  const init = (() => {
    canvas = document.getElementById("noise");
    ctx = canvas.getContext("2d");

    setup();
    reset();
  })();
};

With resize empty the matrix