watch hands

Hello. I am a complete beginner and would like to learn how to render triangular clock hands. Help anyone? I use this for rectangular:

function drawHand(dc, angle, length, width)

    {

        // Map out the coordinates of the watch hand

        var coords = [ [-(width/2),0], [-(width/2), -length], [width/2, -length], [width/2, 0] ];

        var result = new [4];

        var centerX = 74;

        var centerY = 74;

        var cos = Math.cos(angle);

        var sin = Math.sin(angle);



        // Transform the coordinates

        for (var i = 0; i < 4; i += 1)

        {

            var x = (coords[0] * cos) - (coords[1] * sin);

            var y = (coords[0] * sin) + (coords[1] * cos);

            result= [ centerX+x, centerY+y];

        }



        // Draw the polygon

        dc.fillPolygon(result);

        dc.fillPolygon(result);

    }[/CODE]

travis.vitek over 10 years ago

The array of coordinates specifies the points that are used for the watch hand. Imagine that width is 10 and length is 100. Given that, the array is something like this...

var coords = [ [-5,0], [-5, -10], [5, -10], [5, 0] ];

If you graph these points on a sheet of graph paper where the vertical axis (Y) is inverted (infinity is down), you'd see something like this...

-110 +

     |

-100 +  *---*

     |  |   |

 -90 +  |   |

     |  |   |

 -80 +  |   |

     |  |   |

 -70 +  |   |

     |  |   |

 -60 +  |   |

     |  |   |

 -50 +  |   |

     |  |   |

 -40 +  |   |

     |  |   |

 -30 +  |   |

     |  |   |

 -20 +  |   |

     |  |   |

 -10 +  |   |

     |  |   |

  +--+--*---*--+

     | -5 0 5

     +

All you need to do is draw your arrow on some graph paper and then translate the points on the graph paper into coordinates.

If you just wanted to make the hand pointy at one end but the same length, you could use...

var coords = [ [-width / 2,0], [0, -length], [width / 2, 0] ];

Stanislav.Bures over 10 years ago

Thank you very much for your explanation, but rendered with three points does not work. I used this and the result is perfect:
var coords = [ [-(width/2),0], [-1, -length], [1, -length], [width/2, 0] ];

travis.vitek over 10 years ago

The points I suggested work fine, it is just that the existing code doesn't properly handle changing the size of the coords array. Your code works because you're using 4 points like the original. The following would work fine and properly handles changing the size of the coords array.

var coords = [ [-width / 2, 0], [0, -length], [width / 2, 0] ];
var result = new [coords.size()];

var centerX = dc.getWidth() / 2;
var centerY = dc.getHeight() / 2;

var cos = Math.cos(angle);
var sin = Math.sin(angle);

// Transform the coordinates
for (var i = 0; i < coords.size; i += 1)
{

Technically, we don't even need the result array, but I'm not going to bother showing how to remove it.

Travis

Stanislav.Bures over 10 years ago

Thanks for your help - it works ;)