kaze/orx
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

[orx-easing] Fix easeInOutQuintic, tweak demo (#233)

Browse Source
This commit is contained in:
Abe Pazos
2022-06-09 11:21:30 +00:00
committed by GitHub
parent 34914b5a47
commit 82ad35bd42
4 changed files with 161 additions and 83 deletions
Download Patch File Download Diff File Expand all files Collapse all files

119
orx-easing/src/demo/kotlin/DemoEasings01.kt
View File

@@ -1,9 +1,17 @@
import org.openrndr.application
import org.openrndr.color.ColorRGBa
import org.openrndr.extensions.SingleScreenshot
import org.openrndr.extras.easing.*
import org.openrndr.draw.loadFont
import org.openrndr.extra.shapes.grid
import org.openrndr.extras.easing.Easing
import org.openrndr.math.Vector2
import org.openrndr.math.map
/**
* # Visualizes Easing types as a graph and as motion.
*
* [grid] is used to layout graphs on rows and columns.
*
*/
fun main() {
application {
configure {
@@ -11,63 +19,60 @@ fun main() {
height = 1080
}
program {
fun drawEasing(f: EasingFunction) {
drawer.stroke = ColorRGBa.PINK
val points = mutableListOf<Vector2>()
for (i in 0 .. 40) {
val y = 40.0 - f(i / 40.0, 0.0, 1.0, 1.0) * 40.0
points.add(Vector2(i*10.0, y))
}
drawer.lineStrip(points)
drawer.stroke = ColorRGBa.GRAY
drawer.lineSegment(0.0, 40.0, 400.0, 40.0)
drawer.lineSegment(0.0, 20.0, 400.0, 20.0)
}
extend {
drawer.stroke = ColorRGBa.WHITE
val font = loadFont("demo-data/fonts/IBMPlexMono-Regular.ttf", 20.0)
val functions = listOf(
::easeLinear,
::easeQuadIn,
::easeQuadOut,
::easeQuadInOut,
::easeCubicIn,
::easeCubicOut,
::easeCubicInOut,
::easeCircIn,
::easeCircOut,
::easeCircInOut,
::easeQuartIn,
::easeQuartOut,
::easeQuartInOut,
::easeExpoIn,
::easeExpoOut,
::easeExpoInOut,
::easeQuintIn,
::easeQuintOut,
::easeQuintInOut,
::easeSineIn,
::easeSineOut,
::easeSineInOut,
::easeBackIn,
::easeBackOut,
::easeBackInOut,
::easeElasticIn,
::easeElasticOut,
::easeElasticInOut,
::easeBounceIn,
::easeBounceOut,
::easeBounceInOut
)
var i = 0
for (f in functions) {
drawEasing(f)
drawer.translate(0.0, 50.0)
i ++
if (i > 19) {
drawer.translate(450.0, -20 * 50.0)
i = 0
// grid `columns * rows` must be >= Easing.values().size
val grid = drawer.bounds.grid(
3, 11, 10.0, 10.0, 10.0, 10.0
).flatten()
// make pairs of (easing function, grid rectangle)
val pairs = Easing.values() zip grid
extend {
// ~4 seconds animation loop
val animT = (frameCount % 240) / 60.0
pairs.forEach { (easing, gridRect) ->
// background rectangle
drawer.stroke = null
drawer.fill = ColorRGBa.WHITE.opacify(0.3)
drawer.rectangle(gridRect)
// graph
drawer.stroke = ColorRGBa.PINK
val points = List(40) {
val curveT = it / 39.0
gridRect.position(
curveT, easing.function(curveT, 1.0, -1.0, 1.0)
)
}
drawer.lineStrip(points)
// label
drawer.fill = ColorRGBa.WHITE
drawer.stroke = null
drawer.fontMap = font
drawer.text(
easing.name,
// text position rounded for crisp font rendering
gridRect.position(0.02, 0.25).toInt().vector2
)
// animation
drawer.fill = ColorRGBa.WHITE.opacify(
when { // 4-stage opacity
animT > 3.0 -> 0.0 // invisible
animT > 2.0 -> 3.0 - animT // fade-out
animT < 1.0 -> animT // fade-in
else -> 1.0 // visible
}
)
// move only while visible (when loop time in 1.0..2.0)
val t = animT.map(1.0, 2.0, 0.0, 1.0, true)
val xy = Vector2(1.0, easing.function(t, 1.0, -1.0, 1.0))
drawer.circle(gridRect.position(xy), 5.0)
}
}
}