Create celebrity-editor.html

mcnole25 · Apr 18, 2024 · f4f73fc · f4f73fc
1 parent 7a62e58
commit f4f73fc
Showing 1 changed file with 91 additions and 0 deletions.
diff --git a/celebrity-editor.html b/celebrity-editor.html
@@ -0,0 +1,91 @@
+<!DOCTYPE html>
+<html>
+  <head>
+    <title>Celebrity Face Editor</title>
+    <link rel="shortcut icon" type="image/x-icon" href="favicon.ico">
+    <style>
+        body {background-color: #222; position: relative; left: 10px; width: 90vw; height: 90vh;}
+        a, h1, p, span {color: #fff; font-family: verdana;}
+        input {width: 1355px; font-size: 120%; font-family: consolas;}
+        canvas {display: block; margin: 8px 0px;}
+        .pca {width: 150px;}
+        span {padding: 0px 54px; display: inline-block; position: relative; left: 1px;}
+        button {font-size: 150%; padding: 0px 15px; margin: 8px 0px;}
+        #myCanvas {position: relative; left: 340px; bottom: 210px;}
+    </style>
+  </head>
+  <body>
+        <h1>Celebrity Face Editor</h1>
+        <p>Based on carykh's celebrity face editor.</p>
+        <p>Why did I make this? It's too difficult to download the real thing, so I made my own version.</p>
+        <span>PCA 1</span><span>PCA 2</span>
+        <br>
+        <input type="range" id="pca1" class="pca">
+        <input type="range" id="pca2" class="pca">
+        <br>
+        <span>PCA 3</span><span>PCA 4</span>
+        <br>
+        <input type="range" id="pca3" class="pca">
+        <input type="range" id="pca4" class="pca">
+        <br>
+        <span>PCA 5</span><span>PCA 6</span>
+        <br>
+        <input type="range" id="pca5" class="pca">
+        <input type="range" id="pca6" class="pca">
+        <br>
+        <button onclick=randomize()>Randomize</button>
+        <button onclick=gotomean()>Go to Mean</button>
+         <canvas id="myCanvas" width="512" height="512"></canvas>
+         <script>
+             let c = document.getElementById("myCanvas");
+             let ctx = c.getContext("2d");
+             setInterval(function() {
+                 let brightness = 50 - Number(pca1.value);
+                 let skin = Number(pca2.value) - 50;
+                 let horizontal = (Number(pca3.value) - 50) - (Number(pca4.value) - 50);
+                 let vertical = 50 - Number(pca5.value);
+                 let temperature = Number(pca6.value) - 50;
+                 ctx.clearRect(0, 0, c.width, c.height);
+                 ctx.fillStyle = "hsl(" + (temperature > 0 ? 20 : 200) + ", " + Math.abs(temperature) + "%, " + (50 + brightness - skin / 2 + (Number(pca3.value) - 50) / 2.5 + (Number(pca4.value) - 50) / 2) + "%)";
+                 ctx.fillRect(0, 0, 512, 512);
+                 ctx.fillStyle = "hsl(25, " + (50 + Math.abs(skin / 2) + temperature / 2) + "%, " + (50 + brightness / 4 + skin / 2) + "%)";
+                 ctx.beginPath();
+                 ctx.arc(256, 256, 224, 0, 2 * Math.PI);
+                 ctx.fill();
+                 ctx.fillRect(160 - horizontal / 3, 256, 192, 256);
+                 ctx.fillStyle = "#fff";
+                 ctx.beginPath();
+                 ctx.arc(160 + horizontal / 3, 224 + vertical / 3, 48, 0, 2 * Math.PI);
+                 ctx.arc(352 + horizontal / 3, 224 + vertical / 3, 48, 0, 2 * Math.PI);
+                 ctx.fill();
+                 ctx.fillStyle = "#000";
+                 ctx.beginPath();
+                 ctx.arc(160 + horizontal / 6, 224 + vertical / 6, 8, 0, 2 * Math.PI);
+                 ctx.arc(352 + horizontal / 6, 224 + vertical / 6, 8, 0, 2 * Math.PI);
+                 ctx.fill();
+                 ctx.lineWidth = 4;
+                 let smileHorizontal = (50 - Number(pca3.value)) / 8 + (50 - Number(pca4.value)) / 6;
+                 ctx.beginPath();
+                 ctx.moveTo(192 + horizontal / 3, 352 - smileHorizontal / 2 + vertical / 3);
+                 ctx.quadraticCurveTo(256 + horizontal / 3, 384 + smileHorizontal + vertical / 3, 320 + horizontal / 3, 352 - smileHorizontal / 2 + vertical / 3);
+                 ctx.stroke();
+             });
+             function randomize() {
+             pca1.value = Math.round(Math.random() * 100);
+             pca2.value = Math.round(Math.random() * 100);
+             pca3.value = Math.round(Math.random() * 100);
+             pca4.value = Math.round(Math.random() * 100);
+             pca5.value = Math.round(Math.random() * 100);
+             pca6.value = Math.round(Math.random() * 100);
+             }
+             function gotomean() {
+             pca1.value = 50;
+             pca2.value = 50;
+             pca3.value = 50;
+             pca4.value = 50;
+             pca5.value = 50;
+             pca6.value = 50;
+             }
+         </script>
+  </body>
+</html>