let radius;

let colors = {

  negative: [70, 70, 190], // Dark blue for negative sentiment

  neutral: [120, 120, 120], // Grey for neutral sentiment

  positive: [255, 165, 0]  // Bright orange for positive sentiment

};

​

function setup() {

  createCanvas(windowWidth, windowHeight);

  noStroke();

  radius = min(width, height) / 3; // Set initial size of the mood ring

  sentimentScore = 0; // Neutral sentiment as a starting point

}

​

function draw() {

  background(0); // Black background for contrast

​

  // Map sentiment score to color and size

  let currentColor = getColorFromSentiment(sentimentScore);

  let ringRadius = map(sentimentScore, -1, 1, radius / 2, radius * 2);

  // Draw the mood ring (smooth transition of color)

  fill(currentColor[0], currentColor[1], currentColor[2], 180);

  drawMoodRing(width / 2, height / 2, ringRadius);

​

  // Add text to show sentiment value

  fill(255);

  textSize(32);

  textAlign(CENTER);

  text(`Sentiment: ${sentimentScore.toFixed(2)}`, width / 2, height - 50);

  // Change sentiment for demo purposes (you can replace this with live data)

  sentimentScore += random(-0.01, 0.01); 

  sentimentScore = constrain(sentimentScore, -1, 1); // Keep sentiment between -1 and 1

}

​

// Function to get color based on sentiment score

function getColorFromSentiment(score) {

  if (score < -0.3) return lerpColor(color(colors.negative), color(colors.neutral), map(score, -1, -0.3, 0, 1));

  else if (score > 0.3) return lerpColor(color(colors.neutral), color(colors.positive), map(score, 0.3, 1, 0, 1));

  else return color(colors.neutral);

}

​

// Function to draw the mood ring

function drawMoodRing(x, y, radius) {

  let layers = 5; // Number of rings

  for (let i = layers; i > 0; i--) {

    let r = radius * i / layers;

    ellipse(x, y, r, r);

  }

}

​

function windowResized() {

  resizeCanvas(windowWidth, windowHeight);

  radius = min(width, height) / 3;

}

​