How to obtain 3D plot animation with multiple trajectories

šŸ“Š Plotly Python
#1

Hi all,

I am trying to plot a 3D animation which contains two trajectories.

For the first trajectory,

import numpy as np
import plotly.graph_objects as go

fig = go.Figure(
data=[go.Scatter3d(x=env.xsuc, y=env.ysuc, z=env.zsuc,
mode=ā€œmarkersā€,marker=dict(color=ā€œdarkolivegreenā€, size=10)),
])

fig.update_layout(

      scene = dict(
    
    xaxis=dict(range=[0.2, 3.8],title="X-axis", autorange=False),
    yaxis=dict(range=[-0.334,+0.334],title="Y-axis", autorange=False),
    zaxis=dict(range=[0.7, 1.1],title ="Z-axis", autorange=False),
    ))

frames = [go.Frame(data= [go.Scatter3d(
x=env.xsuc[:k+1],
y=env.ysuc[:k+1],
z=env.zsuc[:k+1])],

               traces= [0],
               name=f'frame{k}'      
              )for k  in  range(len(env.xsuc))]

fig.update(frames=frames)

fig.update_layout(updatemenus=[dict(type=ā€œbuttonsā€,
buttons=[dict(label=ā€œPlayā€,method=ā€œanimateā€,args=[None, dict(frame=dict(redraw=True,
fromcurrent=True, mode=ā€˜immediateā€™)) ])])])

fig.show()

Note: env.xsuc,env,env.ysuc,env.zsuc ,env.x_par, y=env.y_par, z=env.z_par,are taken as lists in the code.

The first trajectory code executes and I have an animation in the following way(JPEG file)

3D_plot
3D_plot2500Ɨ1080 50.3 KB

I am able to obtain the animation for second trajectory as like the trajectory one as shown above.

However, I am unable to include the following second trajectory within the same animation plot

For second trajectory

fig = go.Figure(
data=[go.Scatter3d(x=env.x_par, y=env.y_par, z=env.z_par,
mode=ā€œmarkersā€,marker=dict(color=ā€œgoldā€, size=10,symbol=ā€œsquareā€)),
])

fig.update_layout(

      scene = dict(
    
    xaxis=dict(range=[0.2, 3.8],title="X-axis", autorange=False),
    yaxis=dict(range=[-0.334,+0.334],title="Y-axis", autorange=False),
    zaxis=dict(range=[0.7, 1.1],title ="Z-axis", autorange=False),
    ))

frames = [go.Frame(data= [go.Scatter3d(
x=env.x_par[:k+1],
y=env.y_par[:k+1],
z=env.z_par[:k+1])],

               traces= [0],
               name=f'frame{k}'      
              )for k  in  range(len(env.xsuc))]

fig.update(frames=frames)

fig.update_layout(updatemenus=[dict(type=ā€œbuttonsā€,
buttons=[dict(label=ā€œPlayā€,
method=ā€œanimateā€,
args=[None, dict(frame=dict(redraw=True,fromcurrent=True, mode=ā€˜immediateā€™)) ])])])

fig.show()

I am presently trying to integrate the two trajectory codes and obtain one single animation plot for two trajectories.
Any help is highly appreciated, Thank you in advance!

#2

@harsh
To get your animation work, I rearranged your code and defined the frames for the two traces animation:

fig = go.Figure(go.Scatter3d(x=env.xsuc, y=env.ysuc, z=env.zsuc, #this is the trace 0
                        mode='markers',marker=dict(color='darkolivegreen', size=10)))
fig.add_scatter3d(x=env.x_par, y=env.y_par, z=env.z_par,  #this is the trace 1
                  mode='markers',marker=dict(color='gold', size=10,symbol='square'))
N = len(env.xsuc)#it must be equal with the len(env.x_par)
frames = [go.Frame(data= [go.Scatter3d(x=env.xsuc[:k+1],
                                 y=env.ysuc[:k+1],
                                 z=env.zsuc[:k+1]),
                          go.Scatter3d(x=env.x_par[:k+1],
                            y=env.y_par[:k+1],
                            z=env.z_par[:k+1])],
                   name=f'frame{k}',
                   traces=[0,1]) for k in range(N)]  # traces =[0,1] tells plotly.js  that the first element in frame data
                                                     #updates trace 0, while the second the trace 1
fig.update(frames=frames)
fig.update_layout(updatemenus=[dict(type='buttons',
                                    buttons=[dict(label='Play',
                                                  method='animate',
                                                  args=[None, 
                                                        dict(frame=dict(redraw=True,
                                                                        fromcurrent=True, 
                                                                        mode=ā€˜immediateā€™)) ])])])
fig.update_scenes(xaxis=dict(range=[0.2, 3.8],title="X-axis", autorange=False),
                  yaxis=dict(range=[-0.334,+0.334],title="Y-axis", autorange=False),
                  zaxis=dict(range=[0.7, 1.1],title ="Z-axis", autorange=False))
#3

Thank you very much!That worked in my implementation.