How to Create a Sonic Wave Animation in Python Tkinter

In this Python Tutorial we will see How to Create a Sonic Wave animation that features animated bars with dynamic colors, glow effects, and smooth sine wave motion Using Python Tkinter.

What We Are Gonna Use In This Project:

- Python Programming Language.

- Tkinter (GUI).
- VS Editor.

Project Source Code:

import tkinter as tk
import math
import time
import colorsys

class SonicWave(tk.Canvas):

    def __init__(self, master=None, **kwargs):
        # Configuration
        self.BAR_COUNT = 7
        self.BAR_WIDTH = 5
        self.BAR_GAP = 10
        self.BAR_HEIGHT = 65
        self.ANIMATION_DELAY = 1500  # milliseconds for full cycle

        # Dark background color
        bg_color = "#111122"

        # Set canvas dimensions
        width = self.BAR_COUNT * (self.BAR_WIDTH + self.BAR_GAP) + 40
        height = self.BAR_HEIGHT + 60

        # Initialize the canvas with our background color
        super().__init__(master, width=width, height=height, bg=bg_color, 
                         highlightthickness=0, **kwargs)

        # Define colors
        self.colors = [
            "#00eeff",  # blue
            "#b300ff",  # purple
            "#ff00ff",  # pink
            "#0aff0a",  # green
            "#ff3300"   # orange
        ]

        # Initialize bar heights and animation state
        self.bar_heights = [0.2] * self.BAR_COUNT
        self.hue_shift = 0.0

        # Start the animation
        self.is_running = True
        self.animate()


    def get_color_with_shift(self, base_color, offset=0):
        """Apply a hue shift to a color for dynamic color effects"""
        # Convert hex to RGB
        r = int(base_color[1:3], 16) / 255.0
        g = int(base_color[3:5], 16) / 255.0
        b = int(base_color[5:7], 16) / 255.0

        # Convert RGB to HSV
        h, s, v = colorsys.rgb_to_hsv(r, g, b)
        # Apply the hue shift
        h = (h + self.hue_shift + offset) % 1.0
        # Convert back to RGB
        r, g, b = colorsys.hsv_to_rgb(h, s, v)

        # Convert to hex
        return f"#{int(r*255):02x}{int(g*255):02x}{int(b*255):02x}"

    
    def animate(self):
        """Main animation loop"""
        if not self.is_running:
            return

        self.update_bar_heights()
        self.draw_spinner()

        # Schedule the next animation frame
        self.after(30, self.animate)


    def update_bar_heights(self):
        """Update the heights of each bar based on a sine wave function"""
        current_time = time.time() * 1000  # Convert to milliseconds

        # Update each bar's height based on sine wave function
        for i in range(self.BAR_COUNT):
            # Calculate phase offset for each bar
            phase_offset = i * (math.pi / 8)

            # Use sine wave to animate heights (0.2 to 1.0 range)
            progress = (current_time % self.ANIMATION_DELAY) / self.ANIMATION_DELAY
            angle = 2 * math.pi * progress + phase_offset
            self.bar_heights[i] = 0.2 + 0.8 * abs(math.sin(angle))

        # Gradually shift the hue
        self.hue_shift = (self.hue_shift + 0.005) % 1.0




    def create_text_shadow(self, x, y, text, font_config):
        # Create shadow text (slight offset, darker color)
        shadow_color = "#555555"
        self.create_text(x+2, y+2, text=text, fill=shadow_color, font=font_config)

        # Create main text with a fixed color
        main_color = "#FFFFFF"  # Use white color
        self.create_text(x, y, text=text, fill=main_color, font=font_config)



    def draw_spinner(self):
        """Draw the spinner with visual elements"""
        # Clear the canvas
        self.delete("all")

        # Calculate layout dimensions
        total_width = self.BAR_COUNT * (self.BAR_WIDTH + self.BAR_GAP) - self.BAR_GAP
        start_x = (self.winfo_width() - total_width) // 2
        base_y = (self.winfo_height() + self.BAR_HEIGHT) // 2 - 10

        # Draw "SONIC WAVE" text label
        # Ensure the text is positioned in a visible area
        text_y = min(base_y + self.BAR_HEIGHT // 2 + 20, self.winfo_height() - 20)
        self.create_text_shadow(
            self.winfo_width() // 2, 
            text_y,
            "SONIC WAVE", 
            ("Arial", 13, "bold")
        )

        # Draw bars
        for i in range(self.BAR_COUNT):
            x = start_x + i * (self.BAR_WIDTH + self.BAR_GAP)
            height = int(self.bar_heights[i] * self.BAR_HEIGHT)
            y = base_y - height

            # Get color based on current animation state with dynamic hue shifting
            bar_color = self.get_color_with_shift(self.colors[i % len(self.colors)],
            i * 0.05)

            # Draw the bar
            self.create_rectangle(
                x, y, x + self.BAR_WIDTH, base_y,
                fill=bar_color, outline="", width=0
            )
            
            # Create a glow effect by drawing multiple rectangles
            for j in range(1, 5):
                # Create outlines for glow effect
                self.create_rectangle(
                    x - j, y - j, x + self.BAR_WIDTH + j, base_y + j,
                    outline=bar_color, width=1
                )
        

    def stop_animation(self):
        """Method to stop the animation when no longer needed"""
        self.is_running = False



class AppFrame(tk.Frame):
    """A frame to hold the spinner with UI elements"""

    def __init__(self, master=None, **kwargs):
        super().__init__(master, **kwargs)
        self.config(bg="#0d0d18", padx=25, pady=25)
        self.pack(fill=tk.BOTH, expand=True)

        # Create a background
        self.create_background()

        # Add the spinner
        self.spinner = SonicWave(self)
        self.spinner.pack(pady=10)

        # Add a version or title or any text label
        version_label = tk.Label(
            self, 
            text="v2.0", 
            bg="#0d0d18", 
            fg="#444444", 
            font=("Arial", 8)
        )
        version_label.pack(side=tk.BOTTOM, anchor=tk.SE, padx=5, pady=5)

    def create_background(self):
        """Create a background frame"""
        gradient_frame = tk.Frame(self, width=300, height=250, bg="#0d0d18")
        gradient_frame.place(x=0, y=0, relwidth=1, relheight=1)





def main():
    root = tk.Tk()
    root.title("Sonic Wave")

    # Set dark theme for the window
    root.configure(bg="#0a0a14")

    # Create our app frame
    app_frame = AppFrame(root)

    # Set window size and position
    root.geometry("300x250")
    root.eval('tk::PlaceWindow . center')  # Center the window

    # Make the window non-resizable for consistent layout
    root.resizable(False, False)

    # Handle window close event
    def on_closing():
        app_frame.spinner.stop_animation()
        root.destroy()
    
    root.protocol("WM_DELETE_WINDOW", on_closing)

    # Start the main event loop
    root.mainloop()


if __name__ == "__main__":
    main()