Which one is more yellow?

From 0d9b046e8ff7a067da299977598ac5d9d2375f40 Mon Sep 17 00:00:00 2001 From: Ben Thayer Date: Thu, 12 Sep 2019 18:21:37 -0500 Subject: [PATCH 4/5] Separated code --- Colors/index.html | 133 ++-------------------------------------------- Colors/script.js | 92 ++++++++++++++++++++++++++++++++ Colors/style.css | 39 ++++++++++++++ 3 files changed, 134 insertions(+), 130 deletions(-) create mode 100644 Colors/script.js create mode 100644 Colors/style.css diff --git a/Colors/index.html b/Colors/index.html index b3bc230..61ae8d1 100644 --- a/Colors/index.html +++ b/Colors/index.html @@ -2,134 +2,8 @@ - - - + + @@ -143,6 +17,5 @@

- - \ No newline at end of file + diff --git a/Colors/script.js b/Colors/script.js new file mode 100644 index 0000000..5bf1006 --- /dev/null +++ b/Colors/script.js @@ -0,0 +1,92 @@ + +function myFunction(button) { + // We've decided which button is more yellow. Update best guess and test values to match + var button1 = document.getElementById("button-1"); + var button2 = document.getElementById("button-2"); + if (button == 1) { + button = button1; + } else { + button = button2; + } + + var colorElement = document.getElementById("color"); + var oldColor = getColorArray(colorElement); + var updateColor = getColorArray(button); + var newColor = mergeVecs(oldColor, updateColor, 0.5); + + color.style.backgroundColor = rgbString(newColor); + + // https://www.rapidtables.com/convert/color/hsv-to-rgb.html + + var diff = getDifferential(30); + + var guess1 = addVecs(newColor, diff); + var guess2 = addVecs(newColor, diff.map(x => -x)); + // button1.style.backgroundColor = rgbString(guess1); + // button2.style.backgroundColor = rgbString(guess2); + button1.style.backgroundColor = rgbString(newColor); + button2.style.backgroundColor = rgbString(guess1); +} + +function getDifferential(lr) { + // lr: the learning rate + // returns: random vector whose 1-norm is lr + + // imagine there are space spaces, pick the location of two dividers. + // The number of spaces between the dividers are the values for r, g, and b + var space = lr + 2; + var val1 = Math.floor(Math.random() * space); + var val2 = val1; + while (val1 == val2) { + val2 = Math.floor(Math.random() * space); + } + + if (val1 > val2) { + var temp = val1; + val1 = val2; + val2 = temp; + } + + var diff = [ + val1, + val2 - val1 - 1, + space - val2 - 1 + ]; + + // The differential can either be positive or negative + for (var i = 0; i < 3; i++) { + if (Math.random < 0.5) { + diff[i] = diff[i] * -1; + } + } + return diff; +} + +function addVecs(vec1, vec2) { + var newVec = new Array(vec1.length); + for (var i = 0; i < vec1.length; i++) { + newVec[i] = vec1[i] + vec2[i]; + } + return newVec; +} + +function mergeVecs(prev, update, origPct) { + var temp = new Array(prev.length); + for (var i = 0; i < prev.length; i++) { + temp[i] = Math.round(origPct * prev[i] + (1 - origPct) * update[i]); + } + return temp; +} + +function getColor(element) { + return window.getComputedStyle(element, null).getPropertyValue('background-color'); +} + +function getColorArray(element) { + var rgb = getColor(element); + return rgb.substring(4, rgb.length - 1).replace(/ /g, '').split(',').map(x => parseInt(x, 10)); +} + +function rgbString(rgbArray) { + return "rgb(" + rgbArray[0] + ", " + rgbArray[1] + ", " + rgbArray[2] + ")"; +} \ No newline at end of file diff --git a/Colors/style.css b/Colors/style.css new file mode 100644 index 0000000..ce82f66 --- /dev/null +++ b/Colors/style.css @@ -0,0 +1,39 @@ + +#button-1 { + background-color: #4CAF50; + border: none; + color: white; + padding: 15px 32px; + text-align: center; + text-decoration: none; + display: inline-block; + font-size: 16px; + margin: 4px 2px; + cursor: pointer; +} + +#button-2 { + background-color: rgb(50, 22, 175); + border: none; + color: white; + padding: 15px 32px; + text-align: center; + text-decoration: none; + display: inline-block; + font-size: 16px; + margin: 4px 2px; + cursor: pointer; +} + +#color { + background-color: rgb(179, 9, 46); + border: none; + color: white; + padding: 15px 32px; + width: 30px; + height: 30px; + text-decoration: none; + display: inline-block; + font-size: 16px; + margin: 4px 2px; +} \ No newline at end of file From 3a4f29595043c50ab4aee58c54a7cd63533d89a3 Mon Sep 17 00:00:00 2001 From: Ben Thayer Date: Thu, 26 Sep 2019 11:21:16 -0500 Subject: [PATCH 5/5] updated script --- Colors/script.js | 63 ++++++++++++++++++++++++++++++++++++++++++++++++ 1 file changed, 63 insertions(+) diff --git a/Colors/script.js b/Colors/script.js index 5bf1006..d2279d3 100644 --- a/Colors/script.js +++ b/Colors/script.js @@ -89,4 +89,67 @@ function getColorArray(element) { function rgbString(rgbArray) { return "rgb(" + rgbArray[0] + ", " + rgbArray[1] + ", " + rgbArray[2] + ")"; +} +// TODO Test conversions +// TODO probability of doing things + +// https://howlettstudios.com/articles/2017/5/6/the-problem-with-hsv +function rgbToHSV(rgbArray) { + var r = rgbArray[0] / 255; + var g = rgbArray[1] / 255; + var b = rgbArray[2] / 255; + + var cmax = Math.max(r, g, b); + var cmin = Math.min(r, g, b) + + var delta = cmax - cmin; + + var h; + if (cmax == r) { + h = 60 * (((g-b)/delta) % 6); + } else if (cmax == g) { + h = 60 * (((b-r)/delta) + 2); + } else if (cmax == b) { + h = 60 * (((r-g)/delta) + 4); + } + + var s; + if (cmax == 0) { + s = 0; + } else { + s = delta/cmax; + } + + var v = cmax; + + return [h, s, v]; +} + +function hsvToRGB(hsvArray) { + var h = hsvArray[0]; + var s = hsvArray[1]; + var v = hsvArray[2]; + + var c = v * s; + var x = c * (1 - Math.abs((h/60)%2 - 1)); + var m = v - c; + + var rgbArray; + if (h < 60) { + rgbArray = [c, x, 0]; + } else if (h < 120) { + rgbArray = [x, c, 0]; + } else if (h < 180) { + rgbArray = [0, c, x]; + } else if (h < 240) { + rgbArray = [0, x, c]; + } else if (h < 300) { + rgbArray = [x, 0, c]; + } else { + rgbArray = [c, 0, x]; + } + for (var i = 0; i < 3; i++) { + rgbArray[i] = Math.round(rgbArray[i] * 255); + } + return rgbArray; } \ No newline at end of file