AI Mood Color Morphing - xelsed.ai

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

function setup() {
  createCanvas(windowWidth, windowHeight);

  // Create the input field
  moodInput = createInput('Type your mood or text here...');
  moodInput.position(10, 10); // Position relative to the canvas
  moodInput.size(300, 30);
  moodInput.style('font-size', '16px');
  moodInput.style('padding', '5px');
  moodInput.style('border', 'none');
  moodInput.style('border-radius', '5px');
  moodInput.style('outline', 'none');
  moodInput.style('z-index', '1000'); // Ensure it's above the canvas

  // Attach an event listener for when the user presses Enter or tabs out
  moodInput.changed(handleInput); // https://p5js.org/reference/#/p5.Element/changed
}

function handleInput() {
  const text = moodInput.value();
  if (text.trim() !== '') { // Only call API if there's actual text
    callOpenAI(text);
  }
}

async function callOpenAI(text) {
  isLoading = true;
  moodInput.attribute('disabled', ''); // Disable input during loading
  moodInput.value('Analyzing mood...');

  const apiKey = getApiKey();
  const url = 'https://api.openai.com/v1/chat/completions';

  // Data payload for the OpenAI API request
  const data = {
    model: 'gpt-4o-mini', // Updated to gpt-4o-mini as requested
    messages: [
      {
        role: 'system',
        content: 'You are a helpful assistant that analyzes mood and provides color palettes. You must always return exactly 5 distinct hex color codes, separated by commas. Do not include any other text except the hex codes. Example: #RRGGBB, #RRGGBB, #RRGGBB, #RRGGBB, #RRGGBB'
      },
      {
        role: 'user',
        content: `Analyze the mood of this text and suggest a 5-color hex palette that matches. Text: "${text}"`
      }
    ],
    max_tokens: 100, // Limit the response length
    temperature: 0.7, // Creativity level
    response_format: { type: "text" } // Ensure the response is plain text for easier parsing
  };

  // Headers for the API request, including authorization
  const headers = {
    'Content-Type': 'application/json',
    'Authorization': `Bearer ${apiKey}`
  };

  try {
    // Send the POST request using the browser's native fetch API
    const response = await fetch(url, {
      method: 'POST',
      headers: headers,
      body: JSON.stringify(data)
    });

    if (!response.ok) { // Check for HTTP errors
      throw new Error(`HTTP error! status: ${response.status}`);
    }

    const responseData = await response.json();
    const content = responseData.choices[0].message.content; // Extract AI's generated content

    // Use a regular expression to find all valid 6-digit hex color codes in the response
    const colors = content.match(/#[0-9a-fA-F]{6}/g);

    if (colors && colors.length === 5) {
      currentPalette = colors;
      paletteGenerated = true;
      console.log('New Palette:', currentPalette);
    } else {
      console.warn('OpenAI response did not contain exactly 5 hex colors as expected:', content);
      // If parsing fails, currentPalette remains unchanged
    }
  } catch (error) {
    console.error('Error calling OpenAI API:', error);
    // If API call fails, currentPalette remains unchanged
  } finally {
    isLoading = false;
    moodInput.removeAttribute('disabled'); // Re-enable input
    moodInput.value(text); // Restore user's original text
  }
}

function draw() {
  background(0, 0, 10); // Dark background for contrast
  noFill();

  // Loading indicator
  if (isLoading) {
    fill(255);
    noStroke();
    textAlign(CENTER, CENTER); // https://p5js.org/reference/#/p5/textAlign
    textSize(24); // https://p5js.org/reference/#/p5/textSize
    text('Analyzing mood...', width / 2, height / 2); // https://p5js.org/reference/#/p5/text
    noFill();
  } else if (!paletteGenerated && moodInput.value() === 'Type your mood or text here...') {
    // Initial instruction hint
    fill(255, 180);
    noStroke();
    textAlign(CENTER, CENTER);
    textSize(18);
    text('Press Enter after typing to generate a palette.', width / 2, height / 2 + 50);
    noFill();
  }

  // Abstract morphing visual
  const numShapes = 20; // Number of concentric shapes
  const shapeSize = min(width, height) * 0.15; // Base size of the shapes
  const offset = frameCount * 0.005; // Time offset for noise and animation

  for (let i = 0; i < numShapes; i++) {
    const colorIndex = i % currentPalette.length; // Cycle through the palette colors
    stroke(currentPalette[colorIndex]); // Set stroke color
    strokeWeight(map(i, 0, numShapes, 1, 5)); // Gradually increasing stroke weight

    beginShape(); // Start drawing a custom shape
    for (let j = 0; j < 100; j++) { // 100 vertices for a smooth curve
      const angle = map(j, 0, 99, 0, TWO_PI); // Angle from 0 to 360 degrees
      const r = map(noise(i * 0.1, j * 0.01, offset), 0, 1, shapeSize * 0.5, shapeSize); // Use noise for organic radius variation
      const x = width / 2 + r * cos(angle + offset * (i * 0.05)); // X position with offset rotation
      const y = height / 2 + r * sin(angle + offset * (i * 0.05)); // Y position with offset rotation
      curveVertex(x, y); // Add a vertex for the curved shape
    }
    endShape(CLOSE); // End the shape and close it
  }
}

function windowResized() {
  resizeCanvas(windowWidth, windowHeight); // https://p5js.org/reference/#/p5/resizeCanvas
  // Re-position the input field if needed (p5 handles this automatically if using .position())
  // moodInput.position(10, 10);
}