4 <title>String Linear Interpolation Example
</title>
5 <meta charset=
"utf-8" />
14 <script type=
"text/javascript" src=
"string-lerp.js"></script>
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.50 + 1.50 = 3.0",
"3 + 7 = 10"],
23 [
"<(o.o<) v(._.)v",
"(>o.o)> ^(*_*)^"],
24 [
"ZALGO̸",
"ZA̢LG͜O"],
25 [
"",
"Typing, one letter at a time."],
26 [
"( ノ゚▽゚)ノ",
"( ╯︵╰)"]
28 var i = Math.floor(Math.random() * DEMOS.length);
31 var a = document.getElementById(
"a");
32 var b = document.getElementById(
"b");
33 var d = DEMOS[i++ % DEMOS.length];
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);
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);
56 <div style=
"text-align: center; margin: 1em">
57 Enter source and target text, and drag the slider to interpolate
60 <div style=
"width: 70%; margin: auto; column-spacing: 10%;">
61 <input type=
"text" id=
"a" value=
"Do you like green eggs and ham?"
63 <input type=
"text" id=
"b" value=
"I do not like them, Sam-I-am."
66 <input id=
"slider" type=
"range" value=
0.5 max=
1.00 step=
0.00390625
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;">
71 <div style=
"text-align: center">
72 <a href=
"javascript:set();">Try a different string pair
</a>