5000 circles (with direct X/Y update)
a sketch by
Pierre Mariac
Snapshot
Settings
Save
View
Editor
Details
Sign up
Log in
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 Settings
Sketch description
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/
Sketch Thumbnail
Sketch DELETE
DELETE CURRENT SKETCH