Testing the performance of moving 5000 circle nodes through direct update of their X/Y properties. The performance is far better than updating the "translate" of a group containing the CircleNode, see: https://play.data2viz.io/sketches/XYdjOg/edit/
5000 circles (with direct X/Y update)
import io.data2viz.color.*
import io.data2viz.geom.*
import io.data2viz.math.*
import io.data2viz.viz.*
import io.data2viz.random.*
import kotlin.math.sin
import kotlin.math.cos
private val vizWidth = 600.0
private val vizHeight = 600.0
private var center = Point(vizWidth / 2, vizHeight / 2)
private val randomAngle = RandomDistribution.uniform(.02, 2 * PI)
private var circles = 5000
private val angles = (0 .. circles).map { randomAngle().rad }
private var frame = .0
private fun getX(angle: Angle) = center.x + (sin(angle.rad) * sin(cos(angle.rad) + frame) * center.x)
private fun getY(angle: Angle) = center.y + (cos(angle.rad) * cos(sin(angle.rad) + frame) * center.y)
fun main() {
viz {
size = size(vizWidth, vizHeight)
val elements = angles.map {
circle {
x = getX(it)
y = getY(it)
radius = 5.0
fill = Colors.Web.red
}
}
animation {
frame += 0.01
elements.forEachIndexed { index, circle ->
circle.x = getX(angles[index])
circle.y = getY(angles[index])
}
}
}.bindRendererOnNewCanvas()
}
Sketch created by
pierre
comments