Introduction to Interactive Media

Mang F2024x

*/

​

// Define an array of emoji objects with their emotions and positions

let emojis = [

  { symbol: "😀", emotion: "Happy", x: 500, y: 300 },

  { symbol: "😢", emotion: "Sad", x: 300, y: 200 },

  { symbol: "😠", emotion: "Angry", x: 400, y: 200 },

  { symbol: "😎", emotion: "Cool", x: 200, y: 300 },

  { symbol: "🤩", emotion: "Excited", x: 300, y: 300 },

  { symbol: "🙈", emotion: "Shy", x: 400, y: 400 },

  { symbol: "😳", emotion: "In shock", x: 300, y: 400 },

  { symbol: "😭", emotion: "Crying", x: 400, y: 300 }

];

​

let selectedEmoji = null;  // Variable to store selected emoji object

​

function setup() {

  createCanvas(800, 600);

  textAlign(CENTER, CENTER);

  textSize(64);  // Set text size for emojis

}

​

function draw() {

  drawGradientBackground(); // Add the gradient background

  // Display emojis

  textSize(64);  // Ensure the emoji text size is always large

  for (let emoji of emojis) {

    text(emoji.symbol, emoji.x, emoji.y);

  }

​

  // Display the message for the selected emoji

  if (selectedEmoji != null) {

    textSize(24);  // Smaller text for the message

    fill(0);

    text(`Use this emoji when you are ${selectedEmoji.emotion}.`, selectedEmoji.x, selectedEmoji.y - 50);  // Display above the emoji

  }

}

​

function mousePressed() {

  // Check if an emoji is clicked

  for (let emoji of emojis) {

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

    if (d < 30) {  // Check if the mouse is close enough to the emoji

      selectedEmoji = emoji;  // Set the selected emoji

      break;

    }

  }

}

​

// Function to draw a gradient background

function drawGradientBackground() {

  let startColor = color(135, 206, 235); // Light blue color

  let endColor = color(72, 61, 139);     // Dark slate blue color

  for (let y = 0; y < height; y++) {

    let inter = map(y, 0, height, 0, 1); 

    let c = lerpColor(startColor, endColor, inter); // Interpolate between the two colors

    stroke(c);

    line(0, y, width, y); // Draw horizontal lines to create gradient

  }

}

​