draw analog clock

[Strudal]

The digital clock seems to work fine yet would like the animated hands.

I called the clock.timer, then called the procedure ticks. for the second hand I am using the canvas.drawline.

In it I half the width of canvas and half height for the first part, then for the location of x,y to draw the hands, I have used the code,

location of x +radius x sin(degrees)

location of y+radius x cos(degrees)

I have put degrees as the seconds time by 6 as this the degrees I want it to turn at.

The hand turns yet it is completely wrong, it just sometimes on the seconds and rotates the wrong way :/

Can any maths person help? I understand that the graph is x goes to the right and y goes down rather than the normal way, but at a long.

I can upload file, yet need to save it to my computer if anyone can help.

Thanks, :)

[Taifun]

you could take a look at Scott's project (however this is an App Inventor Classic example)

https://groups.google.com/forum/#!searchin/app-inventor-developers-library/clock/app-inventor-developers-library/TkO7I6prZOc/UA-5Fu2QlIUJ

Taifun

[Abraham Getzler]

Scott also has a compass app for AI2 that shows

how to rotate.

https://groups.google.com/forum/#!searchin/app-inventor-developers-library/compass/app-inventor-developers-library/Cmmwl1NZbeY/X5FVnnwUZb0J

It should not take long to draw a colored line in any paint

program and save its .png for use as a rotatable sprite.

ABG

[Abraham Getzler]

Screen shots of your blocks can be uploaded with your post.

Trim the fat off them to make them more readable first,

like Scott's example.

Post to the board, to this thread.

ABG

[Abraham Getzler]

I've attached a screen shot of how simple it was

to rotate a pool cue around a cue ball in AI2 using

a line as a sprite.

You would have to move your x,y under clock control.

(My example dragged x,y)

ABG

[Abraham Getzler]

If you want to do this with trigonometry rather than

sprite headings, here's a road map to solve this.

Say your clock center is at pixels (x0, y0)

(your origin.)  You want to figure (x,y) for the end of

the minutes hand.  (Same for the seconds hand.)

Assume radius R pixels.

Use Divide and Conquer for this problem.  

Each quadrant is likely to be different, 

so solve them separately and see if they 

can be merged later.

Use the mnemonic SOHCAHTOA

Sin = Opposite over Hypotenuse

Cosine = Adjacent over Hypotenuse

Tangent = Opposite over Adjacent

(Say SOHCAHTOA to some one who has dropped

his laptop on his toe, to remember the mnemonic.)

Quad 1:  (t = 0-15 seconds)

Let angle A = the angle formed between the

Y axis and the second hand.

A =  (6 * t)  (degrees)

x = x0 + (R * sin(A))

y = y0 - (R * cos(A))

Sanity check: 

At A=0, x = x0. y = y0 - R

At A = 90, x = x0 + R, y =  y0.

Try this, and see if we got lucky

for the last three quadrants.

We can add if/then tests for the 

remaining quadrant t ranges (15-30, 30-45, 45-60)

later if needed.

ABG

[Strudal]

I am not sure how you show the full blocks.

the degree variable is 6 and it is times by the clock,minutes and clock,seconds variables.

I can display the hour hand yet I need to move it nearer the next hour when the minutes go on. say move a minute marker every 12 minutes.
Thank you very much for the help

[Abraham Getzler]

To get continuous hour hand movement you will need

to calculate the hour hand position in terms of the 

total number of minutes since noon or midnight

(not since the last hour) and use that to point the hour hand.

The are 12 hours per rotation for an hour hand.

That's 12 * 60 = 720 minutes per 360 degree rotation.

That's half a degree per minute.

So if the time is HH:MM, the minutes since noon/midnight

equals MM+(60*HH)

So the degrees since noon/midnight = (MM+(60*HH))/2.

You can reshape your blocks using right-click-external/inline

to make them fit prettier.

ABG