2

Can anyone point me in the right direction to find out how to write expressions for rotating a canvas in android studio. I'm making a watchface and I used part of the code from the provided sample but I need to understand what it means. Here's a part of the code: 

float minuteRotation = time.minute/ 30f * (float) Math.PI

If this can be translated in dummy terms so I can understand how they arrive at those values.

Marcus
  • 6,697
  • 11
  • 46
  • 89
skeete
  • 71
  • 8
  • This is a basic geometry question. I suggest you read up on representation of angles of segments in a circle and the length of the arc represented by degrees, minutes and seconds. One key thing is you shouldn't confuse minutes and seconds in geometry with those used in time and, in particular, the representation on an analogue clock / watch face. Even though there is a correlation, a circle in geometry isn't necessarily representing a clock / watch face but the concept of minutes and seconds as divisions of a degree still apply. – Squonk Mar 14 '15 at 04:18
  • See this article... http://en.wikipedia.org/wiki/Degree_(angle) – Squonk Mar 14 '15 at 04:18
  • You can look at the code for my "xkcd clock" here: https://github.com/jselbie/xkcdclock – selbie Mar 15 '15 at 17:10

3 Answers3

1

if you look at the unit circle Math.PI is at one side and 0 is at the other side, say 0 is time.minute/30 = 0 * Math.PI = 0 or if 30 is time.minute/30 * Math.PI = 1 * Math.PI = Math.PI witch is the other side of the unit circle just like a watch

unit circle

JRowan
  • 6,824
  • 8
  • 40
  • 59
1

Your minuteRotation variable represents the ANGLE through which you will need to rotate the canvas in order to draw the minute hand in the right position. According to the Android APIs this angle must be specified in Radians (not in Degrees), hence the use of the value "Math.PI".

PI radians represents HALF OF A COMPLETE ROTATION, i.e. 180 degrees - a half circle. It is being used (in the expression that you described) merely as a SCALING FACTOR. An alternative(and clearer,) way of writing the same equation would be :

minuteRotation = (time.minute/ 60.0f) * (float) Math.PI * 2.0f

This alternative version makes clearer the meaning of the various numbers:
- "60.0" is a floating point number that represents the maximum number of minutes possible(in a full rotation)
- "Math.PI * 2" radians is the angular equivalent of a FULL CIRCLE ROTATION (i.e. 360 degrees)

The fraction "time.minute/60.0" therefore represents the fraction of a full hour currently being used up. Multiplying this by the expression PI*2 then yields the equivalent portion of a full circle expressed as an ANGLE (in Radians).

Oke Uwechue
  • 314
  • 4
  • 14
  • Thanks for clearing that up and the information is getting me closer to really understanding but when i try to check the that same math for the hourRotation in the provided sample i keep getting confused. float minuteRotation = time.minute / 30f * (float) Math.PI; float hourRotation = ((time.hour + time.minute / 60f) / 6f) * (float) Math.PI; float dateRotation = time.monthDay / 15f * (float) Math.PI; float dowRotation = time.weekDay / 35f * (float) Math.PI; float monthRotation = (time.month / 12f) * (float) Math.PI; – skeete Mar 15 '15 at 18:36
  • and where do i find the values for time.weekDay , time.monthDay etc? – skeete Mar 15 '15 at 18:38
  • Ok. the reason why the **hour** computation looks more involved that the **minute** computation is that the minute hand always jumps from a _whole_ minute tick marker to the next _whole_ minute tick marker. The hour hand however sweeps slowly _continuously_ across the markers, so whenever you compute the hour hand position, you must always add the current minutes as a fraction of an hour. This fraction will make the hour hand move between markers to the appropriate position in its _continuous_ path. That's why they use the expression "(time.hour + time.minute / 60f)" – Oke Uwechue Mar 15 '15 at 22:21
  • as of the time of writing, Google recommends that you use the GregorianCalendar class (http://developer.android.com/reference/java/util/GregorianCalendar.html) to access time, day of week, month, etc. – Oke Uwechue Apr 12 '15 at 19:55
0
canvas.save();
canvas.rotate(45);
canvas.drawRect(166, 748, 314, 890, paint);
canvas.restore();

where 45 - is degrees

Slonorib
  • 79
  • 2
  • 11