<main>
	<section>
		<figure>
      <canvas id="target">
        <img id="source-from" src="https://images.unsplash.com/photo-1612958859485-b6812253f59e?crop=entropy&cs=srgb&fm=jpg&ixid=MXwxNDU4OXwwfDF8cmFuZG9tfHx8fHx8fHw&ixlib=rb-1.2.1&q=85" alt=""/>
				<img id="source-to" data-src="https://images.unsplash.com/photo-1614357932292-a38393b966a3?crop=entropy&cs=srgb&fm=jpg&ixid=MXwxNDU4OXwwfDF8cmFuZG9tfHx8fHx8fHw&ixlib=rb-1.2.1&q=85" alt=""/>
			</canvas>
		<figure>
	</section>
</main>

* {
  margin: 0;
}

import * as kampos from "https://cdn.skypack.dev/kampos@0.5.1";

function loadImage (src) {
   return new Promise(resolve => {
       const img = new Image();

       img.onload = function () {
           resolve(this);
       };

       img.src = src;
   });
}
// get the image URLs
const imageFromSrc = document.querySelector('#source-from').src;
const imageToSrc = document.querySelector('#source-to').dataset.src;
// load images
const promisedImages = [
    loadImage(imageFromSrc),
    loadImage(imageToSrc)
];

const turbulence = kampos.effects.turbulence({ noise: kampos.noise.perlinNoise });

const WIDTH = 854;
const HEIGHT = 480;
const CELL_FACTOR = 4;
const AMPLITUDE = CELL_FACTOR / WIDTH;

turbulence.frequency = {x: AMPLITUDE, y: AMPLITUDE};
turbulence.octaves = 8;
turbulence.isFractal = true;

const mapTarget = document.querySelector('#target'); // instead of document.createElement(‘canvas’);
mapTarget.width = WIDTH;
mapTarget.height = HEIGHT;

const dissolveMap = new kampos.Kampos({ target: mapTarget, effects: [turbulence], noSource: true });

dissolveMap.draw();