Add basic color term, hsl edition

jennazee · Jan 27, 2020 · 8cf49fe · 8cf49fe
1 parent 9df90f2
commit 8cf49fe
Show file tree

Hide file tree

Showing 5 changed files with 108 additions and 33 deletions.
diff --git a/Artifier.js b/Artifier.js
@@ -40,13 +40,17 @@ export default class Artifier {
     return new Uint8ClampedArray(ctx.getImageData(0, 0, width, height).data);
   }
 
+
+  // https://gist.github.com/emanuel-sanabria-developer/5793377
   rgbToHsl(rgb) {
-    let r = rgb[0]/255;
-    let g = rgb[1]/255;
-    let b = rgb[2]/255;
+    // get all values as percentages
+    const r = rgb[0]/255;
+    const g = rgb[1]/255;
+    const b = rgb[2]/255;
 
-    let max = Math.max(r, g, b);
-    let min = Math.min(r, g, b);
+    // find min and max values
+    const max = Math.max(r, g, b);
+    const min = Math.min(r, g, b);
 
     let h, s;
     let l = (max + min)/2;
@@ -67,33 +71,6 @@ export default class Artifier {
     return [h * 360, s * 100, l * 100];
   }
 
-  rgbToHslForHumans(rgb) {
-    let r = rgb[0]/255;
-    let g = rgb[1]/255;
-    let b = rgb[2]/255;
-
-    let max = Math.max(r, g, b);
-    let min = Math.min(r, g, b);
-
-    let h, s;
-    let l = (max + min)/2;
-
-    if (max === min) {
-      h = s = 0;
-    } else {
-      let d = max - min;
-      s = l > 0.5 ? d / (2 - max - min) : d / (max + min);
-
-      switch (max) {
-        case r: h = (g - b) / d + (g < b ? 6 : 0); break;
-        case g: h = (b - r) / d + 2; break;
-        case b: h = (r - g) / d + 4; break;
-      }
-      h /= 6;
-    }
-    return [h * 360, 50, 50];
-  }
-
   rgbaToRgb(rgba) {
     // https://stackoverflow.com/questions/2049230/convert-rgba-color-to-rgb
     //

diff --git a/BasicColorTerminalHsl.js b/BasicColorTerminalHsl.js
@@ -0,0 +1,48 @@
+import {RED, ORANGE, YELLOW, GREEN, BLUE, PURPLE, PINK, WHITE, BLACK, GRAY, BROWN} from './constants.js';
+import Artifier from './Artifier.js';
+
+class BasicColorTerminalHsl extends Artifier {
+  constructor() {
+    super();
+    this.colorsForCanvas = [RED, ORANGE, YELLOW, GREEN, BLUE, PURPLE, PINK, WHITE, BLACK, GRAY, BROWN]
+    this.colors = this.colorsForCanvas.map(this.rgbToHsl);
+  }
+
+  artFunction(ctx, width, height) {
+    const imageData = ctx.getImageData(0, 0, width, height).data;
+    const colors = this.colors;
+    let newImageArray = [];
+
+    for (let h = 0; h < height; h++) {
+      for (let w = 0; w < width; w++) {
+        let currentRgb = this.getPixelAt(h, w, width, imageData);
+
+        if (currentRgb[3] !== 255) {
+          currentRgb = this.rgbaToRgb(currentRgb);
+        }
+
+        const current = this.rgbToHsl(currentRgb)
+
+        let closest;
+        let minDist = 1000000000; // temporary
+        for (let i = 0; i < colors.length; i++) {
+          let color = colors[i];
+          let redDiff = color[0] - current[0];
+          let greenDiff = color[1] - current[1];
+          let blueDiff = color[2] - current[2]
+          let dist = (redDiff * redDiff) + (greenDiff * greenDiff) + (blueDiff * blueDiff);
+          if (dist < minDist) {
+            minDist = dist;
+            closest = i;
+          }
+        }
+        this.mergeArrays(newImageArray, this.colorsForCanvas[closest]);
+      }
+    }
+    return new Uint8ClampedArray(newImageArray);
+  }
+}
+
+const bct = new BasicColorTerminalHsl();
+
+
diff --git a/basiccolorterminal-hsl.html b/basiccolorterminal-hsl.html
@@ -0,0 +1,39 @@
+<!doctype html>
+
+<html>
+
+  <head>
+    <title>huemanities</title>
+    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
+    <meta name="viewport" content="width=device-width, initial-scale=1">
+    <script src="bcthsl-bundle.js" type="text/javascript"></script>
+    <link rel="stylesheet" type="text/css" href="huemanity.css">
+  </head>
+
+  <body>
+    <header>
+      <h1>basic color terminal (hsl)</h1>
+    </header>
+
+    <div class="Content">
+      <div class="UploadWrapper">
+        <label class="Label" for="photo">Upload a picture!</label>
+        <input type="file" name="photo" class="Uploader" />
+      </div>
+      <canvas class="Canvas"></canvas>
+    </div>
+
+    <footer class="Footer">
+      <h2>Cool, what's it do?</h2>
+      <p>All the pixels are "rounded" to whatever English
+        <a target="_blank" href="https://en.wikipedia.org/wiki/Color_term#Basic_colour_terms">"basic color term"</a> (think Crayola marker ten-pack + white)
+        <a target="_blank" href="https://developer.mozilla.org/en-US/docs/Web/CSS/color_value">CSS color</a> is the closest based on the
+        <a target="_blank" href="https://en.wikipedia.org/wiki/Euclidean_distance">Euclidean distance</a> between their
+        <a target="_blank" href="https://en.wikipedia.org/wiki/RGB_color_model">HSL</a> values.
+      </p>
+      <p>Is this a reasonable thing to do? Who knows.</p>
+      <p><a target="_blank" href="https://github.com/jennazee/huemanities">Code</a></p>
+    </footer>
+  </body>
+
+</html>
diff --git a/bcthsl-bundle.js b/bcthsl-bundle.js
diff --git a/package.json b/package.json
@@ -5,7 +5,8 @@
   "main": "huemanities.js",
   "scripts": {
     "test": "echo \"Error: no test specified\" && exit 1",
-    "compile-bct": "browserify BasicColorTerminal.js -o bct-bundle.js -t [ babelify --presets [ es2015 ] ] -t uglifyify"
+    "compile-bct": "browserify BasicColorTerminal.js -o bct-bundle.js -t [ babelify --presets [ es2015 ] ] -t uglifyify",
+    "compile-bct-hsl": "browserify BasicColorTerminalHsl.js -o bcthsl-bundle.js -t [ babelify --presets [ es2015 ] ] -t uglifyify"
   },
   "repository": {
     "type": "git",