herrernst · October 6, 2016 19:29 · Oct 6, 2016 · Oct 5, 2016 · Oct 5, 2016 · Oct 5, 2016
diff --git a/grayramp.html b/grayramp.html
@@ -12,39 +12,57 @@
 }
 </style>
 <body>
-  <label for="widthRGB">rgb: width of one jump</label><input id="widthRGB" value="1" />
+  <label for="widthRGB">rgb: width of one jump</label><input id="widthRGB" value="3" />
   <button id="drawRGB">draw</button>
-  <label for="widthAlpha">alpha: number of jumps</label><input id="widthAlpha" value="1024" />
+  <br>
+  <label for="widthAlpha">alpha: number of jumps</label><input id="widthAlpha" value="768" />
+  <label for="widthAlpha">alpha: gamma (srgb ca. 2.2)</label><input id="gammaAlpha" value="2.2" />
   <button id="drawAlpha">draw</button>
+  <br>
+  <label for="widthCss">css gradient: number of jumps</label><input id="widthCss" value="768" />
+  <button id="drawCss">draw</button>
   <div class="ramp"></div>
+  <h2>comparison (png)</h2>
+  <img src="https://www.drycreekphoto.com/images/calibration/graygradient.png">
   <script>
-  const sRGBLikeGamma = 2.2; //TODO not exactly sRGB
+  const sRGBLikeGamma = 2.2;
   function drawRampRGB(w, el) {
     for(var i=0; i<256; i++) {
       var r = document.createElement("div");
       r.style.width = w + "px";
-      r.style.left = i*w + "px";
+      r.style.left = (255-i)*w + "px";
       r.style.backgroundColor = "rgb(" + i + ", " + i + ", " + i + ")";
       el.appendChild(r);
     }
   }
-  function drawRampAlpha(c, el) {
+  function drawRampAlpha(c, el, gamma) {
     for(var i=0; i<c; i++) {
       var r = document.createElement("div");
       r.style.width = "1px";
       r.style.left = i + "px";
-      r.style.backgroundColor = "rgba(0, 0, 0, " + Math.pow(i/c, 1/sRGBLikeGamma) + ")";
+      r.style.backgroundColor = "rgba(0, 0, 0, " + Math.pow(i/c, sRGBLikeGamma/gamma) + ")";
       el.appendChild(r);
     }
   }
+  function drawRampCssGradient(w, el) {
+    var r = document.createElement("div");
+    r.style.width = w + "px";
+    r.style.backgroundImage = "linear-gradient(to right, rgba(0, 0, 0, 0), black)";
+    el.appendChild(r);
+  }
   var ramp = document.querySelector(".ramp");
   document.querySelector("#drawRGB").addEventListener("click", function () {
     ramp.innerHTML = "";
     drawRampRGB(parseInt(document.querySelector("#widthRGB").value, 10), ramp);
   });
   document.querySelector("#drawAlpha").addEventListener("click", function () {
     ramp.innerHTML = "";
-    drawRampAlpha(parseInt(document.querySelector("#widthAlpha").value, 10), ramp);
+    var gamma = parseFloat(document.querySelector("#gammaAlpha").value, 10)
+    drawRampAlpha(parseInt(document.querySelector("#widthAlpha").value, 10), ramp, gamma);
+  });
+  document.querySelector("#drawCss").addEventListener("click", function () {
+    ramp.innerHTML = "";
+    drawRampCssGradient(parseInt(document.querySelector("#widthCss").value, 10), ramp);
   });
   </script>
 </body>
diff --git a/grayramp.html b/grayramp.html
@@ -18,6 +18,7 @@
   <button id="drawAlpha">draw</button>
   <div class="ramp"></div>
   <script>
+  const sRGBLikeGamma = 2.2; //TODO not exactly sRGB
   function drawRampRGB(w, el) {
     for(var i=0; i<256; i++) {
       var r = document.createElement("div");
@@ -28,12 +29,11 @@
     }
   }
   function drawRampAlpha(c, el) {
-    //TODO srgb gamma
     for(var i=0; i<c; i++) {
       var r = document.createElement("div");
       r.style.width = "1px";
       r.style.left = i + "px";
-      r.style.backgroundColor = "rgba(0, 0, 0, " + (i/c) + ")";
+      r.style.backgroundColor = "rgba(0, 0, 0, " + Math.pow(i/c, 1/sRGBLikeGamma) + ")";
       el.appendChild(r);
     }
   }

diff --git a/grayramp.html b/grayramp.html
@@ -19,7 +19,7 @@
   <div class="ramp"></div>
   <script>
   function drawRampRGB(w, el) {
-    for(var i=0; i<1024; i++) {
+    for(var i=0; i<256; i++) {
       var r = document.createElement("div");
       r.style.width = w + "px";
       r.style.left = i*w + "px";
@@ -28,6 +28,7 @@
     }
   }
   function drawRampAlpha(c, el) {
+    //TODO srgb gamma
     for(var i=0; i<c; i++) {
       var r = document.createElement("div");
       r.style.width = "1px";

diff --git a/grayramp.html b/grayramp.html
@@ -1,4 +1,6 @@
 <!doctype html>
+<title>draw grayscale ramp</title>
+<meta name="viewport" content="width=device-width">
 <style>
 .ramp {
   height: 300px;

diff --git a/grayramp.html b/grayramp.html
@@ -0,0 +1,47 @@
+<!doctype html>
+<style>
+.ramp {
+  height: 300px;
+  position: relative;
+}
+.ramp > div {
+  position: absolute;
+  height: 100%;
+}
+</style>
+<body>
+  <label for="widthRGB">rgb: width of one jump</label><input id="widthRGB" value="1" />
+  <button id="drawRGB">draw</button>
+  <label for="widthAlpha">alpha: number of jumps</label><input id="widthAlpha" value="1024" />
+  <button id="drawAlpha">draw</button>
+  <div class="ramp"></div>
+  <script>
+  function drawRampRGB(w, el) {
+    for(var i=0; i<1024; i++) {
+      var r = document.createElement("div");
+      r.style.width = w + "px";
+      r.style.left = i*w + "px";
+      r.style.backgroundColor = "rgb(" + i + ", " + i + ", " + i + ")";
+      el.appendChild(r);
+    }
+  }
+  function drawRampAlpha(c, el) {
+    for(var i=0; i<c; i++) {
+      var r = document.createElement("div");
+      r.style.width = "1px";
+      r.style.left = i + "px";
+      r.style.backgroundColor = "rgba(0, 0, 0, " + (i/c) + ")";
+      el.appendChild(r);
+    }
+  }
+  var ramp = document.querySelector(".ramp");
+  document.querySelector("#drawRGB").addEventListener("click", function () {
+    ramp.innerHTML = "";
+    drawRampRGB(parseInt(document.querySelector("#widthRGB").value, 10), ramp);
+  });
+  document.querySelector("#drawAlpha").addEventListener("click", function () {
+    ramp.innerHTML = "";
+    drawRampAlpha(parseInt(document.querySelector("#widthAlpha").value, 10), ramp);
+  });
+  </script>
+</body>