diff --git a/toys/facelight/LICENSE.md b/toys/facelight/LICENSE.md new file mode 100644 index 0000000..ed0a240 --- /dev/null +++ b/toys/facelight/LICENSE.md @@ -0,0 +1,22 @@ +MIT License + +Copyright © 2020 Neale Pickett + +Permission is hereby granted, free of charge, to any person obtaining a copy +of this software and associated documentation files (the "Software"), to deal +in the Software without restriction, including without limitation the rights +to use, copy, modify, merge, publish, distribute, sublicense, and/or sell +copies of the Software, and to permit persons to whom the Software is +furnished to do so, subject to the following conditions: + +The above copyright notice and this permission notice shall be included in all +copies or substantial portions of the Software. + +The software is provided "as is", without warranty of any kind, +express or implied, including but not limited to the warranties of +merchantability, fitness for a particular purpose and +noninfringement. In no event shall the authors or copyright holders +be liable for any claim, damages or other liability, whether in an +action of contract, tort or otherwise, arising from, out of or in +connection with the software or the use or other dealings in the +software. diff --git a/toys/facelight/README.md b/toys/facelight/README.md new file mode 100644 index 0000000..763a0c6 --- /dev/null +++ b/toys/facelight/README.md @@ -0,0 +1,7 @@ +This is a HTML5 doodad that lets you screencast with your face on top. + +It saves videos locally as `.webm` files. + +You can move your face around, zoom in to a region of the screen, +I guess this is enough for my needs. +Maybe it'll be enough for yours. diff --git a/toys/facelight/app.css b/toys/facelight/app.css new file mode 100644 index 0000000..7c93e44 --- /dev/null +++ b/toys/facelight/app.css @@ -0,0 +1,12 @@ +body { + font-family: sans-serif; + text-align: center; +} + +input { + margin: 2em; +} + +img.icon { + max-height: 2em; +} \ No newline at end of file diff --git a/toys/facelight/app.js b/toys/facelight/app.js new file mode 100644 index 0000000..d4d20f6 --- /dev/null +++ b/toys/facelight/app.js @@ -0,0 +1,68 @@ +function colorTemperatureToRGB(kelvin) { + // https://gist.github.com/paulkaplan/5184275 + + let temp = kelvin / 100 + let red, green, blue + + if (temp <= 66) { + red = 255 + green = temp + green = 99.4708025861 * Math.log(green) - 161.1195681661 + if (temp <= 19) { + blue = 0 + } else { + blue = temp-10 + blue = 138.5177312231 * Math.log(blue) - 305.0447927307 + } + } else { + red = temp - 60 + red = 329.698727446 * Math.pow(red, -0.1332047592) + + green = temp - 60 + green = 288.1221695283 * Math.pow(green, -0.0755148492) + + blue = 255 + } + + return { + r : clamp(red, 0, 255), + g : clamp(green, 0, 255), + b : clamp(blue, 0, 255), + } +} + +function clamp(x, min, max) { + if (xmax) {return max} + return x +} + +function changeTemp(e) { + let tempIn = document.querySelector("#temp") + let tempOut = document.querySelector("#tempOut") + let temp + if (!e) { + temp = localStorage.temp || 5500 + } else if (e.target) { + temp = Number(e.target.value) + } else { + temp = e + } + + let color = colorTemperatureToRGB(temp) + document.body.style.backgroundColor = "rgb(" + color.r + "," + color.g + "," + color.b + ")" + tempOut.textContent = temp + tempIn.value = temp + localStorage.temp = temp +} + +function init() { + document.querySelector("#temp").addEventListener("input", changeTemp) + changeTemp() +} + +if (document.readyState === "loading") { + document.addEventListener("DOMContentLoaded", init) +} else { + init() +} diff --git a/toys/facelight/app.svg b/toys/facelight/app.svg new file mode 100644 index 0000000..2f2389a --- /dev/null +++ b/toys/facelight/app.svg @@ -0,0 +1,7 @@ + + + + + + + \ No newline at end of file diff --git a/toys/facelight/index.html b/toys/facelight/index.html new file mode 100644 index 0000000..e766761 --- /dev/null +++ b/toys/facelight/index.html @@ -0,0 +1,19 @@ + + + + Face Light + + + + + + + +
+ + + + K +
+ + diff --git a/toys/facelight/manifest.json b/toys/facelight/manifest.json new file mode 100644 index 0000000..d995318 --- /dev/null +++ b/toys/facelight/manifest.json @@ -0,0 +1,15 @@ +{ + "name": "Face Light", + "short_name": "Face Light", + "start_url": ".", + "display": "standalone", + "background_color": "#000", + "theme_color": "#ffd6aa", + "description": "Lights up your face.", + "icons": [ + { + "src": "app.svg", + "sizes": "196x196" + } + ] +} diff --git a/toys/facelight/sw.js b/toys/facelight/sw.js new file mode 100644 index 0000000..e8cd01a --- /dev/null +++ b/toys/facelight/sw.js @@ -0,0 +1,50 @@ +// jshint asi:true + +var cacheName = "v2"; +var content = [ + "index.html", + "app.js", + "app.png", +] + + +self.addEventListener("install", preCache) +self.addEventListener("fetch", cachingFetch) +self.addEventListener("activate", handleActivate) + +function handleActivate(event){ + event.waitUntil( + cleanup() + ) +} + +async function cleanup(event) { + let cacheNames = await caches.keys() + for (let name of cacheNames) { + if (name != cacheName) { + console.log("Deleting old cache", name) + caches.delete(name) + } + } +} + +function preCache(event) { + event.waitUntil( + caches.open(cacheName) + .then(cache => cache.addAll(content)) + ) +} + +// Go try to pull a newer version from the network, +// but return what's in the cache for this request +function cachingFetch(event) { + fetch(event.request) + .then(resp => { + caches.open(cacheName) + .then(cache => { + cache.put(event.request, resp.clone()) + }) + }) + + event.respondWith(caches.match(event.request)) +} diff --git a/toys/index.md b/toys/index.md index fac0ad3..e8169d7 100644 --- a/toys/index.md +++ b/toys/index.md @@ -5,8 +5,12 @@ title: Toys Here is some various junk I've done. Maybe you'll find it amusing. Maybe you'll just wonder why I spend so much time on this garbage. -* [Convulse Screen Recorder](convulse/), a pure HTML5 screen recorder, with webcam overlay +* [Convulse Screen Recorder](convulse/) + (web app) a screen recorder, with webcam overlay. +* [Face Light](facelight/) + (web app) turn your monitor into a light, to improve your appearance in video calls. * [Starship Noise Generator](starship/) + (web app) generate some background noise if your workspace is too quiet. * [Grep Dict](grepdict/) runs `grep` on `/usr/share/dict/words`; perfect for cheating on crossword puzzles * If you need to write someone a letter but really don't want to, try my [social letter generator](letter.html)