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>
15 <script type=
"text/javascript" src=
"string-lerp.js"></script>
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 [
"( ノ゚▽゚)ノ",
"( ╯︵╰)"]
29 var i = Math.floor(Math.random() * DEMOS.length);
32 var a = document.getElementById(
"a");
33 var b = document.getElementById(
"b");
34 var d = DEMOS[i++ % DEMOS.length];
41 return s.replace(/&/g,
"&")
42 .replace(/
</g,
"<")
43 .replace(
/>/g,
">")
44 .replace(/ /g,
" ");
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));
60 <img src=
"/logotype_horizontal_1.png" class=logo
alt=
"(◕ ヮ ◕)">
61 <img src=
"/logotype_horizontal_2.png" class=optional
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.
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>
81 <p style=
"text-align: center">
82 Not really sure what that means? Try it out.
85 <div style=
"width: 100%; text-align: center">
86 <input type=
"text" id=
"a" value=
"Do you like green eggs and ham?"
88 <input type=
"text" id=
"b" value=
"I do not like them, Sam-I-am."
91 <input id=slider type=range value=
0.5 max=
1.00 step=
0.00390625
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;">
96 <div style=
"text-align: center">
97 <a onclick=
"set();">Try a different string pair
</a>
101 <p>In a browser, use
</p>
102 <pre><code><script
type=
"text/javascript" src=
"string-lerp.js"></script
></code></pre>
103 <p>In Node.js and other non-browser environments,
</p>
104 <pre><code>var stringLerp = require(
"./string-lerp")
</code></pre>
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>
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
119 <div class=copyright
>
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