AI Emotion Particles - xelsed.ai

function getApiKey(){
  return atob(encoded).split('').map(c=>String.fromCharCode(c.charCodeAt(0)^key)).join('');
}

function setup() {
  createCanvas(windowWidth, windowHeight);
  API_KEY = getApiKey(); // Decrypt the API key

  // Create text input field
  emotionInput = createInput('');
  emotionInput.attribute('placeholder', 'Type something to express your emotion...');
  emotionInput.input(analyzeEmotion); // Call analyzeEmotion on every keystroke

  // Create emotion display element (div)
  emotionDisplay = createDiv(currentEmotion);
  emotionDisplay.id('emotion-display');

  // Initialize 200 particles with the default emotion's configuration
  for (let i = 0; i < 200; i++) {
    particles.push(new Particle(random(width), random(height), emotionConfigs[currentEmotion]));
  }
}

function draw() {
  // Semi-transparent background for a fading trail effect
  background(0, 0, 0, 20);

  // Update and display particles
  for (let i = particles.length - 1; i >= 0; i--) {
    particles[i].update();
    particles[i].display();
    if (particles[i].isDead()) {
      // Reinitialize dead particles based on the current emotion
      particles[i] = new Particle(random(width), random(height), emotionConfigs[currentEmotion]);
    }
  }
}

async function analyzeEmotion() {
  const text = emotionInput.value();

  // If input is empty, default to calm
  if (text.trim() === '') {
    currentEmotion = "calm";
    emotionDisplay.html(currentEmotion);
    return;
  }

  // Prevent multiple API calls if one is already in progress
  if (loading) {
    console.log("Still loading, please wait...");
    return;
  }

  loading = true;
  emotionDisplay.html(`Loading...`); // Indicate loading state to the user

  try {
    const response = await fetch('https://api.openai.com/v1/chat/completions', {
      method: 'POST',
      headers: {
        'Content-Type': 'application/json',
        'Authorization': 'Bearer ' + API_KEY // Use the decrypted API key
      },
      body: JSON.stringify({
        model: 'gpt-4o-mini', // Cost-effective and capable model
        messages: [{
          role: 'user',
          content: 'Return ONLY one word: happy, sad, angry, calm, or excited based on this text: ' + text
        }],
        max_tokens: 10 // Strongly encourages a single-word response
      })
    });

    // Check if the API request was successful
    if (!response.ok) {
      const errorData = await response.json();
      throw new Error(`OpenAI API error: ${response.status} - ${errorData.error ? errorData.error.message : 'Unknown error'}`);
    }

    const data = await response.json();
    let detectedEmotion = data.choices[0].message.content.toLowerCase().trim();

    // Validate and normalize the detected emotion
    const validEmotions = Object.keys(emotionConfigs);
    if (validEmotions.includes(detectedEmotion)) {
      currentEmotion = detectedEmotion;
    } else {
      console.warn(`Detected emotion "${detectedEmotion}" is not one of the expected values. Defaulting to calm.`);
      currentEmotion = "calm";
    }

    emotionDisplay.html(currentEmotion); // Update the displayed emotion

  } catch (error) {
    console.error("Error analyzing emotion:", error);
    currentEmotion = "calm"; // Default to calm on API error
    emotionDisplay.html(`Error: ${error.message || 'Could not analyze'}`);
  } finally {
    loading = false; // Reset loading flag
  }
}

function windowResized() {
  resizeCanvas(windowWidth, windowHeight);
  emotionInput.size(width - 20, 30);
}

class Particle {
  constructor(x, y, emotionConfig) {
    this.x = x;
    this.y = y;
    this.baseSpeed = emotionConfig.speedFactor;
    this.directionNoiseScale = emotionConfig.directionNoiseScale;
    this.color = emotionConfig.color;
    this.size = emotionConfig.size;
    this.lifespan = emotionConfig.life;
    this.age = 0;
    this.gravity = emotionConfig.gravity;

    // Initial velocity based on Perlin noise for organic starting movement
    this.vx = (noise(x * this.directionNoiseScale, y * this.directionNoiseScale) - 0.5) * this.baseSpeed * 2;
    this.vy = (noise(y * this.directionNoiseScale, x * this.directionNoiseScale) - 0.5) * this.baseSpeed * 2;
  }

  update() {
    // Dynamically adjust particle properties based on the current emotion
    const config = emotionConfigs[currentEmotion];
    if (config) {
      this.baseSpeed = config.speedFactor;
      this.directionNoiseScale = config.directionNoiseScale;
      this.color = config.color;
      this.size = config.size;
      this.gravity = config.gravity;
    }

    // Apply gravity
    this.vy += this.gravity;

    // Apply Perlin noise-based forces for organic, swirling movement
    const noiseForceX = (noise(this.x * this.directionNoiseScale, this.y * this.directionNoiseScale, frameCount * 0.01) - 0.5) * this.baseSpeed;
    const noiseForceY = (noise(this.y * this.directionNoiseScale, this.x * this.directionNoiseScale, frameCount * 0.01) - 0.5) * this.baseSpeed;

    this.vx += noiseForceX * 0.1; // Small influence to avoid overly wild movement
    this.vy += noiseForceY * 0.1;

    // Add some drag/friction
    this.vx *= 0.98;
    this.vy *= 0.98;

    // Update position
    this.x += this.vx;
    this.y += this.vy;

    // Reinitialize particle if it goes off-screen
    if (this.x > width || this.x < 0 || this.y > height || this.y < 0) {
      this.x = random(width);
      this.y = random(height);
      this.age = 0;
      // Re-calculate initial velocity with current emotion config
      const currentConfig = emotionConfigs[currentEmotion];
      this.vx = (noise(this.x * currentConfig.directionNoiseScale, this.y * currentConfig.directionNoiseScale) - 0.5) * currentConfig.speedFactor * 2;
      this.vy = (noise(this.y * currentConfig.directionNoiseScale, this.x * currentConfig.directionNoiseScale) - 0.5) * currentConfig.speedFactor * 2;
    }

    this.age++;
  }

  display() {
    // Fade out particles as they age
    const alpha = map(this.age, 0, this.lifespan, 255, 0);
    const col = color(this.color);
    col.setAlpha(alpha); // Set alpha for fading effect
    fill(col);
    noStroke();
    circle(this.x, this.y, this.size);
  }

  isDead() {
    return this.age > this.lifespan;
  }
}