PyCafe - Dash - Frog-Car Collision Animation

app.py
bubble_animation.js
digit_model.pkl
requirements.txt
app.py
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
import dash
from dash import dcc, html
from dash.dependencies import Input, Output
import plotly.graph_objects as go
import numpy as np

# Initialize the Dash app
app = dash.Dash(__name__)

# Parameters for animation
time_points = np.linspace(0, 10, 100)
car_x = np.linspace(-10, 10, 100)
car_y = np.zeros_like(car_x)
frog_x = 0
frog_y = 0

# Blood and guts positions
blood_x = []
blood_y = []
organs_x = []
organs_y = []
smeared_frog_x = []
smeared_frog_y = []

# Define the layout of the app
app.layout = html.Div([
    html.H1("Frog Getting Run Over by a Car", style={'textAlign': 'center'}),
    dcc.Graph(id='scene-graph', style={'height': '90vh'}),
    dcc.Interval(id='interval-component', interval=100, n_intervals=0)
], style={'textAlign': 'center', 'marginTop': 50})

@app.callback(
    Output('scene-graph', 'figure'),
    [Input('interval-component', 'n_intervals')]
)
def update_graph(n_intervals):
    global blood_x, blood_y, organs_x, organs_y, smeared_frog_x, smeared_frog_y

    # Calculate current position of the car
    index = n_intervals % len(time_points)
    current_car_x = car_x[index]
    current_car_y = car_y[index]

    fig = go.Figure()

    if abs(current_car_x - frog_x) < 0.5 and index > 10:
        # Add blood and guts
        blood_x += list(frog_x + np.random.uniform(-0.5, 0.5, 50))
        blood_y += list(frog_y + np.random.uniform(-0.5, 0.5, 50))
        # Add organs
        organs_x += list(frog_x + np.random.uniform(-1, 1, 10))
        organs_y += list(frog_y + np.random.uniform(-1, 1, 10))
        # Add smeared frog body
        smeared_frog_x += list(np.linspace(frog_x, current_car_x, 50))
        smeared_frog_y += list(np.linspace(frog_y, current_car_y, 50))
        # Add "Oh no!" text
        fig.add_trace(go.Scatter(x=[frog_x], y=[frog_y + 1], mode='text',
                                 text=["Oh no!"], textfont=dict(size=30, color='red'), name='Oh no!'))

    # Add the frog
    fig.add_trace(go.Scatter(x=[frog_x], y=[frog_y], mode='markers', 
                             marker=dict(size=20, color='green', symbol='circle'), name='Frog'))

    # Add the car
    fig.add_trace(go.Scatter(x=[current_car_x], y=[current_car_y], mode='markers', 
                             marker=dict(size=30, color='red', symbol='square'), name='Car'))

    # Add the blood and guts
    if blood_x:
        fig.add_trace(go.Scatter(x=blood_x, y=blood_y, mode='markers',
                                 marker=dict(size=10, color='red', symbol='circle'), name='Blood'))

    # Add the organs
    if organs_x:
        fig.add_trace(go.Scatter(x=organs_x, y=organs_y, mode='markers',
                                 marker=dict(size=15, color='purple', symbol='x'), name='Organs'))

    # Add smeared frog body
    if smeared_frog_x:
        fig.add_trace(go.Scatter(x=smeared_frog_x, y=smeared_frog_y, mode='lines',
                                 line=dict(width=4, color='green'), name='Smeared Frog'))

    # Update layout
    fig.update_layout(
        xaxis=dict(range=[-10, 10], visible=False),
        yaxis=dict(range=[-1, 3], visible=False),
        showlegend=False,
        margin=dict(l=0, r=0, t=0, b=0),
        paper_bgcolor='white'
    )

    return fig

# Run the app
if __name__ == '__main__':
    app.run
Py.Cafe

frogger-game

Frog-Car Collision Animation - Dash
