</style>
<script type="text/javascript" src="string-lerp.js"></script>
<script>
+ var DEMOS = [
+ ["explore", "implode"],
+ ["Do you like green eggs and ham?", "I do not like them, Sam-I-am."],
+ ["apple core", "core dump"],
+ ["rgb(255, 0, 0)", "rgb(0, 128, 255)"],
+ ["chicken wing", "buffalo wing"],
+ ["1.5 + 1.5 ≈ 3", "3.0 + 7.0 ≈ 10"],
+ ["<(o.o<) v(._.)v", "(>o.o)> ^(*_*)^"],
+ ["ZALGO̸", "ZA̢LG͜O"],
+ ["", "Typing, one letter at a time."],
+ ["( ﾉﾟ▽ﾟ)ﾉ", "( ╯︵╰)"]
+ ];
+ var i = Math.floor(Math.random() * DEMOS.length);
+
+ function set () {
+ var a = document.getElementById("a");
+ var b = document.getElementById("b");
+ var d = DEMOS[i++ % DEMOS.length];
+ a.value = d[0];
+ b.value = d[1];
+ update();
+ }
+
+ function update () {
+ var p = +document.getElementById("slider").value;
+ var a = document.getElementById("a");
+ var b = document.getElementById("b");
+ var e = document.getElementById("text");
+ e.textContent = stringLerp.lerp(a.value, b.value, p);
+ }
function update () {
var p = +document.getElementById("slider").value;
var a = document.getElementById("a");
}
</script>
</head>
- <body onload="update()">
+ <body onload="set()">
<div style="text-align: center; margin: 1em">
Enter source and target text, and drag the slider to interpolate
between the two.
</div>
<div style="width: 70%; margin: auto; column-spacing: 10%;">
- <input type="text" id="a" value="Do you like green eggs and ham?">
- <input type="text" id="b" value="I do not like them, Sam-I-am.">
+ <input type="text" id="a" value="Do you like green eggs and ham?"
+ oninput="update();">
+ <input type="text" id="b" value="I do not like them, Sam-I-am."
+ oninput="update();">
</div>
<input id="slider" type="range" value=0.5 max=1.00 step=0.00390625
oninput="update();"
- style="width: 80%; margin: 2em auto; display: block;">
- <div id="text" style="width: 75%; margin: auto; font-size: 2em; text-align: center">
+ style="width: 80%; margin: 1em auto; display: block;">
+ <div id="text" style="width: 75%; margin: 0.5em auto; font-size: 2em; text-align: center; min-height: 1.5em;">
+ </div>
+ <div style="text-align: center">
+ <a href="javascript:set();">Try a different string pair</a>
</div>
</body>
</html>
projects / string-lerp.git / blobdiff