4 <title>String Linear Interpolation Example
</title>
5 <meta charset=
"utf-8" />
14 <script type=
"text/javascript" src=
"string-lerp.js"></script>
17 [
"Do you like green eggs and ham?",
"I do not like them, Sam-I-am."],
18 [
"apple core",
"core dump"],
19 [
"rgb(255, 0, 0)",
"rgb(0, 128, 255)"],
20 [
"1.5 + 1.5 = 3.0",
"3 + 7 = 10"],
21 [
"ZALGO̸",
"ZA̢LG͜O"],
22 [
"",
"Typing, one letter at a time."],
23 [
"( ノ゚▽゚)ノ",
"( ╯︵╰)"]
25 var i = Math.floor(Math.random() * DEMOS.length);
28 var a = document.getElementById(
"a");
29 var b = document.getElementById(
"b");
30 var d = DEMOS[i++ % DEMOS.length];
37 var p = +document.getElementById(
"slider").value;
38 var a = document.getElementById(
"a");
39 var b = document.getElementById(
"b");
40 var e = document.getElementById(
"text");
41 e.textContent = stringLerp.lerp(a.value, b.value, p);
44 var p = +document.getElementById(
"slider").value;
45 var a = document.getElementById(
"a");
46 var b = document.getElementById(
"b");
47 var e = document.getElementById(
"text");
48 e.textContent = stringLerp.lerp(a.value, b.value, p);
53 <div style=
"text-align: center; margin: 1em">
54 Enter source and target text, and drag the slider to interpolate
57 <div style=
"width: 70%; margin: auto; column-spacing: 10%;">
58 <input type=
"text" id=
"a" value=
"Do you like green eggs and ham?"
60 <input type=
"text" id=
"b" value=
"I do not like them, Sam-I-am."
63 <input id=
"slider" type=
"range" value=
0.5 max=
1.00 step=
0.00390625
65 style=
"width: 80%; margin: 1em auto; display: block;">
66 <div id=
"text" style=
"width: 75%; margin: 0.5em auto; font-size: 2em; text-align: center; min-height: 1.5em;">
68 <div style=
"text-align: center">
69 <a href=
"javascript:set();">Try a different string pair
</a>