component-design

Component Design

Patterns for creating reusable, well-structured Manim components.

VGroup Subclass Pattern

Basic Structure

class MyComponent(VGroup):
    """Reusable visualization component"""

    def __init__(self, param1, param2, **kwargs):
        super().__init__(**kwargs)

        # Store parameters
        self.param1 = param1
        self.param2 = param2

        # Build component
        self._build()

    def _build(self):
        """Construct the component's mobjects"""
        # Create child mobjects
        self.part_a = Circle(radius=self.param1)
        self.part_b = Square(side_length=self.param2)

        # Position relative to each other
        self.part_b.next_to(self.part_a, RIGHT)

        # Add to self (VGroup)
        self.add(self.part_a, self.part_b)

Usage

# Create instance
component = MyComponent(1.0, 0.5)

# It's a VGroup, so all VGroup methods work
component.scale(0.5)
component.move_to(LEFT * 2)
component.set_color(BLUE)

# Animate
self.play(Create(component))
self.play(component.animate.shift(RIGHT * 3))

Real-World Example: Distribution Plot

from scipy.stats import norm

class DistributionPlot(VGroup):
    """Self-contained probability distribution visualization"""

    def __init__(
        self,
        func,                # Distribution function
        x_range=(-3, 3),     # Domain
        color=BLUE,
        show_axes=True,
        **kwargs
    ):
        super().__init__(**kwargs)

        self.func = func
        self.x_min, self.x_max = x_range
        self.color = color

        self._build(show_axes)

    def _build(self, show_axes):
        # Calculate y range from function
        x_vals = np.linspace(self.x_min, self.x_max, 100)
        y_vals = [self.func(x) for x in x_vals]
        y_max = max(y_vals) * 1.1

        # Create axes
        self.axes = Axes(
            x_range=[self.x_min, self.x_max, 1],
            y_range=[0, y_max, y_max/4],
            x_length=6,
            y_length=4,
            tips=False
        )

        # Create plot
        self.curve = self.axes.plot(self.func, color=self.color)

        # Add to component
        if show_axes:
            self.add(self.axes)
        self.add(self.curve)

    # Helper methods
    def get_point(self, x):
        """Get point on curve at x value"""
        return self.axes.c2p(x, self.func(x))

    def get_area(self, x_start, x_end, color=None):
        """Get shaded area under curve"""
        return self.axes.get_area(
            self.curve,
            x_range=[x_start, x_end],
            color=color or self.color
        )

    def get_vertical_line(self, x, color=RED):
        """Get vertical line from x-axis to curve"""
        return DashedLine(
            start=self.axes.c2p(x, 0),
            end=self.get_point(x),
            color=color
        )