string-lerp/index.html

   1 <!DOCTYPE html>
   2 <html>
   3   <head>
   4     <meta charset="utf-8">
   5     <meta name=viewport content="width=device-width, initial-scale=1">
   6     <link rel="stylesheet" href="/css/main.css" type="text/css">
   7     <title>String Lerp - Yukkuri Games</title>
   8     <style>
   9       input[type=text] {
  10       margin: 0.125em 1em;
  11       width: 40%;
  12       text-align: center;
  13       }
  14     </style>
  15     <script type="text/javascript" src="string-lerp.js"></script>
  16     <script>
  17       var DEMOS = [
  18           ["explore", "implode"],
  19           ["Do you like green eggs and ham?", "I do not like them, Sam-I-am."],
  20           ["apple core", "core dump"],
  21           ["rgb(255, 0, 0)", "rgb(0, 128, 255)"],
  22           ["chicken wing", "buffalo wing"],
  23           ["1.5 + 1.5 ≈ 3", "3.0 + 7.0 ≈ 10"],
  24           ["<(o.o<)    v(._.)v", "(>o.o)>    ^(*_*)^"],
  25           ["ZALGO̸", "ZA̢LG͜O"],
  26           ["", "Typing, one letter at a time."],
  27           ["( ﾉﾟ▽ﾟ)ﾉ", "( ╯︵╰)"]
  28       ];
  29       var i = Math.floor(Math.random() * DEMOS.length);
  30
  31       function set () {
  32           var a = document.getElementById("a");
  33           var b = document.getElementById("b");
  34           var d = DEMOS[i++ % DEMOS.length];
  35           a.value = d[0];
  36           b.value = d[1];
  37           update();
  38       }
  39
  40       function escape (s) {
  41           return s.replace(/&/g, "&amp;")
  42                   .replace(/</g, "&lt;")
  43                   .replace(/>/g, "&gt;")
  44                   .replace(/ /g, "&nbsp;");
  45
  46       }
  47
  48       function update () {
  49           var p = +document.getElementById("slider").value;
  50           var a = document.getElementById("a");
  51           var b = document.getElementById("b");
  52           var e = document.getElementById("text");
  53           e.innerHTML = escape(stringLerp.lerp(a.value, b.value, p));
  54       }
  55     </script>
  56   </head>
  57   <body onload="set()">
  58     <header>
  59       <a href="/">
  60         <img src="/logotype_horizontal_1.png" class=logo alt="(◕ ヮ ◕)">
  61         <img src="/logotype_horizontal_2.png" class=optional
  62              alt="Yukkuri Games">
  63       </a>
  64       <h1>String Lerp</h1>
  65     </header>
  66     <main>
  67       <p>
  68         String Lerp is a JavaScript module to interpolate (lerp,
  69         blend, tween) between two string values, that is,
  70         progressively turn one string into another.  It
  71         uses <a href="http://en.wikipedia.org/wiki/Levenshtein_distance">Levenshtein
  72         distance</a> measurements along with other heuristics to try
  73         to blend between two strings as naturally as possible.
  74       </p>
  75       <ul class=download>
  76         <li><a href="string-lerp-1.0.0.tar.gz">string-lerp-1.0.0.tar.gz</a> (16KB)
  77         <li class=sh>npm install <a href="https://www.npmjs.org/package/string-lerp">string-lerp</a>
  78         <li class=sh><span data-optional>git clone
  79           </span><a href="http://git.yukkurigames.com/string-lerp.git">http://git.yukkurigames.com/string-lerp.git</a>
  80       </ul>
  81       <p style="text-align: center">
  82         Not really sure what that means? Try it out.
  83       </p>
  84       <div class=highlight>
  85         <div style="width: 100%; text-align: center">
  86           <input type="text" id="a" value="Do you like green eggs and ham?"
  87                  oninput="update();">
  88           <input type="text" id="b" value="I do not like them, Sam-I-am."
  89                  oninput="update();">
  90         </div>
  91         <input id=slider type=range value=0.5 max=1.00 step=0.00390625
  92                oninput="update();"
  93                style="width: 80%; margin: 1em auto; display: block;">
  94         <div id=text style="font-size: 1.5em; text-align: center; min-height: 1.5em;">
  95         </div>
  96         <div style="text-align: center">
  97           <a onclick="set();">Try a different string pair</a>
  98         </div>
  99       </div>
 100       <h2>API</h2>
 101       <p>In a browser, use</p>
 102       <pre><code>&lt;script type="text/javascript" src="string-lerp.js"&gt;&lt;/script&gt;</code></pre>
 103       <p>In Node.js and other non-browser environments,</p>
 104       <pre><code>var stringLerp = require("./string-lerp")</code></pre>
 105
 106       <p>Then,</p>
 107       <pre><code>var result = stringLerp.lerp(source, target, amount);
 108     // `source' is the string to start with
 109     // `target' is the string to finish with
 110     // `amount' is an amount to edit the strings, between 0 and 1,
 111     //          e.g. 0.23 = 23% from source to target</code></pre>
 112       <p>
 113         The internal <code>diff</code> and <code>patch</code> routines
 114         are also exposed, as <code>diffLerp</code> is too slow for
 115         very long strings unless you compute and store the diff list
 116         ahead of time.
 117       </p>
 118       <h2>License</h2>
 119       <div class=copyright>
 120         2014 Joe Wreschnig
 121         <p>
 122           String Lerp is free software. You can redistribute it and/or
 123           modify it under the terms of the GNU General Public License
 124           as published by the Free Software Foundation;
 125           either <a href="http://www.gnu.org/licenses/gpl-2.0.html">version
 126           2 of the License</a>, or (at your
 127           option) <a href="http://www.gnu.org/licenses/gpl.html">any
 128           later version</a>.
 129         </p>
 130       </div>
 131     </main>
 132   </body>
 133 </html>