// Text floating Take a reference of the code of Visual Synonymsby Shawn Peters. https://editor.p5js.org/shawnpeters/sketches/F7KwxeMGt 

​

​

​

​

// Define an array to store circle information.

let circles = [];

​

// Define an array of emotions.

let emotions = ["Happy", "Sad", "Mad", "Scared", "Anxious", "Loved"];

​

// Create an array to store floating text elements.

let floatingTexts = [];

​

// Define emotion words for each emotion.

let emotionWords = {

  Happy: ["confident", "grateful", "peaceful", "excited", "playful"],

  Sad: ["hurt", "guilty", "lonely", "uninterested", "inadequate", "depressed", "abandoned"],

  Mad: ["shame", "upset", "shamed", "disappointed", "angry"],

  Scared: ["Timid", "nervous", "insecure", "exposed", "out of control", "threatened", "worried"],

  Anxious: ["excluded", "fragile", "isolated", "rejected", "exposed", "distant", "deserted", "vulnerable"],

  Loved: ["trusted", "appreciated", "accepted", "gentle", "passionate", "respected", "proud"]

};

​

// Initialize a variable to keep track of the selected circle.

let selectedCircle = -1;

​

// Initialize an object to keep track of clicked emotions.

let emotionClicked = {};

​

// Define a class for floating text elements.

class FloatingText {

  constructor(text, x, y) {

    this.text = text;

    this.x = x;

    this.y = y;

    this.speedX = random(-3, 3);

    this.speedY = random(-3, 3);

    this.size = 20;

    this.isVisible = false;

  }

​

  // Update the position of the floating text element.

  update() {

    this.x += this.speedX;

    this.y += this.speedY;

​

    if (this.x < 0 || this.x > width) {

      this.speedX *= -1;

    }

    if (this.y < 0 || this.y > height) {

      this.speedY *= -1;

    }

  }

​

  // Display the floating text element on the canvas.

  displayText() {

    textSize(this.size);

    fill(255);

    text(this.text, this.x, this.y);

  }

​

  // Draw the floating text element if it is visible.

  draw() {

    if (this.isVisible) {

      this.update();

      this.displayText();

    }

  }

}

​

// Set up the initial canvas.

function setup() {

  createCanvas(600, 600);

​

  // Create circle and floating text elements.

  for (let i = 0; i < 6; i++) {

    let x = random(50, 400);

    let y = random(50, 500);

    let emotion = emotions[i];

    circles.push({

      x,

      y,

      radius: 50,

      isHovered: false,

      emotion: emotions[i],

    });

​

    for (let j = 0; j < emotionWords[emotion].length; j++) {

      let x = random(100, 500);

      let y = random(100, 500);

      let textContent = emotionWords[emotion][j];

      floatingTexts.push(new FloatingText(textContent, x, y));

    }

  }

}

​

// Draw the canvas and its elements.

function draw() {

  background(0);

​

  for (let i = 0; i < circles.length; i++) {

    let circle = circles[i];

​

    // Check if the mouse is over the circle and set its fill color.

    circle.isHovered = isMouseOverCircle(circle);

    fill(circle.isHovered ? 255 : (circle.clicked ? 255 : 0));

    noStroke();

    ellipse(circle.x, circle.y, circle.radius * 2);

​

    if (circle.isHovered) {

      fill(0);

      textSize(16);

      textAlign(CENTER, CENTER);

      text(circle.emotion, circle.x, circle.y);

    }

​

    if (circle.clicked) {

      fill(0, 255, 0);

      textSize(16);

      textAlign(CENTER, CENTER);

      text(circle.emotion, circle.x, circle.y);

    }

  }

​

  for (let i = 0; i < floatingTexts.length; i++) {

    floatingTexts[i].draw();

  }

​

  // Add a title to the canvas.

  textSize(40);

  fill(255, 200, 200);

  textAlign(CENTER, CENTER);

  text("How are you feeling today?", width / 2, height - 500);

}

​

// Handle mouse click events.

function mousePressed() {

  let previousSelectedCircle = selectedCircle;

  selectedCircle = -1;

​

  for (let i = 0; i < circles.length; i++) {

    let circle = circles[i];

    fill(circle.isHovered ? 255 : 0);

    noStroke();

    ellipse(circle.x, circle.y, circle.radius * 2);

​

    if (circle.isHovered) {

      selectedCircle = i;

​

      let emotion = circle.emotion;

      if (emotionClicked[emotion]) {

        for (let j = 0; j < floatingTexts.length; j++) {

          if (emotionWords[emotion].includes(floatingTexts[j].text)) {

            floatingTexts[j].isVisible = false;

          }

        }

      } else {

        for (let j = 0; j < floatingTexts.length; j++) {

          if (emotionWords[emotion].includes(floatingTexts[j].text)) {

            floatingTexts[j].isVisible = true;

          }

        }

      }

      emotionClicked[emotion] = !emotionClicked[emotion];

    }

  }

​

  if (previousSelectedCircle !== selectedCircle || selectedCircle === -1) {

    redraw();

  }

}

​

// Check if the mouse is over a circle.

function isMouseOverCircle(circle) {

  let d = dist(mouseX, mouseY, circle.x, circle.y);

  return d < circle.radius;

}

​