Animation: re-using objects

import io.data2viz.color.* import io.data2viz.geom.* import io.data2viz.math.* import io.data2viz.viz.* import kotlin.math.* fun main() { val width = 300.0 val height = 300.0 lateinit var dots: List<CircleNode> var frame = 1.0 viz { size = size(width, height) group { transform { translate(width / 2.0, height / 2.0) } dots = (0..43).map { circle { fill = Colors.hsl(it.rad, 50.pct, 50.pct) radius = it / 3.0 } } } animation { frame += .002 dots.forEachIndexed { index, dot -> dot.x = sin(frame * index) * index * 2.0 dot.y = cos(frame * index) * index * 2.0 } } }.bindRendererOnNewCanvas() }
pierre avatar

Sketch created by

pierre

A very simple animation, showing how to keep references to your objects, update them before rendering the visual again. Note that there is no call to the "clear()" function, nothing is recreated, the circles just move a bit every frame of the animation. You can call the "render()" function or you can use "animation" and let the library creates a timer on your behalf and calls the render() for you.

comments