Processing 1.0 - Processing Discourse - building a clock (with link to picture)

We closed this forum 18 June 2010. It has served us well since 2005 as the ALPHA forum did before it from 2002 to 2005. New discussions are ongoing at the new URL http://forum.processing.org. You'll need to sign up and get a new user account. We're sorry about that inconvenience, but we think it's better in the long run. The content on this forum will remain online.

Index › Programming Questions & Help › Syntax Questions › building a clock (with link to picture)

‹ Previous Topic | Next Topic ›

Pages: 1

building a clock (with link to picture) (Read 3146 times)

rajmahal

building a clock (with link to picture)
May 1^st, 2010, 2:30pm

Hi, I am relatively new to processing and need to build a non traditional clock for a class project. The concept for my clock is a still image progression from baby to full grown adult. I have still pictures from baby to adulthood of a father and son and each second, minute, hour will correspond to one of the 60 pictures. The seconds start with the baby and cycle through to the 60 year old man, at which point the minutes changes to the next older picture, etc…
A mock up image of what it looks like can be found here http://www.rumors-studio.com/spring10/sketchbook/archives/278
I have all the images loaded but I am having trouble figuring out how to build the thing so that it does what I want. Any help getting started would be much appreciated!!
thanks

TfGuy44

Re: building a clock (with link to picture)
Reply #1 - May 1^st, 2010, 6:31pm

I think the sample code from here...
http://processing.org/reference/hour_.html
... plus storing the images in a meaningful way in an array...
http://processing.org/reference/Array.html
... plus drawing the right pictures with image()...
http://processing.org/reference/image_.html
... would be the best way to go. Good luck.

PhiLho

Re: building a clock (with link to picture)
Reply #2 - May 2^nd, 2010, 1:09am

Wow, TfGuy44 giving pointers to help coding instead of jumping in to give full code!

Not that I critique the later attitude, I know the feeling of having a nice little interesting project to solve quickly. And I did that in the past, although avoiding that when it was clearly a school assignment.

Because, (to rajmahal), we prefer to give pointers and help, and let the students to solve the problem themselves.
So, search for various clock projects on the forum (they are numerous), try to advance in your goal, and if you are stuck, ask for help, we gladly push you in the right direction. Grin

rajmahal YaBB Newbies Offline Posts: 12	Re: building a clock (with link to picture) Reply #3 - May 2^nd, 2010, 5:03am Thanks you guys, I will get as far as I can with the tips provided and certainly be back with more questions!!

rajmahal

Re: building a clock (with link to picture)
Reply #4 - May 4^th, 2010, 9:33pm

so with some help I have this so far:

PImage[] secondArray = new PImage[60];

void setup() {
size (400, 310);
background (255);

//for statement that cycles through the seconds
for (int i=0; i<secondArray.length; i++) {
secondArray[i] = loadImage("second" + i + ".jpg");
}
}

void draw () {
image(secondArray[seconds()],100,100);
}

And it gives me this message: "The function seconds() does not exist."
Please forgive my total ignorance with this. I know this is something really simple but how do I fix this?
thanks

PhiLho YaBB Moderator Offline Posts: 4190 Near Paris (France)	Re: building a clock (with link to picture) Reply #5 - May 5^th, 2010, 2:09am That's second(), not seconds(). You have a good start, just add a minuteArray and an hourArray, position correctly the images and you are almost done. Hint: in general, it is better to start draw() with a background() call (ie. move this call from setup() to draw()).

rajmahal

Re: building a clock (with link to picture)
Reply #6 - May 5^th, 2010, 3:45am

thanks Philho,

so now that i have fixed that it is telling me that I have an "array out of bounds exception: 23"

here is the code:

Code:

PImage[] secondArray = new PImage[3];

void setup() {
size (400, 310);

//for statement that cycles through the seconds
for (int i=0; i<secondArray.length; i++) {
secondArray[i] = loadImage("second" + i + ".jpg");
}
}

void draw () {
background (255);
image(secondArray[second()],100,100);
}

I changed the number of items in the array to 3 just because I originally had all my files named "1.jpg" "2.jpg" and so on and didn't want to change all of them by adding the word "second" in front so I did it only with the first 3 just until I get it working.

I have read many of the forum posts relating to this error message, and I know that I have to reset the counter back to zero but I just don't know how to do this.

PhiLho

Re: building a clock (with link to picture)
Reply #7 - May 5^th, 2010, 4:45am

second() will return a number between 0 and 59.
So your array must have 60 entries, as you coded initially.
A trick: if you are on Windows, you can use a free tool like Flexible Renamer (but there are lot of others) to quickly rename a bunch of files...

Otherwise, just do loadImage(i + ".jpg") for a quick test.

That said, I will answer your question as the response is of general interest. To make your script to work in its current state, do:
image(secondArray[second() % 3], 100, 100);
The % operator gives the remainder of the division of its left part by the right part. 0, 1, 2 will remain unchanged, 3 becomes 0, 4 becomes 1, and so on.

rajmahal

Re: building a clock (with link to picture)
Reply #8 - May 11^th, 2010, 7:49pm

okay so I have gotten the clock to work and now I just need to have the actual time to display under each image: hours under the hours images, minutes under the minutes imabe, etc..
here is my code:

Code:

PImage[] secondArray = new PImage[60];
PImage[] minuteArray = new PImage[60];
PImage[] hourArray = new PImage[24];

void setup() {
size (400, 310);
//loading the font
//fontA = loadFont("ACaslon-SemiboldSC-36.vlw");
//textFont(fontA);

//seconds
for (int i=0; i<secondArray.length; i++) {
  secondArray[i] = loadImage((i+1) + ".jpg");
  }
 
//minutes
for (int i=0; i<minuteArray.length; i++) {
  minuteArray[i] = loadImage("minute" + (i+1) + ".jpg");
  }

//hours
for (int i=0; i<hourArray.length; i++) {
  hourArray[i] = loadImage("hour" + (i+1) + ".jpg");
  }
}

void draw () {
background(255);

image(secondArray[second()],255,90);
image(minuteArray[minute()],155,90);
image(hourArray[hour()],55,90);
}

Can someone please help me with how to get the numbers to display under the images? I know I need to un comment the loadFont but I am just not sure what to do from there.
thanks!!
thanks.

« Last Edit: May 11^th, 2010, 9:19pm by rajmahal »

TfGuy44

Re: building a clock (with link to picture)
Reply #9 - May 11^th, 2010, 9:20pm

As for the hours not working correctly, you'll find the problem very quickly if you..... find where the function setup() ends. (Hint: It's not where it should be - check your {}'s!)

As for displaying the time, look at the function text():
http://processing.org/reference/text_.html
All you need to do is draw (Hint: put in draw()) some text (Hint: Use text()) to the screen that is the right time.

rajmahal YaBB Newbies Offline Posts: 12	Re: building a clock (with link to picture) Reply #10 - May 11^th, 2010, 9:47pm yay!! I got everything to work!! thanks for your help!! now, how can I go about making the numbers appear only when the mouse is in the image area?

PhiLho YaBB Moderator Offline Posts: 4190 Near Paris (France)	Re: building a clock (with link to picture) Reply #11 - May 11^th, 2010, 11:52pm Check mouse position (mouseX, mouseY) against the bounds of the image. Tons of examples in the Learning section and in the forum...

rajmahal

Re: building a clock (with link to picture)
Reply #12 - May 12^th, 2010, 4:53am

Thanks! got it!

here is the complete code for anyone who has been following this thread:

Code:

PImage[] secondArray = new PImage[60];
PImage[] minuteArray = new PImage[60];
PImage[] hourArray = new PImage[24];

void setup() {
size (400, 310);

//loading the font
PFont font; 
font = loadFont("ACaslon-ItalicOsF-36.vlw");
textFont(font);

//seconds
for (int i=0; i<secondArray.length; i++) {
  secondArray[i] = loadImage((i+1) + ".jpg");
  }
 

//minutes
for (int i=0; i<minuteArray.length; i++) {
  minuteArray[i] = loadImage("minute" + (i+1) + ".jpg");
  }

//hours
for (int i=0; i<hourArray.length; i++) {
  hourArray[i] = loadImage("hour" + (i+1) + ".jpg");
  }
}

void draw () {
background(255);
line(55, 80, 340, 80);
line(55, 225, 340, 225);

//calling the images
image(secondArray[second()],255,90);
image(minuteArray[minute()],155,90);
image(hourArray[hour()],55,90);

//creating the rollowver effect
if((mouseX > 55) && (mouseX < 340) && (mouseY > 90) && (mouseY < 220)) {
  fill(0);
  text(second(), 267, 270);
  text(minute(), 167, 270);
  text(hour(), 77, 270);
  text("Faceclock", 112, 70);
  }
}

rajmahal

Re: building a clock (with link to picture)
Reply #13 - May 12^th, 2010, 9:13am

Two more questions:

1) currently the numbers display as single digits when they are below 10. How do I make it so that they read as double digits always? When it is 5 seconds, I want it to read 05 not just 5. This way I fix the problem of centering single and double digit numbers underneath the images.

2) how do I get the images to fade into the next one rather than just appearing every second with the new image. I want the transition to be smoother.

thanks!

PhiLho

Re: building a clock (with link to picture)
Reply #14 - May 12^th, 2010, 9:49am

1) Simplest way in Processing is to use nf() function.
2) It is harder has you have to manage a fading level evolving with time (eg. with number of frames, of draw() calls).
A possible way to do that is to use tint() to progressively change the alpha channel of the new image drawn over the previous one (from totally transparent to totally opaque).

Pages: 1

‹ Previous Topic | Next Topic ›