how to rotate a clock face image according to the computer clock?
in
Programming Questions
•
8 months ago
Hello there,
We have a processing course at uni but we've got only a short glimpse of how to code with processing - yet we have to write the code for a clock.
This is the sketch of my idea. Not the hands turn, but the clock face, so that you have the current time at the top.
My problem is how to rotate those two images I made for the clockface according to the computer's clock...
Here's my code:
- int cx, cy;
- float secondsRadius;
- float minutesRadius;
- float hoursRadius;
- PImage mkreis; //image for minutes
- PImage skreis; //image for hours
- float winkel = radians(0);
- void setup () {
- smooth();
- size (1000, 800);
- frameRate(1); //1 Sekunde
- int radius = min(width, height) / 2;
- secondsRadius = 240;
- minutesRadius = radius * 0.60;
- hoursRadius = radius * 0.50;
- cx = 0;
- cy = 0;
- mkreis = loadImage("minutenkreis.png");
- skreis = loadImage("stundenkreis.png");
- }
- void draw() {
- background (31, 37, 41);
- int s = second();
- int m = minute();
- int h = hour();
- pushMatrix();
- translate(width/2, height/2);
- imageMode(CENTER); //hours
- image(skreis, 0, 0);
- imageMode(CENTER); //minutes
- image(mkreis, 0, 0);
- rotate(winkel);
- stroke(226, 222, 213); //seconds
- strokeWeight(20);
- noFill();
- ellipse(0, 0, 480, 480);
- winkel += radians (6); // 360 degrees divided by 60sec
- // Draw the minute ticks
- strokeWeight(4);
- stroke(31, 37, 41);
- beginShape(POINTS);
- for (int a = 0; a < 360; a+=6) {
- float angle = radians(a);
- float x = cx + cos(angle) * secondsRadius;
- float y = cy + sin(angle) * secondsRadius;
- vertex(x, y);
- }
- endShape();
- popMatrix();
- pushMatrix();
- translate(width/2, height/2);
- stroke(153, 117, 101); // black frame around the time
- strokeWeight(4);
- noFill();
- rectMode(CENTER);
- rect (0, -190, 30, 380);
- fill(255); //center
- noStroke();
- ellipse (0, 0, 5, 5);
- popMatrix();
- }
1