input[type=text] {
width: 40%;
display: table-cell;
- margin: 2.5%;
+ margin-left: 5%;
text-align: center;
}
</style>
<script type="text/javascript" src="string-lerp.js"></script>
<script>
- function update (p) {
+ 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");
var b = document.getElementById("b");
var e = document.getElementById("text");
}
</script>
</head>
- <body onload="update(0.5)">
- <div style="width: 70%; margin: 3em 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.">
+ <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?"
+ 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: 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>
- <div id="text" style="font-size: 3em; text-align: center;"></div>
- <input type="range" value=0.5 max=1.00 step=0.00390625 oninput="update(this.value);"
- style="width: 80%; margin: 3em auto; display: block;">
</body>
</html>
projects / string-lerp.git / blobdiff