Have you ever wondered how WobblePic turns a flat, static image into something that wobbles, jiggles, and bounces like jelly? The secret lies in a physics simulation technique called the mass-spring system — a well-known approach in computer graphics for simulating soft-body dynamics.

In this article, we’ll explore how WobblePic’s physics engine works under the hood, from mesh generation to real-time GPU rendering.

What Is a Mass-Spring System?

A mass-spring system is a physics model where an object is represented as a collection of point masses connected by springs. Each mass has a position, velocity, and acceleration. Each spring exerts forces on the masses it connects, pulling them together when stretched and pushing them apart when compressed.

This model is widely used in computer graphics to simulate cloth, soft bodies, hair, and other deformable objects. It strikes an excellent balance between physical accuracy and computational efficiency, making it ideal for real-time applications.

The Core Equations

At the heart of the simulation are two fundamental physics principles:

Hooke’s Law governs how springs behave:

F = -k × (x - x₀)

Where k is the spring stiffness, x is the current length, and x₀ is the rest length. This creates the restoring force that makes the image “spring back” after being pulled.

Newton’s Second Law determines how masses move:

F = m × a

Each mass point accumulates forces from all connected springs, plus damping forces that gradually slow down the motion (preventing infinite oscillation), and then updates its velocity and position accordingly.

How WobblePic Builds the Mesh

When you load an image into WobblePic, the first step is converting the flat image into a deformable mesh.

Step 1: Grid Generation

The image is divided into a grid of triangles. Each vertex of the triangle becomes a mass point, and each edge becomes a spring. The density of the grid determines how detailed the deformation will be — more vertices mean smoother wobbles but require more computation.

WobblePic uses an adaptive approach: the grid resolution is adjusted based on the image size and available GPU power, ensuring smooth performance across different hardware configurations.

Step 2: Spring Network

Three types of springs are used to create realistic deformation:

  • Structural springs connect adjacent vertices horizontally and vertically. They maintain the basic shape of the mesh and prevent it from collapsing.
  • Shear springs connect diagonal vertices. They resist shearing forces that would otherwise distort the mesh into a parallelogram shape.
  • Bend springs connect vertices that are two positions apart. They add resistance to bending, giving the mesh a sense of stiffness that prevents overly floppy behavior.

This combination of spring types creates a mesh that deforms naturally — it stretches, compresses, and bends in a physically plausible way.

Step 3: Boundary Constraints

The edges of the image (or the boundaries of a segmented region) need special treatment. WobblePic pins certain vertices along the boundary to prevent the entire mesh from flying off the screen when you drag it. These pinned vertices act as anchor points, while the interior vertices are free to wobble.

Real-Time Simulation Loop

Once the mesh is set up, WobblePic runs a continuous simulation loop:

  1. Force accumulation: For each mass point, calculate the total force from all connected springs, damping, gravity (if enabled), and user interaction (mouse dragging).

  2. Integration: Update each mass point’s velocity and position using numerical integration. WobblePic uses a semi-implicit Euler method, which provides a good balance between stability and performance.

  3. Constraint solving: Apply boundary constraints and collision detection to prevent the mesh from self-intersecting or moving out of bounds.

  4. Rendering: Map the deformed mesh back to the original image texture and render it to the screen.

This entire loop runs at 60+ frames per second, creating the smooth, responsive wobble effect you see when interacting with images.

The Role of Damping

Without damping, a wobbling image would oscillate forever — like an ideal spring that never stops bouncing. In reality, we want the wobble to gradually settle down, mimicking the behavior of real-world materials like jelly or rubber.

WobblePic applies two types of damping:

  • Velocity damping: A force proportional to (and opposing) each mass point’s velocity. This simulates air resistance and internal friction.
  • Spring damping: A force proportional to the rate of change of each spring’s length. This simulates the energy loss within the material itself.

By adjusting these damping parameters, WobblePic can simulate different materials — from a stiff rubber ball (high stiffness, high damping) to a wobbly jelly (low stiffness, low damping).

GPU-Accelerated Rendering

Physics simulation alone doesn’t create the visual effect — the deformed mesh needs to be rendered efficiently. WobblePic leverages GPU acceleration to render the deformed image in real time.

The rendering pipeline works as follows:

  1. Texture mapping: The original image is used as a texture. Each vertex in the deformed mesh has UV coordinates that map back to the original image pixels.

  2. Triangle rasterization: The GPU draws each triangle of the deformed mesh, interpolating the texture coordinates across the triangle’s surface.

  3. Smooth interpolation: Bilinear filtering ensures that the deformed image looks smooth rather than pixelated, even when stretched significantly.

This GPU-based approach means that WobblePic can handle high-resolution images without sacrificing frame rate — the heavy lifting of rendering millions of pixels is offloaded to the graphics card.

AI Segmentation Integration

One of WobblePic’s most powerful features is its integration with SAM2 (Segment Anything Model 2) for AI-powered image segmentation. But how does segmentation interact with the physics simulation?

When you segment an object in an image, WobblePic creates a separate mesh for that region. This means:

  • The segmented object wobbles independently from the background
  • You can drag and wobble just the segmented part
  • Different regions can have different physics parameters
  • The boundary between segments creates a natural visual separation

This combination of AI segmentation and physics simulation is what makes WobblePic unique — you’re not just wobbling an entire image, you’re interacting with individual objects within it.

Performance Considerations

Running a real-time physics simulation with hundreds or thousands of mass points requires careful optimization:

  • Spatial locality: Mass points and springs are stored in contiguous memory to maximize CPU cache efficiency.
  • Parallel updates: Force calculations for independent mass points can be parallelized across multiple CPU cores.
  • Adaptive time stepping: The simulation adjusts its time step based on the current frame rate, ensuring stability even on slower hardware.
  • LOD (Level of Detail): For very large images, the mesh resolution is reduced in areas far from the interaction point, saving computation where precision matters less.

Conclusion

WobblePic’s physics simulation combines classical mechanics (mass-spring systems), modern GPU rendering, and AI-powered segmentation to create a unique interactive experience. What appears as a simple “wobble” on screen is actually a sophisticated real-time simulation running dozens of calculations per frame for each point in the mesh.

The beauty of this approach is its simplicity at the conceptual level — springs and masses are intuitive physical concepts — while still producing rich, complex, and delightful visual behavior. It’s a perfect example of how fundamental physics principles can be applied creatively in software to produce something fun and engaging.

Want to try it yourself? Download WobblePic and start wobbling!