Morphing Particle Animation

AI Overview: Morphing Particle Animation

This project is an interactive 3D web application that visualizes a cloud of 12,000 particles. Its primary feature allows users to type a word into an input field, triggering the particles to smoothly transition from a rotating sphere into the shape of the entered text. After a short delay, the particles automatically morph back into their original spherical formation.

The project is built using Three.js for 3D rendering and GSAP (GreenSock Animation Platform) for handling complex animations. The user interface is overlaid on the 3D canvas using HTML and CSS, featuring a modern "glassmorphism" design with semi-transparent backgrounds and blurs.

How it Works

The core of the animation relies on a BufferGeometry which stores the positions of thousands of individual points. When the application starts, it calculates a spherical distribution for these points using trigonometry to ensure they are spread evenly across a 3D globe.

function sphericalDistribution(i) {
    const phi = Math.acos(-1 + (2 * i) / count);
    const theta = Math.sqrt(count * Math.PI) * phi;
    
    return {
        x: 8 * Math.cos(theta) * Math.sin(phi),
        y: 8 * Math.sin(theta) * Math.sin(phi),
        z: 8 * Math.cos(phi)
    };
}

This function uses mathematical formulas to determine the X, Y, and Z coordinates for each particle to form a perfect sphere.

When a user submits text, the script uses a hidden 2D HTML5 Canvas to draw the word and "scan" its pixels. It identifies which pixels are filled with color and saves those coordinates as the target destination for the 3D particles.

const imageData = ctx.getImageData(0, 0, canvas.width, canvas.height);
const pixels = imageData.data;
// ... logic to check pixel brightness ...
if (pixels[i] > threshold) {
    points.push({
        x: (x - canvas.width / 2) / (fontSize / 10),
        y: -(y - canvas.height / 2) / (fontSize / 10)
    });
}

This logic extracts the layout of the typed text by checking the brightness of pixels on a hidden canvas.

Finally, the transition between shapes is handled by GSAP. Instead of instantly snapping particles to new positions, the library interpolates the values over two seconds, creating a fluid "morphing" effect. The script loops through the particle array and creates a tween for every single coordinate.

gsap.to(particles.geometry.attributes.position.array, {
    [i]: targetPositions[i],
    [i + 1]: targetPositions[i + 1],
    [i + 2]: targetPositions[i + 2],
    duration: 2,
    ease: "power2.inOut",
    onUpdate: () => {
        particles.geometry.attributes.position.needsUpdate = true;
    }
});

This animation block tells the particles exactly where to move and ensures the 3D engine updates their positions on every frame.