How to create an interactive animation?

Question

So my teacher wants me to make an interactive animation. The problem is that he didn't tell the class how to do it. (It's an online course). The gist is that he wants me to make a graphic that can be controlled with the keyboard. I've looked around online but apparently I haven't been asking the right questions because for some reason I'm coming up empty.

Anyways. I have three code files. Zorx1, Zorx2, and Zorx3 which are just the same alien with minor differences in color, which was given by the teacher.

// The Zorx alien object
import java.awt.*;
public class Zorx1
{
/* the fields of the object defined here as static to make the 
interface as simple as possible to start*/
static int x = 100, y = 100;
static int size = 50;
static Color clr = Color.red;
static boolean showing = false;
// paints Zorx on the screen Note this method is not part of Interface
static void paint (Graphics g)
{
    g.setColor (clr);
    g.fillRect (x, y, size / 4, size);
    g.setColor (Color.black);
    g.drawLine (x-3,y-2,x-1,y+size/8);//These four lines will add fangs to this guy. Nasty!
    g.drawLine (x-2,y-2,x-1,y+size/8);
    g.drawLine (x+3,y-2,x+5,y+size/8);
    g.drawLine (x+2,y-2,x+4,y+size/8);
    g.setColor (clr);
    g.fillOval (x - (3 * size / 8), y - (size / 2), size, size / 2);
    g.drawLine (x - 3 * size / 8, y + size, x - 3 * size / 8 + size, y + size);
    g.drawLine (x, y + size / 2, x - size, y);
    g.drawLine (x - size, y, x - size, y - size / 4);
    g.drawOval (x - size - size / 8, y - size / 4 - size / 8, size / 8, size / 8);
    g.setXORMode (Color.black); //Makes his eyes black. Sinister
    g.fillOval (x - size / 4, y - size / 3, size / 12, size / 12);
    g.fillOval (x + size / 4, y - size / 3, size / 12, size / 12);
    g.fillOval (x - size / 1000, y - size / 4, size / 12, size / 12); //adds a third eye to our alien. Spooooooooky.
    g.setPaintMode ();
} // end of paint method

// Show the Zorx alien. The show method is part of the interface.
public static void show (Graphics g)
{
    paint (g);
    showing = true;
} // end of show method

// Erase Zorx from the screen. The erase method
// is not part of the interface.
static void erase (Graphics g, Color backgroundColor)
{
    g.setColor (backgroundColor);
    g.fillRect (x, y, size / 4, size);
    g.fillOval (x - (3 * size / 8), y - (size / 2), size, size / 2);
    g.drawLine (x-3,y-2,x-1,y+size/8);
    g.drawLine (x-2,y-2,x-1,y+size/8);
    g.drawLine (x+3,y-2,x+5,y+size/8);
    g.drawLine (x+2,y-2,x+4,y+size/8);
    g.drawLine (x - 3 * size / 8, y + size, x - 3 * size / 8 + size, y + size);
    g.drawLine (x, y + size / 2, x - size, y);
    g.drawLine (x - size, y, x - size, y - size / 4);
    g.drawOval (x - size - size / 8, y - size / 4 - size / 8, size / 8, size / 8);
    g.fillOval (x - size / 4, y - size / 3, size / 12, size / 12);
    g.fillOval (x + size / 4, y - size / 3, size / 12, size / 12);
} // end of erase method

// Hide Zorx The hide method is part of the interface.
public static void hide (Graphics g, Color backgroundColor)
{
    erase (g, backgroundColor);
    showing = false;
} // end of hide method

// Move Zorx from one location to another. The move method
// is part of the interface.
public static void move (int newX, int newY, Graphics g, Color backgroundColor)
{
    if (showing)
    {
        erase (g, backgroundColor);
    }
    x = newX;
    y = newY;
    if (showing)
    {
        show (g);
    }
} // end of move method
} // end of Zorx Class

The alien object has all the methods and everything necessary to move the object around, while the Animation is supposed to control all of this.

import java.io.*;
import javax.swing.*;
import java.awt.*;
import java.awt.event.*;
public class Animation extends JFrame implements KeyListener
{
    public Animation (Graphics g)
    {
        Zorx1.show(g);
        Zorx2.show(g);
        Zorx3.show(g);
        this.setFocusable(true);
    }
    public static void main (String args[])
    {
        Animation application = new Animation(g);
        application.setVisible(true);
    }
    public int x=100;
    public int y=100;
    public void keyPressed (KeyEvent e)
    {
        switch (e.getKeyCode()) //I can't seem to get this thing to animate through this so this is just left blank for the sake of necessity.
        {
            case KeyEvent.VK_LEFT:
            break;
            case KeyEvent.VK_RIGHT:
            break;
            case KeyEvent.VK_DOWN:
            break;
            case KeyEvent.VK_UP:
            break;
        }
    }
    public void keyTyped(KeyEvent e) 
    {
        if (e.getKeyChar() == KeyEvent.VK_LEFT) 
        {
            left(g);
        }
        else if (e.getKeyChar() == KeyEvent.VK_RIGHT)
        {
            right(g);
        }
        else if (e.getKeyChar() == KeyEvent.VK_UP)
        {
            up(g);
        }
        else if (e.getKeyChar() == KeyEvent.VK_DOWN)
        {
            down(g);
        }
        if (e.getKeyChar() == KeyEvent.VK_ESCAPE) 
        {
            System.exit(0);
            // If you hit escape you will exit the animation
        }
    }
    public void left (Graphics g)
    {
        x=x-10;
        Zorx1.move (x,y, g, getBackground ());
        Zorx2.move (x,y+50,g,getBackground());
        Zorx3.move (x,y+100,g,getBackground());
    }
    public void right (Graphics g)
    {
        x=x+10;
        Zorx1.move (x,y,g,getBackground());
        Zorx2.move (x,y+50,g,getBackground());
        Zorx3.move (x,y+100,g,getBackground());
    }
    public void up(Graphics g)
    {
        y=y-10;
        Zorx1.move (x,y,g,getBackground());
        Zorx2.move (x,y+50,g,getBackground());
        Zorx3.move (x,y+100,g,getBackground());
    }
    public void down(Graphics g)
    {
        y=y+10;
        Zorx1.move (x,y,g,getBackground());
        Zorx2.move (x,y+50,g,getBackground());
        Zorx3.move (x,y+100,g,getBackground());
    }
    public void keyReleased(KeyEvent e)
    {
        switch (e.getKeyCode()) 
        {
            case KeyEvent.VK_LEFT:
            break;
            case KeyEvent.VK_RIGHT:
            break;
            case KeyEvent.VK_DOWN:
            break;
            case KeyEvent.VK_UP:
            break;
        }
    }
}

I understand that the code above doesn't work, but that's probably because I have no idea what the heck I'm supposed to be doing.

I figured out what was causing the overriding static method problem. I had added extends JFrame to the zorx1.java thing and that had caused a conflict with the paint (Graphics g) part. So I just renamed it into make (Graphics g). Hopefully that will not cause complications.

I think I should be able to move the keyboard interactive part into a different class (I hope) but I have a problem with that too.

public class Animation extends JFrame
{
    public int x=100;
    public int y=100;
    public Animation (Graphics g)
    {

        Zorx1.show(g);
        Zorx2.show(g);
        Zorx3.show(g);
    }

    public static void main (String args[])
    {
        Animation application = new Animation (g);
    }

new Animation (g); can't find the symbol g. And I can't add it in anywhere because it will cause a problem. How can I make it recognize the symbol, or have I never needed it in the first place?

    public Animation ()
    {
        repaint();
    }
    public void paintComponent (Graphics g)
    {
        super.paintComponent(g);
        Zorx1.show(g);
        Zorx2.show(g);
        Zorx3.show(g);
    }

Okay, I think I got it, but super.paintComponent(g); is returning an error in which it says: "cannot find symbol - method paintComponent(java.awt.Graphics)."

Fixed it. Finally.

Answer 1

Suggestions:

• Read the Swing graphics tutorials to see the best ways to draw with Swing. You appear to be making a lot of your graphics code up, and this simply won't work. Go to the source and learn to do it right. Google will help you find these tutorials.
• For instance, you shouldn't draw directly on the JFrame.
• Instead draw in a JComponent's (such as a JPanel's) paintComponent(...) method.
• Avoid using KeyListeners but instead use Key Bindings.
• Use a Swing Timer for your animation loop.
• You can find many examples of this (including mine) on this site with a little searching. For example please have a look here.

Edit: your latest code attempts to do animation in a JFrame constructor which isn't going to work. As noted above, the GUI drawing must be in the paintComponent(Graphics g) override method of a JPanel or JComponent. Here you can use the Graphics object that the JVM passes into the paintComponent(Graphics g) method.