refresh ? (vertical clock)

lxnr_p

hi, I'm student and to learn how to use processing, we need to do a clock but with a "new" shape and without the traditional data. My clock is vertical and each hour, minutes, and seconds, 1 rectangle appear and filled with red, yellow or orange, with a white thin line around each rectangle.

But to have the clock data, I would like to have the Y coordinates when we drag the mouse over a rectangle. I succeeded to do it, but all the data placed on the top of each. Do you think you could help me with it ?

below the code of my clock, thanks so much for your help :). Sorry if my english is bad...

void setup(){ size(300, 600); smooth(); }

void draw() { background(#6878FF); int h = hour(); int min = minute(); int s = second();

for (int i = 0; i<24; i++){ if(i < h){ fill(#FFE300); stroke(255); }else{ fill(255 ,255, 255, 0); noStroke(); } rect((width/3)-100, 10*i, 100, 10); }

for (int i = 0; i<60; i++){ if(i < min){ fill(#FF7F00); stroke(255); }else{ fill(255, 255, 255, 0); noStroke(); } rect((width/3), 10*i, 100, 10); }

for (int i = 0; i<60; i++){ if(i < s){ fill(#FF2700); stroke(255); }else{ fill(255, 255, 255, 0); noStroke(); } rect((width/3)+100, 10*i, 100, 10); fill(255); }

for(int i=0; i<700; i=i+10){ if(mouseY == i){ text(i, (width/7), 250); }else{ } } }

Chrisir

I tested it.

the data is not placed on the top of each other

what do you mean?

do you refer to this line: text(i, (width/7), 250); ?

Chrisir

small improvement with mouseY

see below

void setup() { 
  size(300, 600); 
  smooth();
}

void draw() { 
  background(#6878FF); 
  int h = hour(); 
  int min = minute(); 
  int s = second();

  for (int i = 0; i<24; i++) { 
    if (i < h) { 
      fill(#FFE300); 
      stroke(255);
    }
    else { 
      fill(255, 255, 255, 0); 
      noStroke();
    } 
    rect((width/3)-100, 10*i, 100, 10);
  }

  for (int i = 0; i<60; i++) { 
    if (i < min) { 
      fill(#FF7F00); 
      stroke(255);
    }
    else { 
      fill(255, 255, 255, 0); 
      noStroke();
    } 
    rect((width/3), 10*i, 100, 10);
  }

  for (int i = 0; i<60; i++) { 
    if (i < s) { 
      fill(#FF2700); 
      stroke(255);
    }
    else { 
      fill(255, 255, 255, 0); 
      noStroke();
    } 
    rect((width/3)+100, 10*i, 100, 10); 
    fill(255);
  }

  for (int i=0; i<700; i=i+10) { 
    if (mouseY > i && mouseY < i+10) { 
      text(i, (width/7), 250);
      break;
    }
    else {
    }
  }
}

lxnr_p

Hi, A really big thanks to you, if I could offer you a box of chocolates I'll do it :D Thanks so much ! You're so efficient ^^

But could you explain me what have you done, I don't see the syntax yet (line 50) ?

lxnr_p

The data wasn't placed of each other because I'll try something, and I post the wrong code, but you give me what I wanted :)

Chrisir

in line 50 I check the mouseY whether it is bigger than one position and smaller than this position +10

you had just checked for == but it is better to check if the mouse is within a range like I did with bigger than AND smaller than...

lxnr_p

and the signs && is the syntax to compare if mouseY is bigger than i AND smaller than i+10 as you said right ?

Chrisir

yes

the signs && means logical AND

so both conditions must be true: mouseY is bigger than i AND smaller than i+10

lxnr_p

Fine, really big thanks for all your help, and your explanations :)