AI Dream Painter - xelsed.ai

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

function preload() {
  getApiKey(); // Ensure API key is decrypted
}

function setup() {
  createCanvas(windowWidth, windowHeight);
  background(0);
  noStroke();

  // Select the HTML DOM elements
  dreamInput = select('#dream-input');
  visualizeButton = select('#visualize-button');
  responseDiv = select('#response-message');

  // Attach event listeners
  visualizeButton.mousePressed(callOpenAI);
  // Attach keypress listener to the raw HTML element for Enter key detection
  dreamInput.elt.onkeypress = handleKeyPress;

  // Initialize shapes with default AI output
  initializeShapes();
}

function draw() {
  background(0, 5); // Subtle fade effect for trails

  for (let shapeObj of shapes) {
    shapeObj.update();
    shapeObj.display();
  }
}

function windowResized() {
  resizeCanvas(windowWidth, windowHeight);
  initializeShapes(); // Re-initialize shapes to adapt to new canvas size
}

function initializeShapes() {
  shapes = [];
  for (let i = 0; i < NUM_SHAPES; i++) {
    shapes.push(new FloatingShape(random(width), random(height)));
  }
}

function handleKeyPress(event) {
  if (event.keyCode === 13 && !event.shiftKey) { // 13 is Enter key, !event.shiftKey to allow new lines
    event.preventDefault(); // Prevent new line in textarea
    callOpenAI();
  }
}

async function callOpenAI() {
  const userInput = dreamInput.value().trim();
  if (!userInput) {
    responseDiv.html('Please enter your dream first.');
    return;
  }

  // Disable UI elements and show loading message
  visualizeButton.attribute('disabled', '');
  dreamInput.attribute('disabled', '');
  responseDiv.html('Analyzing dream... Please wait.');

  const requestBody = {
    model: 'gpt-4o-mini', // Using the specified model
    messages: [
      {
        role: 'system',
        content: `You are a dream analyzer. Your task is to analyze a dream provided by the user and return a JSON object with the following structure:
          {
            "mood": "happy" | "sad" | "mysterious" | "energetic",
            "colors": ["#RRGGBB", "#RRGGBB", "#RRGGBB"], // Array of 3 distinct hex color codes. Ensure they are valid hex codes.
            "speed": "slow" | "medium" | "fast",
            "shape": "circles" | "triangles" | "lines"
          }
          Ensure the output is a valid JSON string. Do not include any other text or explanation outside of the JSON. If a dream is too vague to determine a specific value, choose a reasonable default. For colors, try to pick colors that align with the mood, for example:
          - happy: ["#FFD700", "#FF69B4", "#7FFF00"]
          - sad: ["#4682B4", "#778899", "#2F4F4F"]
          - mysterious: ["#191970", "#4B0082", "#20B2AA"]
          - energetic: ["#FF4500", "#FFD700", "#FF1493"]`
      },
      {
        role: 'user',
        content: userInput // Send only the user's dream content
      }
    ],
    response_format: { type: "json_object" } // Request JSON object directly
  };

  try {
    const response = await fetch('https://api.openai.com/v1/chat/completions', {
      method: 'POST',
      headers: {
        'Content-Type': 'application/json',
        'Authorization': 'Bearer ' + getApiKey()
      },
      body: JSON.stringify(requestBody)
    });

    if (!response.ok) {
      const errorData = await response.json();
      throw new Error(`OpenAI API error: ${response.status} - ${errorData.error.message}`);
    }

    const data = await response.json();
    const assistantMessageContent = data.choices[0].message.content;

    // Attempt to parse the JSON content
    let parsedOutput;
    try {
      parsedOutput = JSON.parse(assistantMessageContent);
      // Basic validation of the parsed JSON structure
      if (!parsedOutput.mood || !parsedOutput.colors || !parsedOutput.speed || !parsedOutput.shape) {
        throw new Error('Parsed JSON is missing required fields.');
      }
      if (!Array.isArray(parsedOutput.colors) || parsedOutput.colors.length !== 3 || !parsedOutput.colors.every(color => /^#([A-Fa-f0-9]{6}|[A-Fa-f0-9]{3})$/.test(color))) {
        throw new Error('Colors must be an array of 3 valid hex codes.');
      }
    } catch (parseError) {
      console.error('Failed to parse AI response JSON:', assistantMessageContent, parseError);
      responseDiv.html('AI returned malformed JSON. Using default visuals. Error: ' + parseError.message);
      // Reset to default if parsing fails
      aiOutput = {
        mood: 'mysterious',
        colors: ['#333366', '#663366', '#336633'],
        speed: 'medium',
        shape: 'lines'
      };
      initializeShapes(); // Re-initialize shapes with default
      return; // Exit here, no further processing of malformed JSON
    }

    aiOutput = parsedOutput;
    console.log('AI Output:', aiOutput);
    responseDiv.html(`Mood: ${aiOutput.mood}, Speed: ${aiOutput.speed}, Shape: ${aiOutput.shape}`);

    // Update visuals based on new AI output
    initializeShapes(); // Re-initialize shapes with new AI output
    // The shapes will then update in the draw loop with the new aiOutput values
  } catch (error) {
    console.error('Error calling OpenAI API:', error);
    responseDiv.html('Error analyzing dream: ' + error.message + '. Please try again.');
  } finally {
    // Re-enable UI elements
    visualizeButton.removeAttribute('disabled');
    dreamInput.removeAttribute('disabled');
  }
}

  constructor(x, y) {
    this.x = x;
    this.y = y;
    this.size = random(20, 100);
    this.angle = random(TWO_PI);
    this.noiseOffset = random(1000); // Offset for Perlin noise
    this.colorIndex = floor(random(3)); // Index into aiOutput.colors array
  }

  update() {
    let currentSpeed = BASE_SPEED;
    switch (aiOutput.speed) {
      case 'slow':
        currentSpeed *= 0.5;
        break;
      case 'fast':
        currentSpeed *= 2.0;
        break;
      case 'medium':
      default:
        // currentSpeed remains BASE_SPEED
        break;
    }

    this.angle += currentSpeed;

    // Perlin noise for subtle, organic movement
    const noiseFactor = 0.01;
    this.x += sin(this.angle) * (noise(this.noiseOffset) - 0.5) * 5 * (currentSpeed / BASE_SPEED);
    this.y += cos(this.angle) * (noise(this.noiseOffset + 100) - 0.5) * 5 * (currentSpeed / BASE_SPEED);
    this.noiseOffset += noiseFactor;

    // Wrap around edges
    this.x = (this.x + width) % width;
    this.y = (this.y + height) % height;
  }

  display() {
    let shapeColor = color(aiOutput.colors[this.colorIndex]);
    let alphaValue = 150; // Default alpha

    switch (aiOutput.mood) {
      case 'happy':
        shapeColor.setAlpha(200);
        stroke(shapeColor); // Outline for happy shapes
        strokeWeight(2);
        fill(shapeColor);
        break;
      case 'sad':
        shapeColor.setAlpha(100);
        noStroke(); // No outline for sad shapes
        fill(shapeColor);
        break;
      case 'mysterious':
        shapeColor.setAlpha(120);
        stroke(shapeColor);
        strokeWeight(1);
        noFill(); // Outline only for mysterious shapes
        break;
      case 'energetic':
        shapeColor.setAlpha(255);
        stroke(shapeColor);
        strokeWeight(3); // Thicker outline for energetic shapes
        fill(shapeColor);
        break;
      default:
        shapeColor.setAlpha(alphaValue);
        noStroke();
        fill(shapeColor);
        break;
    }

    // Add some glow based on mood using drawingContext.shadowBlur
    // Note: this uses native canvas API and affects all subsequent drawing until reset
    if (aiOutput.mood === 'happy' || aiOutput.mood === 'energetic') {
      drawingContext.shadowBlur = 15;
      drawingContext.shadowColor = shapeColor.toString();
    } else {
      drawingContext.shadowBlur = 0;
    }

    // Draw the shape based on AI output
    switch (aiOutput.shape) {
      case 'circles':
        circle(this.x, this.y, this.size);
        break;
      case 'triangles':
        const r = this.size / 2;
        triangle(
          this.x + r * cos(this.angle), this.y + r * sin(this.angle),
          this.x + r * cos(this.angle + TWO_PI / 3), this.y + r * sin(this.angle + TWO_PI / 3),
          this.x + r * cos(this.angle + TWO_PI * 2 / 3), this.y + r * sin(this.angle + TWO_PI * 2 / 3)
        );
        break;
      case 'lines':
        // Lines generally don't have fill
        noFill();
        stroke(shapeColor);
        strokeWeight(max(1, this.size / 20)); // Line thickness based on size
        const lineLength = this.size * 0.8;
        line(
          this.x - lineLength / 2 * cos(this.angle), this.y - lineLength / 2 * sin(this.angle),
          this.x + lineLength / 2 * cos(this.angle), this.y + lineLength / 2 * sin(this.angle)
        );
        break;
      default:
        circle(this.x, this.y, this.size);
        break;
    }

    // Reset shadow blur for other elements if any, or next frame
    drawingContext.shadowBlur = 0;
  }