demo.html

   1 <!DOCTYPE html>
   2 <html>
   3   <head>
   4     <title>String Linear Interpolation Example</title>
   5     <meta charset="utf-8" />
   6     <style>
   7       input[type=text] {
   8       width: 40%;
   9       display: table-cell;
  10       margin-left: 5%;
  11       text-align: center;
  12       }
  13     </style>
  14     <script type="text/javascript" src="string-lerp.js"></script>
  15     <script>
  16       var DEMOS = [
  17           ["Do you like green eggs and ham?", "I do not like them, Sam-I-am."],
  18           ["apple core", "core dump"],
  19           ["rgb(255, 0, 0)", "rgb(0, 128, 255)"],
  20           ["1.50 + 1.50 = 3.0", "3 + 7 = 10"],
  21           ["ZALGO̸", "ZA̢LG͜O"],
  22           ["", "Typing, one letter at a time."],
  23           ["( ﾉﾟ▽ﾟ)ﾉ", "( ╯︵╰)"]
  24       ];
  25       var i = Math.floor(Math.random() * DEMOS.length);
  26
  27       function set () {
  28           var a = document.getElementById("a");
  29           var b = document.getElementById("b");
  30           var d = DEMOS[i++ % DEMOS.length];
  31           a.value = d[0];
  32           b.value = d[1];
  33           update();
  34       }
  35
  36       function update () {
  37           var p = +document.getElementById("slider").value;
  38           var a = document.getElementById("a");
  39           var b = document.getElementById("b");
  40           var e = document.getElementById("text");
  41           e.textContent = stringLerp.lerp(a.value, b.value, p);
  42       }
  43       function update () {
  44           var p = +document.getElementById("slider").value;
  45           var a = document.getElementById("a");
  46           var b = document.getElementById("b");
  47           var e = document.getElementById("text");
  48           e.textContent = stringLerp.lerp(a.value, b.value, p);
  49       }
  50     </script>
  51   </head>
  52   <body onload="set()">
  53     <div style="text-align: center; margin: 1em">
  54       Enter source and target text, and drag the slider to interpolate
  55       between the two.
  56     </div>
  57     <div style="width: 70%; margin: auto; column-spacing: 10%;">
  58       <input type="text" id="a" value="Do you like green eggs and ham?"
  59              oninput="update();">
  60       <input type="text" id="b" value="I do not like them, Sam-I-am."
  61              oninput="update();">
  62     </div>
  63     <input id="slider" type="range" value=0.5 max=1.00 step=0.00390625
  64            oninput="update();"
  65            style="width: 80%; margin: 1em auto; display: block;">
  66     <div id="text" style="width: 75%; margin: 0.5em auto; font-size: 2em; text-align: center; min-height: 1.5em;">
  67     </div>
  68     <div style="text-align: center">
  69       <a href="javascript:set();">Try a different string pair</a>
  70     </div>
  71   </body>
  72 </html>