womb3-simplex.mjs

The library for creating creepy sticky background

Example

<canvas id="wrap"></canvas>

<svg style="position: absolute">
  <defs>
    <filter id="blob">
      <feGaussianBlur in="SourceGraphic" stdDeviation="12" result="blur"></feGaussianBlur>
      <feColorMatrix in="blur" mode="matrix" values="1 0 0 0 0  0 1 0 0 0  0 0 1 0 0  0 0 0 19 -9" result="blob"></feColorMatrix>
    </filter>
  </defs>
</svg>

import("/js/modules/womb3-simplex.mjs").then((module) => {
  // Initializing the instance
  const womb = new module.womb(document.getElementById("wrap"));
  womb.init();
  womb.generate();
        
  // Initializing the process registers
  let offset = 0;
  let speed = 0.01;

  // Starting the process
  setInterval(function() {
    womb.dump();
    womb.generate(offset += speed);
  }, 30);

  // Initializing the resizing event processor
  window.addEventListener('resize', function(e) {
    womb.init();
    womb.dump();
    womb.generate(offset += speed);
  }, true);
});

#wrap {
  background-color: black; /* can be alpha 50% and etc */
  filter: url("#blob") contrast(var(--contrast, 30));
  /* mix-blend-mode: ... as you wish */
}

Installation

cd simplex-noise.js
./build.sh

Demonstration

CodePen