Skip to content

Instantly share code, notes, and snippets.

@Caldis
Last active February 23, 2018 09:29
Show Gist options
  • Save Caldis/f7105c7552fbe9ee6731cb97648159de to your computer and use it in GitHub Desktop.
Save Caldis/f7105c7552fbe9ee6731cb97648159de to your computer and use it in GitHub Desktop.
Lerp curve by echart
var transition = 0.14
var threshold = 0.001
var y = [], x = []
var current = 0.01
var target = 1
// Demo Curve
// Lerp Curve
var lx = Array.from(new Array(1000), (v, i) => i/1000)
var ly = lx.map((v, i) => {
var x = v
return x * x * x * (x * (x * 6 - 15) + 10)
})
// SmoothStep Curve (3rd-order equation)
var sx3 = Array.from(new Array(1000), (v, i) => i/1000)
var sy3 = sx3.map((v, i) => {
var x = v
return 1 - x * x * x * (x * (x * 6 - 15) + 10)
})
// SmoothStep Curve (2rd-order equation)
var sx2 = Array.from(new Array(1000), (v, i) => i/1000)
var sy2 = sx2.map((v, i) => {
var x = v
return 1 - x * x * (3 - 2 * x)
})
// Interpolation Curve
var interpolation = {
lerp: (curr, target, transition) => {
var x = target - curr
return x * transition
},
smoothStep2: (curr, target) => {
var x = (target - curr)/target
return x * x * (3 - 2 * x)
},
smoothStep3: (curr, target) => {
var x = (target - curr)/target
return x * x * x * (x * (x * 6 - 15) + 10)
}
}
function iterator() {
var step = interpolation.lerp(current, target, transition)
y.push(step)
current += step
if (target-current < threshold) {
x = Array.from(new Array(y.length), (v, i) => i)
} else {
iterator()
}
}
iterator()
// Render Curve
option = {
xAxis: {
type: 'category',
data: x
},
yAxis: {
type: 'value'
},
series: [{
data: y,
type: 'line',
smooth: true
}]
};
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment