add image download

marcantondahmen · Nov 15, 2023 · 6273ac6 · 6273ac6
1 parent e5fa035
commit 6273ac6
Show file tree

Hide file tree

Showing 4 changed files with 546 additions and 39 deletions.
diff --git a/bin/download-images.js b/bin/download-images.js
@@ -0,0 +1,57 @@
+const sharp = require('sharp');
+const fs = require('fs');
+const assets = './dist/assets';
+
+const GITHUB =
+	'https://github.com/marcantondahmen/image-refractor/tree/gh-pages/assets';
+
+const download = async (url, name) => {
+	const response = await fetch(url);
+	const arrBuffer = await response.arrayBuffer();
+
+	await sharp(arrBuffer)
+		.jpeg({ quality: 65, mozjpeg: true })
+		.toFile(`${assets}/${name}.jpg`);
+};
+
+const getFiles = async (files) => {
+	if (!fs.existsSync(assets)) {
+		fs.mkdirSync(assets, { recursive: true });
+	}
+
+	for (const file of files) {
+		console.log(file.name);
+
+		try {
+			console.log(`Try downloading ${file.name} from GitHub ...`);
+
+			await download(`${GITHUB}/${file.name}.jpg`, file.name);
+		} catch (error) {
+			console.log(
+				`File ${file.name} not yet in repository, falling back to ${file.url}`,
+			);
+
+			await download(file.url, file.name);
+		}
+	}
+};
+
+getFiles([
+	// https://unsplash.com/photos/a-black-and-white-photo-of-a-mountain-range-9QbuKUPFaNI
+	{
+		url: 'https://source.unsplash.com/9QbuKUPFaNI/1400x1400',
+		name: 'mountains',
+	},
+
+	// https://unsplash.com/photos/a-black-and-white-photo-of-a-rock-formation-3OpOV8ntLj4
+	{
+		url: 'https://source.unsplash.com/3OpOV8ntLj4/1400x1400',
+		name: 'rocks',
+	},
+
+	// https://unsplash.com/photos/a-circular-object-with-a-black-background-Jzf8cyxg76g
+	{
+		url: 'https://source.unsplash.com/Jzf8cyxg76g/1400x1400',
+		name: 'ring',
+	},
+]);
diff --git a/demo/index.html b/demo/index.html
@@ -29,18 +29,18 @@
 	<body>
 		<div class="wrapper">
 			<image-refractor
-				width="1000"
-				height="1000"
-				refract="1.333"
-				speed="0.05"
+				width="1800"
+				height="1800"
+				refract="1.33"
+				speed=".04"
 				intensity="1"
-				src="assets/demo.png"
+				src="assets/rocks.jpg"
 			></image-refractor>
 			<main>
 				<h1>Image<br />Refractor</h1>
 				<p>
 					<a
-						href="https://github.com/marcantondahmen/image-refractor"
+						href="https://github.com/marcantondahmen/image-refractor#readme"
 						target="_blank"
 					>
 						Open Documentation ⟶
@@ -50,55 +50,45 @@ <h1>Image<br />Refractor</h1>
 					<summary>Settings</summary>
 					<div>
 						<div class="presets">
-							<label>
-								Example Presets:
-								<br />
-								Intensity / Speed / Refraction
-							</label>
+							<label>Intensity / Speed / Refraction</label>
 							<refractor-preset
 								class="active"
+								speed=".04"
+								refract="1.33"
 								intensity="1"
-								speed="0.05"
-								refract="1.333"
 							></refractor-preset>
 							<refractor-preset
-								speed="0.6"
-								refract="1.07"
-								intensity="2"
+								speed=".1"
+								refract="1.004"
+								intensity="7.5"
 							></refractor-preset>
 							<refractor-preset
-								speed="0.3"
-								refract="1.005"
-								intensity="4"
+								speed=".03"
+								refract="1.07"
+								intensity="14"
 							></refractor-preset>
 							<refractor-preset
-								intensity="6"
-								speed="0.4"
-								refract="1.05"
+								intensity="2"
+								speed=".5"
+								refract="1.15"
 							></refractor-preset>
 							<refractor-preset
-								intensity="12"
-								speed="0.8"
+								intensity="4.2"
+								speed=".008"
 								refract="1.85"
 							></refractor-preset>
-							<refractor-preset
-								intensity="0"
-								speed="0"
-								refract="1"
-							></refractor-preset>
 						</div>
 						<div class="presets">
 							<label>Texture</label>
-							<swap-image src="assets/demo.png"
-								>Default</swap-image
+							<swap-image src="assets/rocks.jpg" class="active"
+								>Rocks</swap-image
 							>
-							<swap-image
-								src="https://source.unsplash.com/nCdBlbqlj4E/800x800"
-								>Abstract</swap-image
+							<swap-image src="assets/ring.jpg">Ring</swap-image>
+							<swap-image src="assets/mountains.jpg"
+								>Mountains</swap-image
 							>
-							<swap-image
-								src="https://source.unsplash.com/Jzf8cyxg76g/800x800"
-								>Ring</swap-image
+							<swap-image src="assets/demo.png"
+								>Circles</swap-image
 							>
 						</div>
 					</div>