Capturing Feelings with Code: How to Create Dreamy Visuals Using Anime.js and Particles

Ever wanted to translate your emotions into a visual experience? This is the story of how one developer did just that, turning feelings inspired by the anime Darling in the Franxx into a beautiful, interactive website. This article explores the creative process and the technologies used, offering insights into how you can also visualize feelings with code!

Turning Emotion into Motion: A Developer's Journey

This project isn’t just lines of code; it’s a reflection of inner feelings of motion, freedom, and softness. Inspired by the anime Darling in the Franxx, the creator sought to capture the essence of quiet energy and peace through moving particles, floating animations, and soothing colors. It's a journey of translating personal emotions into a digital canvas.

What emotions could you translate into code?

The Building Blocks of a Feeling: Tech Stack Breakdown

So, how do you turn abstract feelings into concrete visuals? Here's the breakdown of the technologies used to create this emotional experience:

• HTML5: The foundation for structuring the webpage.
• CSS3: Styling the elements, including colors and layout.
• JavaScript (ES6): Adding interactivity and dynamic behavior.
• Particles.js: Creating the gentle, chaotic movement of particles.
• Anime.js: Animating the hearts, wings, and feathers.
• Intersection Observer API: Triggering background color changes as the user scrolls through sections.
• Smooth Scroll Behavior: Ensuring smooth transitions between sections, mimicking the flow of emotions.

Code Snippets: Glimpses into the Process of Visualizing a Feeling

Here are examples of the approach to coding the feeling.

Gentle Chaos: Particles Moving Like Daydreams

The particles moving gently represent scattered thoughts, always active yet peaceful using this code example:

particlesJS ( ' particles-js ', { 
 particles: { 
 number: { value: 80}, 
 color: { value: ' #ff6b6b '}, 
 shape: { type: ' circle '}, 
 move: { speed: 2, random: true} 
} 
}); 

Breathing Hope: Animating a Heart

This Anime.js snippet creates a heart that expands and contracts, symbolizing hope and vulnerability.

anime ({ 
 targets: '.heart ', 
 scale: [ 1, 1.2, 1], 
 duration: 3000, 
 loop: true, 
 easing: ' easeInOutQuad ' 
});

Soft Transitions: Guiding the Flow of Emotion

The Intersection Observer API facilitates smooth shifts between background colors, each representing a different emotion, and creating visual section transitions.

const observer = new IntersectionObserver (( entries) => { 
 entries. forEach (( entry) => { 
 if ( entry. isIntersecting) { 
 const colors = { 
 first: ' #1a0f2e ', 
 second: ' #2d1b4e ', 
 third: ' #4a1942 ', 
 fourth: ' #6b2c70 ', 
 fifth: ' #8e3a8e ' 
}; 
 document. body. style. backgroundColor = colors [ entry. target. id]; 
} 
}); 
}, { threshold: 0.3});

Aimless Dreams: A Floating Bird Animation

The flying bird, animated with JavaScript, embodies the aimless yet continuous movement of dreams.

let birdPosition = 0; 
function animateBird () { 
 birdPosition += 0.5; 
 const yOffset = Math. sin ( birdPosition * 0.05) * 50; 
 bird. style. transform = `translateX( ${ birdPosition} px) translateY( ${ yOffset} px)`; 
 if ( birdPosition > window. innerWidth) { 
 birdPosition = - 100; 
} 
 requestAnimationFrame ( animateBird); 
} 
animateBird ();

Experience the Feeling: A Dream in Motion

See the code in action! Explore the interactive page and experience the emotions for yourself. How does it make you feel?

Tips for Expressing Your Emotions Through Code

Ready to try coding a feeling yourself? Here’s some advice:

• Focus on feelings: Prioritize the emotional impact over pixel-perfect design.
• Let animations breathe: Use animation to convey the nuance of emotions.
• Emotional Color Palettes: Use colors, speed, and flow to match your feelings.
• Code as Art: Don't just focus on the logic, but the expression of the animation as art.

Conclusion

This project demonstrates the power of code as a medium for personal expression turning feelings into animations. It invites you to experiment, to let your emotions guide your coding, and to discover the healing potential of transforming inner feelings into interactive art. Try creating dreamy JavaScript animations today.