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