Results 1 to 7 of 7
  1. #1
    chielt is offline Member
    Join Date
    Nov 2009
    Posts
    26
    Rep Power
    0

    Default Cartoon Eyes applet

    Hi,

    I'm learning Java and bumped into a challenge I don't really know how to solve.
    I'm making an applet with googley eyes, that keep looking at the mouse. chielt[.]com/imp/blaat[.]html is what I got so far. (silly no links under 20 posts policy).

    As you can see the eyes move vertically with the mouse. I didn't add the x-axis because then the pupils just stick to my mouse.

    What I'm trying to figure out is how I can get the pupils to stay within the boundaries of the eyes.

    My source so far:

    Java Code:
    import java.awt.*;
    import java.awt.event.*;
    import java.applet.Applet;
    
    public class Ogen extends Applet implements MouseMotionListener
    {
    	int iPupilX, iPupilY;
    	//radius eyes:
            int iStraalOgen = 75;
    	
    	public void init()
    	{
    		addMouseMotionListener(this);
    	}
    	
    	public void mouseMoved(MouseEvent e)
    	{
    		iPupilX = e.getX();
    		iPupilY = e.getY();
    		repaint();
    	}
    	public void mouseDragged(MouseEvent e)
    	{
    		mouseMoved(e);
    	}
    
    	//Teken de omtrek van een oog met een waarde voor de straal en de x,y waardes voor het middelpunt
            //Draw the circles for the eyes with values for the radius and the coordinates for the center of the eye
    	public void tekenOog(Graphics g, int iStraal, int iMiddelX, int iMiddelY)
    	{
    		g.drawOval(iMiddelX-iStraal, iMiddelY-iStraal, iStraal*2, iStraal*2);
    	}
    	
    	public void tekenPupil(Graphics g, int iStraal, int iMiddelX, int iMiddelY)
    	{
    		g.fillOval(iMiddelX-iStraal, iMiddelY-iStraal, iStraal*2, iStraal*2);
    	}
    	
    	public void paint(Graphics g)
    	{
    		//teken de Ogen
                    //deaw the eyes
    		this.tekenOog(g, iStraalOgen, 175, 100);
    		this.tekenOog(g, iStraalOgen, 400, 100);
    		this.tekenPupil(g, 10, 175, iPupilY);
    		this.tekenPupil(g, 10, 400, iPupilY);
    	}
    	private static final long serialVersionUID = 1;
    }
    I'm not looking for the exact code for fixing my problem, I'm looking for an explanation as to how to tackle my problem.

    Is anyone able to help me on this one?
    Last edited by chielt; 11-21-2009 at 02:08 PM.

  2. #2
    Fubarable's Avatar
    Fubarable is offline Moderator
    Join Date
    Jun 2008
    Posts
    19,315
    Blog Entries
    1
    Rep Power
    26

    Default

    Are you familiar with trigonometry and the math equations of a circle? If so, you'd use these animals to help you solve your problem. First solve the problem on paper before trying to tackle it with code. Myself, I'd create an Eye object that encapsulates each eye's state, I'd give the Eye class variables for the height and width of the eye and for the location of the pupil, and I'd use the MouseMotionListener help me locate the mouse relative to the center of the eye, and then use trig to place each pupil in the correct location, then call repaint.

    Much luck!

    Edit: also -- must you use AWT (Applet) here and not Swing (JApplet)?

  3. #3
    chielt is offline Member
    Join Date
    Nov 2009
    Posts
    26
    Rep Power
    0

    Default

    Well, I have to learn Java for a course in university. They explained how to use scrollbars from awt to make a rgb color mixer. Now we have to use the MouseListener to make the cartoon eyes.

    It sounded a lot easier than it is. Getting te pupils to follow the mouse isn't really the problem. It's getting them to stay in the eyes.

    But because I'm a beginner in Java, I sort of get your explanation, but I don't really grasp it. Maybe you could make it a little less abstract?

    The problem is that I'm having trouble calculating the relative position of the pupil to the eye and applying that to the position of the pupil.

  4. #4
    Fubarable's Avatar
    Fubarable is offline Moderator
    Join Date
    Jun 2008
    Posts
    19,315
    Blog Entries
    1
    Rep Power
    26

    Default

    A first quick example, one that needs to be cleaned up quite a bit:
    Java Code:
    import java.awt.*;
    import java.awt.event.*;
    
    import javax.swing.*;
    
    @SuppressWarnings("serial")
    public class Eye {
       public static final int WIDTH = 100;
       public static final int HEIGHT = 150;
       private static final int STROKE_WIDTH = 2;
       private static final int PUPIL_RADIUS = 15;
       private static final Color EYE_COLOR = Color.black;
       private static final Color PUPIL_COLOR = Color.blue;
    
       private double invWidthSqr = 4.0 / (WIDTH * WIDTH);
       private double invHeightSqr = 4.0 / (HEIGHT * HEIGHT);
    
       private final JPanel mainPanel = new JPanel() {
          @Override
          protected void paintComponent(Graphics g) {
             super.paintComponent(g);
             myPaint(g);
          }
       };
       private int centerX = (WIDTH / 2) + STROKE_WIDTH;
       private int centerY = (HEIGHT / 2) + STROKE_WIDTH;
       private int pupilCenterX = centerX;
       private int pupilCenterY = centerY;
       public Eye() {
          mainPanel.setPreferredSize(new Dimension(WIDTH + 2 * STROKE_WIDTH, HEIGHT
                   + 2 * STROKE_WIDTH));
       }
    
       protected void myPaint(Graphics g) {
          Graphics2D g2 = (Graphics2D) g;
          g2.setRenderingHint(RenderingHints.KEY_ANTIALIASING,
                   RenderingHints.VALUE_ANTIALIAS_ON);
          Stroke oldStroke = g2.getStroke();
          g2.setStroke(new BasicStroke(STROKE_WIDTH));
          g2.setColor(EYE_COLOR);
          g2.drawOval(STROKE_WIDTH, STROKE_WIDTH, WIDTH, HEIGHT);
    
          int pX = pupilCenterX - PUPIL_RADIUS;
          int pY = pupilCenterY - PUPIL_RADIUS;
          int pW = 2 * PUPIL_RADIUS;
          int pH = pW;
    
          g2.setStroke(oldStroke);
          g2.setColor(PUPIL_COLOR);
          g2.fillOval(pX, pY, pW, pH);
       }
    
       public JPanel getMainPanel() {
          return mainPanel;
       }
    
       public void mouseMoved(MouseEvent e) {
          int relativeX = e.getXOnScreen() - mainPanel.getLocationOnScreen().x;
          int relativeY = e.getYOnScreen() - mainPanel.getLocationOnScreen().y;
    
          int x = relativeX - centerX;
          int y = relativeY - centerY;
    
          double xRatio = x * x * invWidthSqr;
          double yRatio = y * y * invHeightSqr;
          double ratioSum = xRatio + yRatio;
    
          if ((ratioSum) > 2.0/3.0) {
             if (x != 0) {
                double theta = Math.atan2(y, x);
                pupilCenterX = (int)(WIDTH * Math.cos(theta) / 3) + centerX;
                pupilCenterY = (int)(HEIGHT * Math.sin(theta) / 3) + centerY;
             }
          }
          else {
             pupilCenterX = relativeX;
             pupilCenterY = relativeY;
          }
          mainPanel.repaint();
       }
    
       private static void createAndShowUI() {
          final Eye leftEye = new Eye();
          final Eye rightEye = new Eye();
    
          JFrame frame = new JFrame("Eye");
          JPanel contentPane = (JPanel) frame.getContentPane();
          contentPane.setLayout(new FlowLayout());
          contentPane.setPreferredSize(new Dimension(600, 600));
          contentPane.setBorder(BorderFactory.createEmptyBorder(15, 15, 15, 15));
          contentPane.add(leftEye.getMainPanel());
          contentPane.add(Box.createHorizontalStrut(15));
          contentPane.add(rightEye.getMainPanel());
          contentPane.addMouseMotionListener(new MouseAdapter() {
             @Override
             public void mouseMoved(MouseEvent e) {
                leftEye.mouseMoved(e);
                rightEye.mouseMoved(e);
             }
          });
    
          frame.setDefaultCloseOperation(JFrame.EXIT_ON_CLOSE);
          frame.pack();
          frame.setLocationRelativeTo(null);
          frame.setVisible(true);
       }
    
       public static void main(String[] args) {
          java.awt.EventQueue.invokeLater(new Runnable() {
             public void run() {
                createAndShowUI();
             }
          });
       }
    }

  5. #5
    chielt is offline Member
    Join Date
    Nov 2009
    Posts
    26
    Rep Power
    0

    Default

    Thanks. Using this I might be able to figure it out.

    I quickly read through it. One thing that strikes me though, is you don't extend or implement any other classes. You do use a MouseListener tho. I thought it was a necessary thing ^^. I know it's kinda offtopic, but I was wondering why.

  6. #6
    Fubarable's Avatar
    Fubarable is offline Moderator
    Join Date
    Jun 2008
    Posts
    19,315
    Blog Entries
    1
    Rep Power
    26

    Default

    To do custom painting, you do need to override a class, but I do it on the small scale, here:
    Java Code:
       private final JPanel mainPanel = new JPanel() {
          @Override
          protected void paintComponent(Graphics g) {
             super.paintComponent(g);
             myPaint(g);
          }
       };
    and then I do all my custom painting in the myPaint(Graphics g) method.

    Otherwise, I try to avoid extending classes unless there is a definite need to do this.

  7. #7
    unplugged is offline Member
    Join Date
    Nov 2009
    Posts
    6
    Rep Power
    0

    Default

    Your post reminded me of this page which I bookmarked for an old project.
    I think it may be what you are trying to do...
    Even if it isn't, it's a fun little java trick. :)
    wsabstract DOT com/script/script2/xeye.shtml

Similar Threads

  1. Replies: 2
    Last Post: 09-29-2009, 04:33 PM
  2. applet to jsp
    By abinesh.s in forum JavaServer Pages (JSP) and JSTL
    Replies: 0
    Last Post: 03-27-2009, 08:33 AM
  3. Calling another applet on click of button in one applet
    By niteshwar.bhardwaj in forum Java 2D
    Replies: 1
    Last Post: 02-19-2009, 01:54 PM
  4. applet
    By amith in forum AWT / Swing
    Replies: 1
    Last Post: 05-16-2008, 04:24 AM
  5. Replies: 4
    Last Post: 06-08-2007, 07:15 AM

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •