anyone good at math?

[Randall Twede]

i finally thought of a new project. it is an old style analog clock. it has to draw the hands every second. to do this it uses two points, the origin and a point on the circumference. i use 3 array[60] to hold the end points. my problem is with initializing the arrays. lets just consider the second hand for now, the others will be similar. this is what i came up with but it is so convoluted i think there has to be a better way.

O = the origin point
L = the length of the hand(radius)
I = the index into the array and the value returned by Calendar

i have four special cases
I = 0
{
x = O.x
y = O.y - L
}
I = 15
{
x = O.x + L
y = O.y
}
I = 30 {
x = O.x
y = O.y + L
}
I = 45
{
x = O.x - L
y = O.y
}
then i need four seperate for statements
for(1 to 14)
x = O.x + (L/15) * I
y = O.y - (L - (I/15) * L
for(16 to 29)
x = O.x + (L - ((I -15 )/15) * L)
y = O.y + (L/15) * (I - 15)
that should be enough to give you the idea. please tell me there is a better way.

[Jeff Verdegan]

Um, to find the x and y coordinates of a point on a circle, you need the cos and sin of the angle. So read up on math.cos() and math.sin(), and then figure out how to work that into your coordinate system.

[Randall Twede]

ok, that might be a better way.

[Campbell Ritchie]

Cast your mind back six years, to when I was a little greenhorn and I posted this.

After I had explained it face-to-face to Joseph, I helped him implement a clock, and mischievously suggested trying -sin instead of +sin. So he had this clock resolutely ticking away backwards and Elizabeth, the lecturer, came to see how we were getting on. I had to confess that I might have misled Jo slightly, and she laughed out loud when she saw the clock working.

[Randall Twede]

i almost have it working the way i did it, but i do thank you for the link. now i have something to do when i finish(rewrite it the other way)

[Randall Twede]

thanks again Campbell. it turns out the way i was doing it didn't work correctly anyway. the hand moved correctly, but it's length didn't stay the same. it would have worked fine if the clock was square(diamond shaped).

[Randall Twede]

ok, i really need help with this. in the 8 years i spent in college, the only course i ever failed was trigonometry. i took it the very next term and still only got a C. by comparison calculus and probability&statistics were easy. i saved Campbells first post in that old thread and worked on it offline. all i ended up with was this://g.drawLine(origin.x,origin.y,origin.x + Math.cos(angle) * secondHandLength,origin.y - Math.sin(angle) * secondHandLength);
it's good code once i have a variable called angle.
i will post the entire code since it isn't that long.

/*
 * AnalogClock.java
 * Displays the current time on an old syle analog clock
 */

/**
 *
 * Randall Twede
 */

import java.awt.*;
import java.awt.event.*;
import javax.swing.*;
import java.util.Calendar;

public class AnalogClock extends JFrame implements ActionListener
{
    private Calendar now;
    private Clock clock = new Clock();
    private Timer timer = new Timer(1000,this);
    private Point[] seconds = new Point[60];
    private Point[] minutes = new Point[60];
    private Point[] oneFifthHours = new Point[60];
    private Image face = Toolkit.getDefaultToolkit().createImage("blankclock.gif");
    private int second;
    private int minute;
    private int oneFifthHour;
    private final int secondHandLength = 80;
    private final int minuteHandLength = 80;
    private final int hourHandLength = 60;
    private Point origin;

    public AnalogClock()
    {
        setTitle("AnalogClock");
        Container c = getContentPane();
	c.add(clock);
    }

    public void run()
    {
	origin = new Point(clock.getWidth()/2,clock.getHeight()/2);
	populateArrays();
	timer.start();
    }

    public void actionPerformed(ActionEvent e)
    {
	getTime();
	clock.repaint();
    }

    // centers a JFrame
    public void center()
    {
        this.setLocationRelativeTo(null);   
    }

    private void populateArrays()
    {
	int x;
	int y;

	seconds[0] = new Point(origin.x,origin.y - secondHandLength);
	minutes[0] = new Point(origin.x,origin.y - minuteHandLength);
	oneFifthHours[0] = new Point(origin.x,origin.y - hourHandLength);
	for(int i = 1;i < 15;i++)
	{
	    x = origin.x + (secondHandLength/15) * i;
	    y = origin.y - (secondHandLength - ((i * secondHandLength) / 15));
	    seconds[i] = new Point(x,y);
System.out.println("x = " + x);
System.out.println("y = " + y);
	    x = origin.x + (minuteHandLength/15) * i;
	    y = origin.y - (minuteHandLength - (i/15) * minuteHandLength);
	    minutes[i] = new Point(x,y);
	    x = origin.x + (hourHandLength/15) * i;
	    y = origin.y - (hourHandLength - (i/15) * hourHandLength);
	    oneFifthHours[i] = new Point(x,y);
	}
	seconds[15] = new Point(origin.x + secondHandLength,origin.y);
	minutes[15] = new Point(origin.x + minuteHandLength,origin.y);
	oneFifthHours[15] = new Point(origin.x + hourHandLength,origin.y);
	for(int i = 16;i < 30;i++)
	{

	}
	seconds[30] = new Point(origin.x,origin.y + secondHandLength);
	minutes[30] = new Point(origin.x,origin.y + minuteHandLength);
	oneFifthHours[30] = new Point(origin.x,origin.y + hourHandLength);
	for(int i = 31;i < 45;i++)
	{

	}
	seconds[45] = new Point(origin.x - secondHandLength,origin.y);
	minutes[45] = new Point(origin.x - minuteHandLength,origin.y);
	oneFifthHours[45] = new Point(origin.x - hourHandLength,origin.y);;
	for(int i = 46;i < 60;i++)
	{

	}
    }

    private void getTime()
    {
	now = Calendar.getInstance();
	second = now.get(Calendar.SECOND);
	minute = now.get(Calendar.MINUTE);
	oneFifthHour = (now.get(Calendar.HOUR) * 5) + (minute / 12);
    }

    class Clock extends JPanel
    {
    	public Clock()
    	{
    	}

    	public void paintComponent(Graphics g)
    	{
	    super.paintComponent(g);
	    g.drawImage(face, 0, 0, null);
	    //g.drawLine(origin.x,origin.y,origin.x + Math.cos(angle) * secondHandLength,origin.y - Math.sin(angle) * secondHandLength);
	    g.drawLine(origin.x,origin.y,100,180);
	    g.drawLine(origin.x,origin.y,40,100);
	    g.setColor(Color.RED);
	    g.drawLine(origin.x,origin.y,seconds[0].x,seconds[0].y);
    	}
    }

    // create and display an instance of AnalogClock
    public static void main(String args[])
    {
        AnalogClock clock = new AnalogClock();
	clock.setSize(208, 234);
        clock.center();
        clock.setVisible(true);
        clock.setDefaultCloseOperation(EXIT_ON_CLOSE);
	clock.run();
    }
}                                                 

i have two observations. first i might not need the arrays. and second the hour and minute hands might move linearly instead of "ticking" like they would have in my original design. i will copy his second post in that old thread and see if i can figure it out, but any help will be appreciated.

[Campbell Ritchie]

Create a copy of the Graphics object, and cast it to Graphics 2-d. I am not absolutely certain whether this step is necessary, but affine transforms can interfere with each other. Shear is the worst offender, and you are only using scale and translate, so you might not have any problems.
You will have to look in the API, because I am doing this from memory, and you will have to assume some values for the constants. They should be obvious.
You have a clock face, and you move the graphics object with its translate method, so the origin is in the middle of the component

Graphics2D g2d = (Graphics2D) g.create();
g2d.translate(width / 2, height / 2); // Move 0, 0 to middle of component.
gr2d.scale(1.0, -1.0); // Now y goes upwards rather than downwards

Now you need to work out from the time what the angle is. Let us assume you have a minutes int local variable, such that 0 = 12o’clock and 719 = 11.59. Now, the origin of sin and cos work on the assumption that 0° = 3o’clock and they run anti-clockwise.

int minuteRadius = width / 3; // This won't work at all well if you have a display broader than tall ;-) 
int hourRadius = width / 4;
double hourAngle = 2 * Double.PI * (minutes - 3 * MINUTES_IN_HOUR) / MINUTES_IN_HOUR / HOURS_IN_HALF_DAY;
// Or use the Math class method which works out radians directly.
double hourSin = Math.sin(hourAngle);
double hourCos = Math.cos(hourAngle);
int hoursX = (int) (hourCos * hourRadius + 0.5);
int hoursY = (int) (hourSin * hourRadius + 0.5);
g2d.drawLine(0, 0, hoursX, hoursY);
double minuteAngle = 2 * Double.PI * (minutes - 3 * MINUTES_IN_HOUR / HOURS_IN_HALF_DAY);
double minuteSin = Math.sin(minuteAngle);
double minuteCos = Math.cos(minuteAngle);
// and drawing the minute hand should be similar

This is from memory, so I cannot guarantee it is correct; please tell me if you find an error. Note you have to double up the angles because a circle is not π radians but 2π radians round.

[Randall Twede]

thanks Campbell, i was just frustrated i couldn't figure it out. but after a good night sleep, i see i am very close. i don't need any arrays. i just have to figure out the 3 angles in actionPerformed(), then use them in paintComponent(). so i guess it is easy.

thanks also for the advice about shear i noticed that and thought my other program that drew lines didn't have that problem.

i posted the rest of this message before actually reading your reply. are you trying to confuse me?
your original link explains it pretty well.
i'll figure it out thanks to you though. and i will post the final source code and a link to the image file so you can all have a clock on me.

[Campbell Ritchie]

I set Eclipse to work this morning and got this:

/**
 * 
 */
package clock;

import static java.lang.Math.PI;
import static java.lang.Math.cos;
import static java.lang.Math.min;
import static java.lang.Math.sin;

import java.awt.BorderLayout;
import java.awt.Color;
import java.awt.Graphics;
import java.awt.Graphics2D;

import javax.swing.JPanel;

/**
 * @author campbell Draws a clock face
 */
public class ClockPanel extends JPanel
{

    /**
     * 
     */
    private static final long serialVersionUID = -8441037718287588115L;

    /**
     * Creates a {@link ClockPanel} object without double-buffering, using a
     * {@link BorderLayout}.
     */
    public ClockPanel()
    {
        this(false);
        // TODO Auto-generated constructor stub
    }

    /**
     * Creates a {@link ClockPanel} object, using a {@link BorderLayout}.
     * 
     * @param isDoubleBuffered
     *            Whether double-buffered
     */
    public ClockPanel(boolean isDoubleBuffered)
    {
        super(new BorderLayout(), isDoubleBuffered);
        this.setBackground(new Color(0xff, 0xdf, 0xbf));
    }

    private static final int HOURS_IN_HALF_DAY = 12;
    private static final int MINUTES_IN_HOUR   = 60;
    private int              hour;
    private int              minute;

    /**
     * @return hour
     */
    public final int getHour()
    {
        return hour;
    }

    /**
     * @param hour
     *            to set the hour field
     */
    public final void setHour(int hour)
    {
        this.hour = hour;
        this.repaint();
    }

    /**
     * @return minute
     */
    public final int getMinute()
    {
        return minute;
    }

    /**
     * @param minute
     *            to set the minute field
     */
    public final void setMinute(int minute)
    {
        this.minute = minute;
        this.repaint();
    }

    /**
     * Paints the component with a clock face.
     * 
     * @see javax.swing.JComponent#paintComponent(java.awt.Graphics)
     */
    @Override
    protected void paintComponent(Graphics g)
    {
        super.paintComponent(g);
        Graphics2D g2d = (Graphics2D) g.create();
        g2d.translate(getWidth() * 0.5, getHeight() * 0.5);
        g2d.scale(1.0, -1.0);
        int hourRadius = min(getWidth(), getHeight()) / 4;
        int minuteRadius = min(getWidth(), getHeight()) / 3;
        double hourAngle = 2 * PI * hour / HOURS_IN_HALF_DAY;
        double minuteAngle = 2 * PI * minute / MINUTES_IN_HOUR;
        int hourX = (int) (hourRadius * sin(hourAngle) + 0.5);
        int hourY = (int) (hourRadius * cos(hourAngle) + 0.5);
        g2d.drawLine(0, 0, hourX, hourY);
        int minuteX = (int) (minuteRadius * sin(minuteAngle) + 0.5);
        int minuteY = (int) (minuteRadius * cos(minuteAngle) + 0.5);
        g2d.drawLine(0, 0, minuteX, minuteY);
        g2d.fillOval(-3, -3, 6, 6);
    }

}

. . . complete with serial version UID And I forgot I didn’t need a Layout.
The hands weren’t behaving as I thought, presumably because subtracting 3o’clock is only necessary when you don’t transform the Graphics object.

/**
 * 
 */
package clock;

import java.awt.BorderLayout;

import javax.swing.JFrame;
import javax.swing.JSlider;
import javax.swing.SwingUtilities;
import javax.swing.event.ChangeEvent;
import javax.swing.event.ChangeListener;

/**
 * @author campbell
 * 
 */
public class ClockDemo
{

    /**
     * @param args
     *            You can enter a title to show on the frame.
     */
    public static void main(final String[] args)
    {
        SwingUtilities.invokeLater(new Runnable()
            {
                /**
                 * Sets up the GIU for the clock display
                 */
                @Override
                public void run()
                {
                    if (args.length == 0)
                    {
                        new ClockDemo().setUpGUI();
                    }
                    else
                    {
                        new ClockDemo(args[0]).setUpGUI();
                    }
                }
            });
    }// end main

    /**
     * The title to apply to the frame to be displayed
     */
    private final String title;

    /**
     * Public empty constructor with default title of "clock"
     */
    public ClockDemo()
    {
        this("clock");
    }

    public ClockDemo(String title)
    {
        this.title = title;
    }// end constructor

    public void setUpGUI()
    {
        JFrame frame = new JFrame(title);
        frame.setDefaultCloseOperation(JFrame.EXIT_ON_CLOSE);
        frame.setBounds(50, 50, 250, 200);
        final ClockPanel panel = new ClockPanel();
        frame.add(panel);
        final JSlider hourSlider = new JSlider(JSlider.VERTICAL, 1, 12, 12);
        hourSlider.setMajorTickSpacing(1);
        hourSlider.setPaintLabels(true);
        hourSlider.setSnapToTicks(true);
        hourSlider.addChangeListener(new ChangeListener()
            {

                @Override
                public void stateChanged(ChangeEvent e)
                {
                    panel.setHour(hourSlider.getValue());
                }
            });
        final JSlider minSlider = new JSlider(JSlider.VERTICAL, 0, 59, 0);
        minSlider.setMajorTickSpacing(5);
        minSlider.setPaintLabels(true);
        minSlider.setPaintTicks(true);
        minSlider.addChangeListener(new ChangeListener()
            {

                @Override
                public void stateChanged(ChangeEvent e)
                {
                    panel.setMinute(minSlider.getValue());
                }
            });
        frame.add(hourSlider, BorderLayout.WEST);
        frame.add(minSlider, BorderLayout.EAST);
        frame.setVisible(true);
    }
}

[Randall Twede]

i finished it this morning.
i didn't use a layout either
it does have a little shear, but not too bad though

/*
 * AnalogClock.java
 * Displays the current time on an old syle analog clock
 */

/**
 * Created 11/2011
 * By Randall Twede
 */

import java.awt.*;
import java.awt.event.*;
import javax.swing.*;
import java.util.Calendar;

public class AnalogClock extends JFrame implements ActionListener
{
    private Calendar now;
    private Clock clock = new Clock();
    private Timer timer = new Timer(1000,this);
    private Image face = Toolkit.getDefaultToolkit().createImage("blankclock.gif");
    private int second;	// the second
    private int minute;	// the minute
    private int hour;	// the hour
    private double secondAngle;	// the angle of the second hand
    private double minuteAngle;	// the angle of the minute hand
    private double hourAngle;	// the angle of the hour hand
    private final int secondLength = 80;	// the length of the second hand
    private final int minuteLength = 80;	// the length of the minute hand
    private final int hourLength = 60;		// the length of the hour hand
    private Point origin;

    public AnalogClock()
    {
        setTitle("AnalogClock");
        Container c = getContentPane();
	c.add(clock);
    }

    public void run()
    {
	origin = new Point(clock.getWidth()/2,clock.getHeight()/2);
	timer.start();
    }

    public void actionPerformed(ActionEvent e)
    {
	getTime();
	hourAngle = (Math.PI/2 - (hour % 12) * (Math.PI / 6)) - (minute % 60) * (Math.PI / 360);
	minuteAngle = Math.PI/2 - (minute % 60) * (Math.PI / 30);
	secondAngle = Math.PI/2 - (second % 60) * (Math.PI / 30);
	clock.repaint();
    }

    // centers a JFrame
    public void center()
    {
        this.setLocationRelativeTo(null);   
    }


    private void getTime()
    {
	now = Calendar.getInstance();
	hour = now.get(Calendar.HOUR);
	minute = now.get(Calendar.MINUTE);
	second = now.get(Calendar.SECOND);
    }

    class Clock extends JPanel
    {
    	public void paintComponent(Graphics g)
    	{
	    super.paintComponent(g);
	    g.drawImage(face, 0, 0, null);
	    g.drawLine(origin.x,origin.y,(int)(origin.x + Math.cos(hourAngle) * hourLength),(int)(origin.y - 

Math.sin(hourAngle) * hourLength));
	    g.drawLine(origin.x,origin.y,(int)(origin.x + Math.cos(minuteAngle) * minuteLength),(int)(origin.y - 

Math.sin(minuteAngle) * minuteLength));
	    g.setColor(Color.RED);
	    g.drawLine(origin.x,origin.y,(int)(origin.x + Math.cos(secondAngle) * secondLength),(int)(origin.y - 

Math.sin(secondAngle) * secondLength));
    	}
    }

    // create and display an instance of AnalogClock
    public static void main(String args[])
    {
        AnalogClock clock = new AnalogClock();
	clock.setSize(208, 234);
        clock.center();
        clock.setVisible(true);
        clock.setDefaultCloseOperation(EXIT_ON_CLOSE);
	clock.run();
    }
}

thanks for the help. i'm glad i didn't have to relearn trig so i could figure it out myself.

[Campbell Ritchie]

Well done

There is no need for the % operations. If you calculate the angle correctly for 1o’clock, you can use 13 25 or 37o’clock, and get the same sin and cos.

[Randall Twede]

Campbell, i tried what you first mentioned, using -sin for x.
it's funny, seeing a digital clock counting down looks normal, but seeing an analog clock running backwards looks wrong. a lifetime of conditioning i suppose.
if i can find an image of a clock face with the numbers going counter-clockwise i will use it. hehe
i am sure you are right about not needing the mod operators. especially since Calendar takes care of that.

[Campbell Ritchie]

There is an analogue clock running anti-clockwise about 10 feet beyond my left shoulder as I write. When I moved in here, I thought we are all computer scientists, we ought to be able to think laterally, so we can cope with an anti-clockwise clock. There is one in the club where I pay £2.55 for a pint (0.57l) of beer. I see them occasionally in bars, where they ought to be placed opposite a mirror. So few people realise you can read an anti-clockwise clock easily by looking in the mirror! I am tempted to buy my wife such a clock as a present, but I think that might cause ructions
The reason you don’t need the % operator is that sin, cos, etc., take any value for their argument; sin(x) is equal to sin(x % (2π)) for all values of x, with a few reasonable assumptions about sign when x < 0.

[Paul Clapham]

Randall Twede wrote:thanks for the help. i'm glad i didn't have to relearn trig so i could figure it out myself.

You had to take a whole course in trigonometry? I didn't think there was enough content for a whole course (I was a graduate teaching assistant for courses where we spent a week or two covering trigonometry).

The only thing you needed to take away from your trig course was the acronym SOH-CAH-TOA. (Draw a right triangle and pick one of the two non-right-angle corners; then Sine = Opposite/Hypotenuse, Cosine = Adjacent/Hypotenuse, and Tangent = Opposite/Adjacent.) This is pretty much all you'll ever need to know for programming.

[Randall Twede]

it was not only a 3 month course at community college when i took it in the 70's, but it is the only course i failed and had to take again. this is the first time i have had to use it in over 30 years.

[Darryl Burke]

Randall Twede wrote:it does have a little shear, but not too bad though

Graphics2D#setRenderingHint(RenderingHints.KEY_ANTIALIASING, RenderingHints.VALUE_ANTIALIAS_ON)

Every Graphics object in a modern JDK (>1.2) is a Graphics2D subclass.

[Campbell Ritchie]

That isn’t shear. Shear means turning a square into a rhomb. What you have, as DB implies, is aliasing. It causes the oblique lines to look like staircases.

[Randall Twede]

ah yes. aliasing. well it isn't very bad, but since i have nothing to do, i might pursue the hint D.B. gave me.

[Campbell Ritchie]

Quite right. It’s always good to take the opportunity to learn something new.

[Randall Twede]

ah well, all the backward clocks i could find on google had hands so i would have to edit one in Paint to erase the hands. too much bother for now.

[Randall Twede]

here is something interesting. i cast the Graphics g to Grapics2D and called it g2.
Graphics2D g2 = (Graphics2D)g;
i set the antialiasing to on and ran it and it was much smoother. then i went back to the code to change the stroke to make the hour and minute hand wider and i noticed i was still using g to draw the lines. but the antialiasing worked anyway.

one question though. the current code is this

	    super.paintComponent(g);
	    g.drawImage(face, 0, 0, null);
	    Graphics2D g2 = (Graphics2D)g;

should i move the third line to before the other two and use g2 in those lines? does it matter?