python-bulletml page.
[yukkurigames.com.git] / 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>