#### Howdy, Stranger!

We are about to switch to a new forum software. Until then we have removed the registration on this forum.

# refresh ? (vertical clock)

edited November 2015

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{ } } }

Tagged:

• 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);` ?

• edited November 2015 Answer ✓

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 {
}
}
}
``````
• 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) ?

• 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 :)

• 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...

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

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