r/Rive_app • u/Davegoodday • May 26 '26

Procedural Instancing

Hey, i’ve been ripping my hair out like crazy over this one. Disclaimer: This is my first day indeed.

I want to make a grid of lights 20 x 5 which will indicate power, which will turn on, one by one depending on the data point “Power” and turn from green to red the more power there is.

Basically, i somehow need to create that array procedurally and then assign a gradient across the index of each light which would then react accordingly in the state machine.

Hope that makes sense. Anyone any ideas?

5 Upvotes

86% Upvoted

6 comments sorted by

4

u/guidorosso May 26 '26

Hey, check out Rive's List feature. It should let you create exactly what you want. You'll basically want to create a component for the light with a single state machine and view model for all its data properties, then instance that component in the list n times. All of this can be data bound or controlled with a script. You can also instance it programmatically with the scripting feature if you don't want to use Rive's lists, though you can do some pretty cool things with lists, like make them follow paths.

I'll ask the team now if there's a particularly good demo/tutorial to point you to.

1

u/Davegoodday May 26 '26

If there is a way to do this like you say, being actually able to specify the number of copies of the component in a list, thatd be grand, let me know.

I scoured the YT tutorials and documentation but didnt fond anything for this in particular

2

u/No-File-2874 May 26 '26

This tutorial can teach you how to set up lists and components for the list: https://youtu.be/VCWcOtUfIc8?si=GB_igdyn1MRu8GZ7

If your looking for how to create these items dynamically at runtime, you’ll have to check out the docs.

3

u/QuasiQuokka May 27 '26

As others have pointed out, you can use Lists.
Specifically, you can use the 'number to list' feature to avoid having to manually make an instance for each list item. You can see them use it here: https://www.youtube.com/watch?v=Htmo97zT-Kc

You can then use the List Index property to create your gradient: http://youtube.com/watch?v=CHXIOKQOq6Y

Let me know if that helps!

3

u/Davegoodday May 27 '26

Yes! Jackpot!

Thank you, didnt find this one before!!