Hi everyone,

 

I`m just a beginner but I am trying to create a graph that enables each of the columns to turn red when you roll the mouse over it. I keep trying and have spent so much time, but I either get all the columns turn red at once, or none :(

I can't figure out how to make only 1 column at a time go red....Can someone look at my code and see what I am doing wrong? Thank you so much! Any help is much appreciated!

 

 

int canvasSize = 400;
int [] columns = {200,100,250,125,300}; //array
int columnWidth=canvasSize/columns.length;
PFont f;

 

void setup () {

size (canvasSize,canvasSize);
f=createFont("AngsanaUPC", 30);
background (227,222,222);
textFont (f,30);
fill (0);
text ("200",25,200);
fill (0);
textFont (f,30);
text ("100",100,300);
fill (0);
textFont (f,30);
text ("250",185, 150);
fill (0);
textFont (f,30);
text ("125",260, 275);
fill (0);
textFont (f,30);
text ("300",345,100);
fill (0);
}
void draw () {

for (int i=0; i<columns.length; i++) {
rect (columnWidth*i, canvasSize-columns[i],columnWidth,columns[i]);
fill (255);
if (mouseX==i && mouseY==i) {
  fill (255,0,0);
}else{
}
}
}