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.
‹ Previous Topic | Next Topic ›
Page Index Toggle Pages: 1
Clock (Read 764 times)
bethadillon
Clock
Sep 16th, 2006, 6:40am  
I need help figuring out what is probably a very basic function in Processing. (Not looking for someone to do it for me, but I do need to be baby-stepped through understanding how this works since I'm completely new to programming).

I am making a clock for a class assignment. What I'd like to do is simply use a jpg image as the background and then have a long line and a short line to represent the hour and minute hands ticking on top of the image in realtime hours/minutes/seconds.

I've found all of the "Time & Date" codes in the Language Reference, but I need help figuring out how to impliment multiple time codes at once and how to apply them to the moving lines, and how to make those lines move properly.

Any help is much appreciated. Feel free to add me to MSN or email me directly at beth.a.dillon@gmail.com. I need a tutor in Processing!

- Beth
Back to top
 
 
Daniel Shiffman
Re: Clock
Reply #1 - Sep 16th, 2006, 3:00pm  
Here's a little bit to help you get started.  You know seconds go from 0 to 60.  Angles of rotation go from 0 to 360 degrees (or 0 to 2*PI radians.)  To convert the range of seconds to radians, then, you divide by 60 and multiply by TWO_PI;

Code:

 int s = second();
 float theta = (s / 60.0) * TWO_PI;


Once you know the angle, you can use it to rotate a line (or whatever shape you choose to indicate seconds.)   This code will place the line in the center of the window (x: width/2, y: height/2).

Code:

 translate(width/2,height/2);
 rotate(-theta);
 line(0,0,width/2,0);


You'll probably also need to investage pushMatrix() and popMatrix() if you need to rotate a line for minutes and hours as well!

Good luck,
Dan
Back to top
 
http://www.learningprocessing.com | http://www.shiffman.net | http://itp.nyu.edu
WWW  
bethadillon
Re: Clock
Reply #2 - Sep 16th, 2006, 7:38pm  
Yeah I do! I'll need three "lines" (i.e. clock hands) at different locations--hours, minutes, seconds. The hour and minute hands conjoin, but the seconds don't.

For reference, here is the image:
http://www.sfu.ca/~bdillon/clock/clockform.jpg

Has anyone figured out a simple grid system to quickly/easily figure out x, y coordinates from Photoshop to Processing? I usually guesstimate and then hit Play, check it, tweak as needed. It seems like there should be something faster...

- Beth
Back to top
 
 
bethadillon
Re: Clock
Reply #3 - Sep 16th, 2006, 8:39pm  
Okay so when I load my image in there, the "seconds" hand stops working. Here's the code (keeping in mind I intend to move the seconds hand to the small circle inside the pocketwatch). Is this a pushMatrix/popMatrix moment?


PImage b; // Setting up pocketwatch image
 
void setup() {
 size(504, 517);
 noStroke();
 noFill();
 b = loadImage("clockform.jpg");
 noLoop();
}

void draw() {
image(b, 0, 0); // Pocketwatch image
int s = second(); // Seconds
float theta = (s / 60.0) * TWO_PI;
translate(width/2,height/2);
rotate(-theta);
smooth();
strokeWeight(2);   // Second hand thickness
stroke(0);
line(0,0,width/2,0);  
}
Back to top
 
 
Daniel Shiffman
Re: Clock
Reply #4 - Sep 17th, 2006, 3:36pm  
Zoinks, you've got "noLoop();" in your code.  That will stop everything dead in its tracks!

http://processing.org/reference/noLoop_.html
Back to top
 
http://www.learningprocessing.com | http://www.shiffman.net | http://itp.nyu.edu
WWW  
bethadillon
Re: Clock
Reply #5 - Sep 17th, 2006, 7:20pm  
HA! I see it now.

(Yes, I am a total beginner.)
Back to top
 
 
bethadillon
Re: Clock
Reply #6 - Sep 18th, 2006, 12:39am  
Okaaaaay...

How do I change the location of the line? If I change the x, y coordinates from 0,0 to values that I assumed would place the line at the center of where the seconds hand should be on the pocketwatch, it changes the way the line moves entirely (no more 360).
Back to top
 
 
Daniel Shiffman
Re: Clock
Reply #7 - Sep 18th, 2006, 2:43pm  
The rotate() functions in processing always rotate around the "origin" point -- 0,0.   The origin point, by default, is in the top left corner.  The translate() function allows you to move the origin point.

http://www.processing.org/reference/translate_.html

Code:

translate(width/2,height/2);


In order to keep the clock-like behavior you always need to start the line at 0,0:

Code:

line(0,0,0,100);


So to move the line and keep the same rotation, just play with translate and leave line @ (0,0)!
Back to top
 
http://www.learningprocessing.com | http://www.shiffman.net | http://itp.nyu.edu
WWW  
bethadillon
Re: Clock
Reply #8 - Sep 18th, 2006, 6:43pm  
Wow. I would have had no idea. THANKS!

- Beth
Back to top
 
 
Page Index Toggle Pages: 1
‹ Previous Topic | Next Topic ›