tomevault-io 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
)
Using the Component
class DemoScene(Scene):
def construct(self):
# Create distribution
dist = DistributionPlot(
func=lambda x: norm.pdf(x, 0, 1),
x_range=(-3, 3),
color=BLUE
)
self.play(Create(dist))
# Use helper methods
area = dist.get_area(-1, 1, color=YELLOW)
self.play(FadeIn(area))
line = dist.get_vertical_line(0)
self.play(Create(line))
Component with Dynamic Updates
ValueTracker Integration
class DynamicPlot(VGroup):
"""Plot with dynamic parameter"""
def __init__(self, initial_value=1.0, **kwargs):
super().__init__(**kwargs)
# Create tracker
self.value_tracker = ValueTracker(initial_value)
# Build static parts
self.axes = Axes(x_range=[-3, 3], y_range=[0, 1])
self.add(self.axes)
# Build dynamic parts
self.curve = always_redraw(self._build_curve)
self.add(self.curve)
def _build_curve(self):
"""Rebuild curve based on current tracker value"""
sigma = self.value_tracker.get_value()
return self.axes.plot(
lambda x: norm.pdf(x, 0, sigma),
color=BLUE
)
def set_value(self, value, **kwargs):
"""Animate value change"""
return self.value_tracker.animate.set_value(value, **kwargs)
@property
def value(self):
return self.value_tracker.get_value()
Usage with Animation
class DynamicScene(Scene):
def construct(self):
plot = DynamicPlot(initial_value=1.0)
self.add(plot)
# Animate parameter change
self.play(plot.set_value(0.5), run_time=2)
self.play(plot.set_value(2.0), run_time=2)
Encapsulated Coordinate System
class PlotSystem(VGroup):
"""Coordinate system with encapsulated plotting"""
def __init__(self, x_range, y_range, **kwargs):
super().__init__(**kwargs)
self.axes = Axes(
x_range=x_range,
y_range=y_range,
tips=False
)
self.add(self.axes)
self.plots = VGroup()
self.add(self.plots)
def c2p(self, x, y):
"""Convert coordinates to point"""
return self.axes.c2p(x, y)
def p2c(self, point):
"""Convert point to coordinates"""
return self.axes.p2c(point)
def plot(self, func, x_range=None, **kwargs):
"""Add a plot to the system"""
plot = self.axes.plot(func, x_range=x_range, **kwargs)
self.plots.add(plot)
return plot
def add_point(self, x, y, **kwargs):
"""Add a point to the system"""
point = Dot(self.c2p(x, y), **kwargs)
self.add(point)
return point
def add_data(self, data, **kwargs):
"""Add scatter points from data"""
points = VGroup(*[
Dot(self.c2p(x, y), **kwargs)
for x, y in data
])
self.add(points)
return points
Component Factory Pattern
class ComponentFactory:
"""Factory for creating styled components"""
# Shared configuration
COLORS = {
"primary": BLUE,
"secondary": ORANGE,
"accent": PURPLE
}
@classmethod
def create_labeled_circle(cls, label_text, radius=0.5, color="primary"):
"""Create a circle with centered label"""
group = VGroup()
circle = Circle(radius=radius, color=cls.COLORS[color])
label = Text(label_text, font_size=24)
label.move_to(circle)
group.add(circle, label)
return group
@classmethod
def create_labeled_box(cls, title, content, width=3, color="primary"):
"""Create a box with title and content"""
group = VGroup()
box = Rectangle(width=width, height=2, color=cls.COLORS[color])
title_text = Text(title, font_size=20, weight=BOLD)
content_text = Text(content, font_size=16)
title_text.next_to(box, UP, buff=0.1, aligned_edge=LEFT)
content_text.move_to(box)
group.add(box, title_text, content_text)
return group
Hierarchical Components
class NeuralNetworkLayer(VGroup):
"""Single layer of neurons"""
def __init__(self, n_neurons, radius=0.3, **kwargs):
super().__init__(**kwargs)
self.neurons = VGroup(*[
Circle(radius=radius, color=WHITE)
for _ in range(n_neurons)
]).arrange(DOWN, buff=0.5)
self.add(self.neurons)
def get_neuron(self, index):
return self.neurons[index]
class NeuralNetwork(VGroup):
"""Complete neural network visualization"""
def __init__(self, layer_sizes, **kwargs):
super().__init__(**kwargs)
# Create layers
self.layers = VGroup(*[
NeuralNetworkLayer(size)
for size in layer_sizes
]).arrange(RIGHT, buff=2)
# Create connections
self.connections = VGroup()
for i in range(len(self.layers) - 1):
layer_connections = self._connect_layers(
self.layers[i],
self.layers[i + 1]
)
self.connections.add(layer_connections)
self.add(self.connections, self.layers)
def _connect_layers(self, layer1, layer2):
"""Create arrows between all neurons in adjacent layers"""
arrows = VGroup()
for n1 in layer1.neurons:
for n2 in layer2.neurons:
arrow = Arrow(
n1.get_right(),
n2.get_left(),
buff=0.05,
stroke_width=1
)
arrows.add(arrow)
return arrows
Best Practices
1. Single Responsibility
Each component should do one thing well:
# Good: Focused component
class AxisLabels(VGroup):
"""Just handles axis labels"""
pass
# Bad: Doing too much
class PlotWithLabelsAndLegendAndTitle(VGroup):
pass
2. Configurable Defaults
class FlexibleComponent(VGroup):
DEFAULT_COLOR = BLUE
DEFAULT_SIZE = 1.0
def __init__(self, color=None, size=None, **kwargs):
super().__init__(**kwargs)
self.color = color or self.DEFAULT_COLOR
self.size = size or self.DEFAULT_SIZE
3. Helper Methods
class PlotComponent(VGroup):
def get_point_at(self, x):
"""Get point on plot at x value"""
pass
def highlight_region(self, x1, x2):
"""Highlight a region of the plot"""
pass
def add_annotation(self, x, text):
"""Add text annotation at x"""
pass
4. Clean Naming
# Public attributes: no underscore
self.axes
self.curve
# Private/internal: leading underscore
self._temp_points
self._cached_values
# Methods: verbs for actions
def get_area(self, ...):
def create_label(self, ...):
def update_curve(self, ...):
5. Documentation
class WellDocumentedComponent(VGroup):
"""Brief description of component.
Longer description explaining use case and behavior.
Args:
param1: Description of param1
param2: Description of param2
Attributes:
axes: The underlying Axes object
curve: The plotted curve
Example:
>>> comp = WellDocumentedComponent(1.0, "label")
>>> self.play(Create(comp))
"""
Converted and distributed by TomeVault — claim your Tome and manage your conversions.