let commWidth, commHeight;

​

postWidth = 500;

postHeight = 400;

commWidth = 300;

commHeight = 300;

​

//array to load the images into 

let comm = [];

let posts =[];

let titleFocnt;

​

// data visualization 

let table;

let emotions = [];

let particles = [];

//this is for creating diff states to navigate the experiance

let currentPage = 'main';  // Tracks which page is currently being displayed

let button1, button2, button3;

​

​

function preload() {

  //for posts

for (let i = 1; i <= 15; i++) {

    posts[i] = loadImage(`post/${i}.PNG`); // Load each image for posts in array 

  }

  //for comments

  for (let i = 1; i <= 15; i++){

   comm[i] = loadImage(`comm/${i}.PNG`);// Load each image for posts in array 

  }

  titleFont = 'Sixtyfour Convergence'; 

   // Load the CSV file

  table = loadTable('emotions.csv', 'csv', 'header');

}

​

​

​

function setup() {

   let canvas = createCanvas(1000, 1000);

  canvas.parent('canvas-container');

  //bottons for each state 

  // Initialize buttons for the main page

  button1 = new CircularButton(150+130, 700, 60, 'Scroll', color(255, 255, 153));

  button2 = new CircularButton(400+130, 700, 60, 'Read', color(153, 204, 255));

  button3 = new CircularButton(650+130, 700, 60, 'Visualize', color(255, 153, 205));

  // Initialize reset and main page buttons

  resetButton = new CircularButton(width - 100, 900, 50, 'Reset', color(255, 204, 153));

  mainPageButton = new CircularButton(100, 900, 50, 'Main', color(153, 255, 153));

   // Extract data from CSV

  for (let i = 0; i < table.getRowCount(); i++) {

    let emotion = table.getString(i, 'Emotions').trim();  

    let percentage = table.getNum(i, 'Percentage');

    let color;

​

    // Define color for each emotion https://editor.p5js.org/esztvi/sketches/yuvIkGYR3

    switch (emotion) {

      case 'happiness':

        color = [255, 255, 153];  // Yellow

        break;

      case 'sadness':

        color = [153, 204, 255];    // Blue

        break;

      case 'anger':

        color = [255, 153, 205];    // pink

        break;

      case 'anxiety':

        color = [255, 204, 153];  // Orange

        break;

      case 'boredom':

        color = [153, 255, 153];  // Green

        break;

      case 'neutral':

        color = [204, 153, 255];  // purpule

        break;

      default:

        color = [100, 100, 100];  // Default gray if no match

        break;

    }

​

    // Add emotion data to the array

    emotions.push({ emotion: emotion, percentage: percentage, color: color });

  }

​

  // Generate particles based on the emotions data

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

    generateParticles(emotions[i]);

  }

   // Randomize valid indexes

  currentImageIndex = int(random(0, posts.length));  

  currentComIndex = int(random(0, comm.length));

}

​

function draw() {

   background(0,10);

  // Display content based on the current page

  if (currentPage === 'main') {

    drawMainPage();

  } else if (currentPage === 'page1') {

    drawPage1();

  } else if (currentPage === 'page2') {

    drawPage2();

  } else if (currentPage === 'page3') {

    drawPage3();

  }

   // Display reset and main page buttons on all pages except the main page

  if (currentPage !== 'main') {

    resetButton.display();

    mainPageButton.display();

  }

  // Ensure the canvas resizes with the window

function windowResized() {

  resizeCanvas(windowWidth, windowHeight);

}

}

​

​

​

// Main page content

function drawMainPage() {

  textSize(60);

  fill(255);

  //textFont("Courier");

  textFont(titleFont);

  text('Emotions Through Media', 500,250,1);

  fill(0);

  // Display buttons for navigation

  textFont("Courier");

  button1.display();

  button2.display();

  button3.display();

}

​

// page 1 content

function drawPage1() {

  // Check if the post is loaded before drawing it

  if (posts[currentImageIndex] && posts[currentImageIndex].width) {

    let centerX = (width / 2) - (postWidth / 2);

    let centerY = (height / 2) - (postHeight / 2);

    image(posts[currentImageIndex], centerX, centerY, postWidth, postHeight);

  } else {

    console.error('Post image not loaded or undefined');

  }

}

​

// page 2 content

function drawPage2() {

  // Check if the comment is loaded before drawing it

  if (comm[currentComIndex] && comm[currentComIndex].width) {

    let centerX = (width / 2) - (commWidth / 2);

    let centerY = (height / 2) - (commHeight / 2);

    image(comm[currentComIndex], centerX, centerY, commWidth, commHeight);

  } else {

    console.error('Comment image not loaded or undefined');

  }

}

​

​

// Page 3 content

function drawPage3() {

​

  // Define colors for each emotion (same as your switch-case colors)

  let emotionColors = {

    happiness: [255, 255, 153],  // Yellow

    sadness: [153, 204, 255],    // Blue

    anger: [255, 153, 205],      // Pink

    anxiety: [255, 204, 153],    // Orange

    boredom: [153, 255, 153],    // Green

    neutral: [204, 153, 255]     // Gray

  };

​

  // Define size and spacing for the squares and text

  let boxSize = 30;  // Size of the square

  let spacing = 50;  // Vertical spacing between the items

  let startX = 50;   // X position for the squares and text

  let startY = 100;  // Starting Y position for the first square

​

  // Draw static list of emotions with colored squares

  // 1. Neutral

  fill(emotionColors.neutral);

  noStroke();

  rect(startX, startY, boxSize, boxSize);

  fill(255);

  textSize(20);

  textAlign(LEFT, CENTER);

  text('neutral', startX + boxSize + 10, startY + boxSize / 2);

​

  // 2. Anxiety

  fill(emotionColors.anxiety);

  rect(startX, startY + spacing, boxSize, boxSize);

  fill(255);

  text('anxiety', startX + boxSize + 10, startY + spacing + boxSize / 2);

​

  // 3. Boredom

  fill(emotionColors.boredom);

  rect(startX, startY + 2 * spacing, boxSize, boxSize);

  fill(255);

  text('boredom', startX + boxSize + 10, startY + 2 * spacing + boxSize / 2);

​

  // 4. Happiness

  fill(emotionColors.happiness);

  rect(startX, startY + 3 * spacing, boxSize, boxSize);

  fill(255);

  text('happiness', startX + boxSize + 10, startY + 3 * spacing + boxSize / 2);

​

  // 5. Sadness

  fill(emotionColors.sadness);

  rect(startX, startY + 4 * spacing, boxSize, boxSize);

  fill(255);

  text('sadness', startX + boxSize + 10, startY + 4 * spacing + boxSize / 2);

​

  // 6. Anger

  fill(emotionColors.anger);

  rect(startX, startY + 5 * spacing, boxSize, boxSize);

  fill(255);

  text('anger', startX + boxSize + 10, startY + 5 * spacing + boxSize / 2);

​

  // (Optional) Display the particle system or any other content in the remaining space

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

    particles[i].move();

    particles[i].display();

  }

}

​

​

// Mouse pressed function to handle button clicks

function mousePressed() {

  if (currentPage === 'main') {

    // Check if buttons are clicked on the main page

    if (button1.isClicked()) {

      currentPage = 'page1';

    } else if (button2.isClicked()) {

      currentPage = 'page2';

    } else if (button3.isClicked()) {

      currentPage = 'page3';

    }

  } else {

    // Check for reset and main page button clicks on other pages

    if (resetButton.isClicked()) {

      resetPage();

    } else if (mainPageButton.isClicked()) {

      currentPage = 'main';

    }

​

    // Handle specific page interactions

    if (currentPage === 'page1') {

      currentImageIndex = int(random(posts.length));

    } else if (currentPage === 'page2') {

      currentComIndex = int(random(comm.length));

    }

  }

}

​

class CircularButton {

  constructor(x, y, r, label, col) {

    this.x = x;

    this.y = y;

    this.r = r;

    this.label = label;

    this.col = col;

    // Very light transparency for the glow

    this.glowAlpha = 20;  

     // Speed of pulsing effect

    this.pulseSpeed = 0.02; 

    // Randomize initial movement angle

    this.angleOffset = random(TWO_PI);  

  }

​

  display() {

    // Add a subtle, pulsating purpulish glow around the button

    let glowRadius = this.r * 1.5 + sin(frameCount * this.pulseSpeed + this.angleOffset) * 5;

    let glowColor = color(204, 153, 255, this.glowAlpha);  // Very light purpule

​

    // Draw the subtle glowing effect behind the button

    noStroke();

    fill(glowColor);

    ellipse(this.x, this.y, glowRadius * 2);

​

    // Draw the main button circle

    fill(this.col);

    ellipse(this.x, this.y, this.r * 2);

​

    // Draw the button label

    fill(0);

    textSize(16);

    textAlign(CENTER, CENTER);

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

  }

​

  isClicked() {

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

    return d < this.r;

  }

}

​

​

// Function to generate particles for each emotion

function generateParticles(emotionData) {

  let numParticles = map(emotionData.percentage, 0, 100, 10, 100);  // More particles for higher percentages

  let particleSize = map(emotionData.percentage, 0, 100, 3, 70);  // Larger size for higher percentages

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

     let angle = map(i, 0, numParticles, PI, TWO_PI*4); // Angle for circular positioning

    let radius = random(50, 350);

    let particle = new Particle (radius, angle, emotionData.color, particleSize);

    particles.push(particle);

  }   

}

​

​

// Particle class 

class Particle {

  constructor(radius, angle, col, size) {

    //this.x = x;

    //this.y = y;

     this.radius = radius; // Store radius for circular movement

    this.angle = angle;   // Store initial angle

    this.size = size ; // Set particle size based on the percentage

    this.color = col;

    this.angleSpeed = random(0.0001, 0.002); //speed of movment

    this.angleAcc = 0.000001; //faster movmt over time

    this.lifetime = 255;

  }

​

  move() {

    // Update the angle to move in a circular path

    this.angle += this.angleSpeed;

    this.angleSpeed+=this.angleAcc;

​

     //interaction to change shape based on curser 

    let freqX= map(mouseX,0,width,1,-500);

    let freqY= map(mouseY,0,height,1,-500);

    let offSet =map(mouseX,0,width,0,250);

    // Calculate x and y position based on the angle and radius

    this.x = width+this.radius * cos(this.angle)/2+freqX;

    this.y = height+this.radius * sin(3*this.angle)+freqY;

  }

  finished() {

    return this.lifetime < 0;

  }

​

  display() {

    noStroke(0,this.lifetime);

    fill(this.color,this.lifetime);

    ellipse(this.x, this.y, this.size/4);

  }

}

​

// Reset the current page

function resetPage() {

  if (currentPage === 'page1') {

    currentImageIndex = int(random(posts.length));

  } else if (currentPage === 'page2') {

    currentComIndex = int(random(comm.length));

  }

}

​

​