voltrevo · October 6, 2017 04:46
diff --git a/layout-demo.html b/layout-demo.html
 <!DOCTYPE html>
 <html>
 <head>

 <script src="https://cdnjs.cloudflare.com/ajax/libs/systemjs/0.20.19/system.js"></script>
  
 <script src="https://cdnjs.cloudflare.com/ajax/libs/qs/6.5.1/qs.js"></script>

 <script>

 SystemJS.config({
  map: {
    'plugin-babel': 'https://cdn.rawgit.com/systemjs/plugin-babel/ea37443d/plugin-babel.js',
    'systemjs-babel-build': 'https://cdn.rawgit.com/systemjs/plugin-babel/ea37443d/systemjs-babel-browser.js'
  },
  transpiler: 'plugin-babel'
 });
  
 (async () => {
  const layout = (await SystemJS.import('https://rawgit.com/voltrevo/84d780de0b718cd2dcb98b8c8624e7f1/raw/ec1e1f974f2ddbcd3f6a6adb29ff2dbcee6d1ab3/layout.js')).default;
  const range = n => (new Array(n)).fill(0).map((x, i) => i);
  const query = Qs.parse(location.search.slice(1));
  
  const tol = Number(query.tol || 0.2);
  
  const a = Number(query.a || (4/3));
  
  const px = (() => {
    const default_ = 640 * 480;
    
    if (!query.s) {
      return default_;
    }
    
    if (/^[0-9]+$/.test(query.s)) {
      return Number(query.s);
    }
    
    if (/^[0-9]+x[0-9]+/.test(query.s)) {
      const [w, h] = query.s.split('x').map(Number);
      return w * h;
    }
    
    console.error('Unexpected query.s: ' + query.s);
    return default_;
  })();
  
  const imgNum = Number(query.n || 7);
  
  const imgSize = () => {
    const da = Number(query.da || 1);
    const aspect = a * da ** (2 * Math.random() - 1); // From a/da to a*da
    
    const height = Math.sqrt(px / aspect);
    const width = aspect * height;
    
    return { width, height };
  };
  
  const indexes = range(imgNum);
  const rands = indexes.map(i => Math.floor(Math.random() * 1085));
  const rects = indexes.map(imgSize);
  
  const elements = layout(window.innerWidth, window.innerHeight, rects, tol);

  const blurBack = document.querySelector('#blur-back');
  
  const imgs = await Promise.all(indexes.map(i => (async () => {
    const el = elements[i];
    
    const rand = rands[i];
    const req = await fetch(`https://loremflickr.com/${Math.round(el.rect.width)}/${Math.round(el.rect.height)}?random=${Math.random()}`);
    const imgSrc = req.url;
    
    const mkImg = (dest) => {
      const img = document.createElement('img');
      img.src = imgSrc;
      img.style.width = `${dest.width}px`;
      img.style.height = `${dest.height}px`;
      img.style.left = `${dest.x}px`;
      img.style.top = `${dest.y}px`;
      
      return img;
    };
    
    return {
      backImg: mkImg(el),
      mainImg: mkImg(el.adjDest),
    };
  })()));
  
  for (const { backImg, mainImg} of imgs) {
    blurBack.appendChild(backImg);
    document.body.appendChild(mainImg);
  }
  
  window.onresize = () => {
    const els = layout(window.innerWidth, window.innerHeight, rects, tol);
    
    for (const i of indexes) {
      const { backImg, mainImg } = imgs[i];
      const el = els[i];
      
      backImg.style.width = `${el.width}px`;
      backImg.style.height = `${el.height}px`;
      backImg.style.left = `${el.x}px`;
      backImg.style.top = `${el.y}px`;
      
      mainImg.style.width = `${el.adjDest.width}px`;
      mainImg.style.height = `${el.adjDest.height}px`;
      mainImg.style.left = `${el.adjDest.x}px`;
      mainImg.style.top = `${el.adjDest.y}px`;
    }
  };
 })()
 .catch(err => {
  setTimeout(() => { throw err; });
 });

 </script>

 <style>

 body {
  background-color: black;
 }
  
 #blur-back {
  filter: blur(75px);
 }
  
 img {
  position: absolute;
  object-fit: cover;
  transition: all 300ms ease;
 }

 </style>
  
 </head>
 <body>
  <div id='blur-back'></div>
 </body>
 </html>
	<!DOCTYPE html>
	<html>
	<head>

	<script src="https://cdnjs.cloudflare.com/ajax/libs/systemjs/0.20.19/system.js"></script>

	<script src="https://cdnjs.cloudflare.com/ajax/libs/qs/6.5.1/qs.js"></script>

	<script>

	SystemJS.config({
	map: {
	'plugin-babel': 'https://cdn.rawgit.com/systemjs/plugin-babel/ea37443d/plugin-babel.js',
	'systemjs-babel-build': 'https://cdn.rawgit.com/systemjs/plugin-babel/ea37443d/systemjs-babel-browser.js'
	},
	transpiler: 'plugin-babel'
	});

	(async () => {
	const layout = (await SystemJS.import('https://rawgit.com/voltrevo/84d780de0b718cd2dcb98b8c8624e7f1/raw/ec1e1f974f2ddbcd3f6a6adb29ff2dbcee6d1ab3/layout.js')).default;
	const range = n => (new Array(n)).fill(0).map((x, i) => i);
	const query = Qs.parse(location.search.slice(1));

	const tol = Number(query.tol \|\| 0.2);

	const a = Number(query.a \|\| (4/3));

	const px = (() => {
	const default_ = 640 * 480;

	if (!query.s) {
	return default_;
	}

	if (/^[0-9]+$/.test(query.s)) {
	return Number(query.s);
	}

	if (/^[0-9]+x[0-9]+/.test(query.s)) {
	const [w, h] = query.s.split('x').map(Number);
	return w * h;
	}

	console.error('Unexpected query.s: ' + query.s);
	return default_;
	})();

	const imgNum = Number(query.n \|\| 7);

	const imgSize = () => {
	const da = Number(query.da \|\| 1);
	const aspect = a * da ** (2 * Math.random() - 1); // From a/da to a*da

	const height = Math.sqrt(px / aspect);
	const width = aspect * height;

	return { width, height };
	};

	const indexes = range(imgNum);
	const rands = indexes.map(i => Math.floor(Math.random() * 1085));
	const rects = indexes.map(imgSize);

	const elements = layout(window.innerWidth, window.innerHeight, rects, tol);

	const blurBack = document.querySelector('#blur-back');

	const imgs = await Promise.all(indexes.map(i => (async () => {
	const el = elements[i];

	const rand = rands[i];
	const req = await fetch(`https://loremflickr.com/${Math.round(el.rect.width)}/${Math.round(el.rect.height)}?random=${Math.random()}`);
	const imgSrc = req.url;

	const mkImg = (dest) => {
	const img = document.createElement('img');
	img.src = imgSrc;
	img.style.width = `${dest.width}px`;
	img.style.height = `${dest.height}px`;
	img.style.left = `${dest.x}px`;
	img.style.top = `${dest.y}px`;

	return img;
	};

	return {
	backImg: mkImg(el),
	mainImg: mkImg(el.adjDest),
	};
	})()));

	for (const { backImg, mainImg} of imgs) {
	blurBack.appendChild(backImg);
	document.body.appendChild(mainImg);
	}

	window.onresize = () => {
	const els = layout(window.innerWidth, window.innerHeight, rects, tol);

	for (const i of indexes) {
	const { backImg, mainImg } = imgs[i];
	const el = els[i];

	backImg.style.width = `${el.width}px`;
	backImg.style.height = `${el.height}px`;
	backImg.style.left = `${el.x}px`;
	backImg.style.top = `${el.y}px`;

	mainImg.style.width = `${el.adjDest.width}px`;
	mainImg.style.height = `${el.adjDest.height}px`;
	mainImg.style.left = `${el.adjDest.x}px`;
	mainImg.style.top = `${el.adjDest.y}px`;
	}
	};
	})()
	.catch(err => {
	setTimeout(() => { throw err; });
	});

	</script>

	<style>

	body {
	background-color: black;
	}

	#blur-back {
	filter: blur(75px);
	}

	img {
	position: absolute;
	object-fit: cover;
	transition: all 300ms ease;
	}

	</style>

	</head>
	<body>
	<div id='blur-back'></div>
	</body>
	</html>