Wanting to make the columns to have a border when I hover over them

Processing Coding Questions
1

Hello everyone!

As far as I could see in the Mouse functions code of processing I need to first check if the mouse is over (or above since I wrote the code that way) the columns and if so, then change the stroke() to I don’t know, green. Some idea how I could make it?

So this is my code:

// Import the CSV file
Table data;

void setup() {
  size(850, 600);  // Increase the width to 850
  background(255);
  data = loadTable("data.csv", "header");
  
  // Find the maximum number of students
  int maxStudents = 0;
  for (int i = 0; i < data.getRowCount(); i++) {
    int students = data.getInt(i, "students");
    if (students > maxStudents) {
      maxStudents = students;
    }
  }
  
  // Set the y axis range
  int yMin = 0;
  int yMax = maxStudents + 5000;
  int yStep = 2000;
  
  // Set the x axis range
  int xMin = 2011;
  int xMax = 2022;
  int xStep = 1;
  
  // Draw the x and y axis
  drawAxis(xMin, xMax, xStep, yMin, yMax, yStep, 50, 50);
  
  // Draw the stacked columns
  for (int i = 0; i < data.getRowCount(); i++) {
    int year = data.getInt(i, "year");
    //int students = data.getInt(i, "students");
    int men = data.getInt(i, "men");
    int women = data.getInt(i, "women");
    
    // Calculate the heights of the stacks
    float menHeight = map(men, yMin, yMax, 0, height - 60);
    float womenHeight = map(women, yMin, yMax, 0, height - 60);
    
    // Draw the stacks
    fill(0, 0, 255);
    rect(map(year, xMin, xMax, 50, width - 100), height - 50 - menHeight, (width - 110)/12, menHeight);  // Decrease the width of the columns to make room for the right padding
    fill(255, 0, 0);
    rect(map(year, xMin, xMax, 50, width - 100), height - 50 - menHeight - womenHeight, (width - 110)/12, womenHeight);  // Decrease the width of the columns to make room for the right padding
  }
}

void draw(){
  loop();
}

void drawAxis(int xMin, int xMax, int xStep, int yMin, int yMax, int yStep, int paddingX, int paddingY) {
  // Draw the x axis
  stroke(0);
  line(paddingX, height - paddingY, width - paddingX - 50, height - paddingY);  // Decrease the length of the x axis to make room for the right padding
  for (int x = xMin; x <= xMax; x += xStep) {
    float xPos = map(x, xMin, xMax, paddingX, width - paddingX - 50);  // Decrease the range of the x axis to make room for the right padding
    line(xPos, height - paddingY, xPos, height - paddingY + 5);
    text(x, xPos, height - paddingY + 20);
  }
  // Draw the y axis
  stroke(0);
  line(paddingX, paddingY, paddingX, height - paddingY);
  for (int y = yMin; y <= yMax; y += yStep) {
    float yPos = map(y, yMin, yMax, height - paddingY, paddingY);
    line(paddingX - 5, yPos, paddingX, yPos);
    text(y, paddingX - 30, yPos);
  }
}

// Display a tool tip with the data for the column under the mouse
void mouseMoved() {
  // Find the column under the mouse
  int column = -1;
  for (int i = 0; i < data.getRowCount(); i++) {
    int year = data.getInt(i, "year");
    float xPos = map(year, 2011, 2022, 30, width - 80);  // Decrease the range of the x axis to make room for the right padding
    if (mouseX > xPos && mouseX < xPos + (width - 110)/12) {  // Decrease the width of the columns to make room for the right padding
      column = i;
      break;
    }
  }
  
  // Display the tool tip
  if (column != -1) {
    int year = data.getInt(column, "year");
    int students = data.getInt(column, "students");
    int men = data.getInt(column, "men");
    int women = data.getInt(column, "women");
    
    // Clear the background
    fill(255);
    noStroke();
    rect(0, 0, 200, 50);
    
    // Draw the tool tip
    fill(0);
    text("Year: " + year, 10, 20);
    text("Students: " + students, 10, 40);
    stroke(0,0,255);
    text("Men: " + men, 110, 20);
    stroke(255,0,0);
    text("Women: " + women, 110, 40);
  }
}

And this is my csv data table:

year,students,men,women
2011,11147,5225,5922
2012,12158,5516,6642
2013,13241,5931,7310
2014,14316,6256,8060
2015,15083,6364,8719
2016,16088,6725,9363
2017,16740,6995,9745
2018,17695,7247,10448
2019,18351,7528,10823
2020,18469,7527,10942
2021,18019,7392,10627
2022,17372,7243,10129
2 Likes
2

Hi sabisiiuuu, after so much effort this is what I could come up with, you hard coded some of your work(with such practice your code will be limited to solve only this problem) hence I will advise that you write codes for them. I don’t know why the rectangle is not aligning, I guess it was the way you mapped your data. You have better understanding of shapes and how to manipulate them/clear canvas than me so I will advice that you modify the codes I added to get the final solution. I used a lot of global variables which you will have to sort out. My code only partially works when the mouse is in the for first rectangle, if you move it past the first rectangle it will produce multiple rectangles. See if you can fix that, I wish I had more time for this problem but I have my own assignment to do. I will be available again on Wednesday afternoon. Cheers

// Import the CSV file
float xPos;
int year;
int xMin = 0; 
int xMax = 2000;
int menHeight = 0;
int womenHeight = 0;
 int xStep = 0;
int yMin = 0; 
int yMax = 0;
int yStep = 0;
float totalHeight;


Table data;

void setup() {
  size(850, 600);  // Increase the width to 850
  background(255);
  data = loadTable("data.csv", "header");
  
  // Find the maximum number of students
  int maxStudents = 0;
  for (int i = 0; i < data.getRowCount(); i++) {
    int students = data.getInt(i, "students");
    if (students > maxStudents) {
      maxStudents = students;
    }
  }
  
  // Set the y axis range
  int yMin = 0;
  int yMax = maxStudents + 5000;
  int yStep = 2000;
  
  // Set the x axis range
  int xMin = 2011;
  int xMax = 2022;
  int xStep = 1;
  
  // Draw the x and y axis
  drawAxis(xMin, xMax, xStep, yMin, yMax, yStep, 50, 50);
  
  // Draw the stacked columns
  for (int i = 0; i < data.getRowCount(); i++) {
    int year = data.getInt(i, "year");
    //int students = data.getInt(i, "students");
    int men = data.getInt(i, "men");
    int women = data.getInt(i, "women");
    
    // Calculate the heights of the stacks
    float menHeight = map(men, yMin, yMax, 0, height - 60);
    float womenHeight = map(women, yMin, yMax, 0, height - 60);
    //###################################
    totalHeight = menHeight + womenHeight;
    //########################################
    
    
    // Draw the stacks
      //stroke(0,255,0);
      fill(0, 0, 255);
      rect(map(year, xMin, xMax, 50, width - 100), height - 50 - menHeight, (width - 110)/12, menHeight);  // Decrease the width of the columns to make room for the right padding
      fill(255, 0, 0);
    rect(map(year, xMin, xMax, 50, width - 100), height - 50 - menHeight - womenHeight, (width - 110)/12, womenHeight);  // Decrease the width of the columns to make room for the right padding
    
}
}

void draw(){
  loop();
}

void drawAxis(int xMin, int xMax, int xStep, int yMin, int yMax, int yStep, int paddingX, int paddingY) {
  // Draw the x axis
  stroke(0);
  line(paddingX, height - paddingY, width - paddingX - 50, height - paddingY);  // Decrease the length of the x axis to make room for the right padding
  for (int x = xMin; x <= xMax; x += xStep) {
    float xPos = map(x, xMin, xMax, paddingX, width - paddingX - 50);  // Decrease the range of the x axis to make room for the right padding
    line(xPos, height - paddingY, xPos, height - paddingY + 5);
    text(x, xPos, height - paddingY + 20);
  }
  // Draw the y axis
  stroke(0);
  line(paddingX, paddingY, paddingX, height - paddingY);
  for (int y = yMin; y <= yMax; y += yStep) {
    float yPos = map(y, yMin, yMax, height - paddingY, paddingY);
    line(paddingX - 5, yPos, paddingX, yPos);
    text(y, paddingX - 30, yPos);
  }
}

// Display a tool tip with the data for the column under the mouse
void mouseMoved() {
  // Find the column under the mouse
  int column = -1;
  for (int i = 0; i < data.getRowCount(); i++) {
    int year = data.getInt(i, "year");
    float xPos = map(year, 2011, 2022, 30, width - 80);  // Decrease the range of the x axis to make room for the right padding
    if (mouseX > xPos && mouseX < xPos + ((width - 110)/12)) {  // Decrease the width of the columns to make room for the right padding
    //#########################################################################
    fill(0,255,0,0);
    stroke(0,255,0);
    strokeWeight(5);
    rect(50+i*((width - 110-80)/12), height - 50 - menHeight - womenHeight-60, (width - 110)/12, totalHeight); 
    //####################################################################
    column = i;
      break;
     
      
    }
  }
   
  
  // Display the tool tip
  if (column != -1) {
    int year = data.getInt(column, "year");
    int students = data.getInt(column, "students");
    int men = data.getInt(column, "men");
    int women = data.getInt(column, "women");
    
    
    // Clear the background
    fill(255);
    noStroke();
    rect(0, 0, 200, 50);
    
    // Draw the tool tip
    fill(0);
    text("Year: " + year, 10, 20);
    text("Students: " + students, 10, 40);
    stroke(0,0,255);
    text("Men: " + men, 110, 20);
    stroke(255,0,0);
    text("Women: " + women, 110, 40);
    
  }
 
  
}

I used # to surroundPreformatted text my code

3

This is how to get the maximum number instead of hard coding by adding 5000 like you did below.
//// int yMax = maxStudents + 5000; ####

// scientific notation a*10^b
float maxStudents = 18900;
float d = 0 ;


int[] bb = {-10,-9,-8,-7,-6,-5,-4,-3,-2,-1,0,1,2,3,4,5,6,7,8,9,10};

for (int i = 0; i < bb.length+1; i++) {         
  
  float b = pow( 10, i);
  float c = pow( 10, i+1);
  if(maxStudents >b && maxStudents<c ){
    d = maxStudents/b;
    //rounds number to the highest nearest integer
    float a = ceil(d);
    maxStudents = a * b;
int yStep = maxStudents/10;
  //println(maxStudents);
}
}

edit where appropriate, bb can be any -ve through 0 to +ve range