Coding a Feeling: Creating Visual Emotions with Particles, Anime.js, and JavaScript Animations

Ever felt an emotion so strong you wanted to see it? This project explores translating feelings—motion, freedom, softness, and dreaminess—into captivating visuals using code. Inspired by the anime "Darling in the Franxx," this isn't just a project; it's an emotional experience crafted with JavaScript animations.

What Does This Digital Art Represent?

• Particles: Represent scattered thoughts, gently moving, sometimes colliding, and always alive.
• Flying Birds: Symbolize dreams drifting slowly across endless skies, representing hope and freedom.
• Anime.js Animations: Hearts, wings, and feathers embody constantly moving, floating emotions.
• Smooth Scrolling: Evokes the gradual, natural flow of emotions, not sudden bursts.
• Background Changes: Different colors symbolize different feelings, which result in emotional background changes throughout the art.

Each element visualizes an internal state, transforming code into an expressive canvas.

Building an Emotion: Technologies Used

This project utilizes a blend of modern web technologies to bring feelings to life:

• HTML5: Provides the structure for the project.
• CSS3: Styles the elements and their visual presentation.
• JavaScript (ES6): Enables dynamic animations and interactions.
• Particles.js: Generates the mesmerizing particle effects.
• Anime.js: Powers the complex animations of hearts, birds, and other elements.
• Intersection Observer API: Detects when sections come into view to trigger color transitions and other effects.
• Smooth Scroll Behavior: Offers seamless navigation for a more immersive experience.

The technologies are used in harmony to give an emotional and beautiful artistic touch to the project.

Code Snippets of Feelings

Here's a glimpse into how code translates emotions into visuals:

Particles Moving Like Gentle Chaos

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

These particles aren't random. They're lively yet peaceful, resembling a daydreaming mind.

A Heart That Breathes

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

This animation represents the feeling of the heart, expanding with hope and shrinking with fear.

Soft Transitions Between Feelings (Sections)

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 });

Each background color represents a different emotion, subtle yet meaningful.

A Dream Floating Across the Sky (Flying Bird)

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();

This represents how dreams move: a little lost, a little aimless, but always progressing.

Experience the Dream

Painting Emotions with Code

Building this project evoked feelings of calmness, nostalgia, and peace. Instead of just coding a website, the goal was painting an emotion. Tiny interactions became a world of their own, inspired by the anime "Darling in the Franxx" and its themes of loneliness and hope.

Coding Your Own Feelings

If you're inspired to code a feeling, here's some advice:

• Focus on the feeling, not perfection.
• Let animations breathe for greater impact.
• Let your emotions guide the color palette and pacing.
• Remember, code can be art. It can be an emotional javascript art.

Sometimes, code transcends logic and becomes a form of expression.