let commWidth, commHeight;

​

postWidth = 500;

postHeight = 400;

commWidth = 300;

commHeight = 300;

​

​

​

//array to load the images into 

let comm = [];

let posts =[];

​

// 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 

  }

   // Load the CSV file

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

}

​

​

​

function setup() {

  createCanvas(windowWidth, windowHeight);

  //bottons for each state 

  // Initialize buttons for the main page

  button1 = new CircularButton(150, 500, 50, 'Scroll', color(255,179,186));

  button2 = new CircularButton(400, 500, 50, 'Read', color(255,255,186));

  button3 = new CircularButton(650, 500, 50, 'Visualize', color(186,225,255));

   // 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];  // Gray

        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();

  }

​

}

​

// Main page content

function drawMainPage() {

  textSize(32);

  fill(255);

  text('Emotions Through Media', 250,150);

  fill(0);

  // Display buttons for navigation

  button1.display();

  button2.display();

  button3.display();

}

​

// 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/2+this.radius * cos(this.angle)/2+freqX;

    this.y = height/2+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);

  }

}

​

​

​

// Main page content

function drawMainPage() {

  textSize(32);

  fill(255);

  text('Emotions Through Media', 250,150);

  fill(0);

​

  // Display buttons for navigation

  button1.display();

  button2.display();

  button3.display();

}

​

​

// Page 1 content

function drawPage1() {

  if (posts[0]) {

    postWidth = posts[0].width * 0.2;  // Scale the width of the first post image

    postHeight = posts[0].height * 0.2;

  }

   if (posts.length > 0) {

      // currentImageIndex = int(random(posts.length)); // Between 0 and length-1

    image(posts[currentImageIndex], width/2, height/2, postWidth,postHeight);

  }

}

​

// Page 2 content

function drawPage2() {

  textSize(32);

  fill(0);

   if (comm[0]) {

    commWidth = comm[0].width * 0.2;  // Scale the width of the first comm image

    commHeight = comm[0].height * 0.2;

  }

  //text('Read', width / 2, height / 2);

    // image(comm[currentComIndex], 310,0,commWidth, commHeight);

  if (comm.length > 0) {

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

    image(comm[currentComIndex], width/2, height/2, commWidth, commHeight);

  }

}

​

// Page 3 content

function drawPage3() {

  textSize(32);

  fill(0);

  text('Data', width / 2, height / 2);

  //for data vis 

   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 if (currentPage === 'page1') {

    // If we're on page1, randomize the image when the screen is clicked

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

  }

  else if (currentPage == 'page2') {

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

  }

}

​

// Circular button class

class CircularButton {

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

    this.x = x;

    this.y = y;

    this.r = r;

    this.label = label;

    this.col = col;

  }

​

  display() {

    fill(this.col);

    noStroke();

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

//     align text and label 

    fill(0);

 textAlign(CENTER, CENTER);

    textSize(16);

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

  }

​

  isClicked() {

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

    return d < this.r;

  }

}