Smooth Animation

📊 Plotly Python
1

Hey Everyone,

i just found out about plotly a few days ago and am extremly impressed with the libary.

I decided to use it for a homework on Particle Swarm Optimization to create an animation of how the particles move.
Here is the results so far:
https://ghis9917.github.io/UM_ARS_G8/sim_rastagrid_default_5_5.html
I case you mistrust links this picture might give you an idea on what i’m talking about:

image_5
image_51097×1008 149 KB

As you can see the animations are quite laggy and the 3D chart isn’t interactable anymore after hitting play.

The buttons through the layout:

dict(label="Play",
    method="animate",
    args=[None, dict(frame=dict(duration=5, redraw=True),
                    fromcurrent=True,
                    transition=dict(duration=0, easing='linear')
                    )]
    ),
dict(label="Pause",
    method="animate",
    args=[[None],
            dict(frame=dict(duration=0, redraw=False),
                mode='immediate',
                transition=dict(duration=0)
                )],
    )

If using redraw=False, the particles dont move at all.
Using higher values (up to 100) for transition and frame times doesn’t lead to any noticable difference.
Higher then that of course leads to a slower animation.

I create the initial plot (the scatter one) with:

fig = fig.add_trace(
    go.Surface(x=X, y=Y, z=Z, colorscale='Blues', showscale=False),
    row=1, col=1
)

fig = fig.add_trace(
    go.Scatter3d(
        x=[data.get(0)[i].get("pos")[0][0] for i in range(len(data.get(0)))],
        y=[data.get(0)[i].get("pos")[1][0] for i in range(len(data.get(0)))],
        z=[data.get(0)[i].get("alt") for i in range(len(data.get(0)))],
        hovertext=[f'team {data.get(0)[i].get("swarm")}' for i in range(len(data.get(0)))],
        hoverinfo="text",
        mode="markers",
        name=f'Particle',
        marker=dict(
            color=[Color(colors[particle_info.get("swarm")], luminance=0.3).get_hex() if particle_info.get(
                "best") else colors[particle_info.get("swarm")] for particle_info in data.get(0)],
            size=10)
    ),
    row=1, col=1
)

Replacing the get(0) with get(f) for the frames are consequently how i created the frames.

The linked visual surface plot is created using 300 granularity for X, Y, Z and changing that value doens’t change the smoothness of the animation so i stiked with the smoother plot.

The only thing i found is that the slider slows down the animation which i took from i don’t know where:

sliders_dict = {
    "active": 0,
    "yanchor": "top",
    "xanchor": "left",
    "currentvalue": {
        "font": {"size": 20},
        "prefix": "Generation:",
        "visible": True,
        "xanchor": "right"
    },
    "transition": dict(duration=5, easing='linear'),
    "pad": {"b": 10, "t": 50},
    "len": 0.9,
    "x": 0.1,
    "y": 0,
    "steps": [
        {"args": [
            [k],
            {"frame": dict(duration=5, redraw=True),
                "mode": "immediate",
                "transition": dict(duration=0, easing='linear')}
        ],
            "label": k,
            "method": "animate"} for k in range(len(data))
    ]
}

Tell me if i forgot any relevant info and i’m sorry that i didn’t create a minimal example.
My biggest suspect is that plotly just isn’t made for such applications.

If my prof finds this, hello Dr. Rico :wave:.

Thank You for any Ideas.

2

Hey! Were you able to figure it out? I’m also doing a similar assignment lol and was wondering if it was possible.