Text in an Animated Box!

[pentacle1]

Hi, I'm trying to create a program that zooms a green box (from small to large) around a string of text. It starts in the center, then spreads to create a rectangle. It's a pretty simple applet, but since drawRect creates a 1-pixel border, I wanted it thicker. So instead, I used arrays to draw multiple boxes around the text to make the appearance thicker (by pixels). But this applet does not work, it creates one green box that is slightly off-center, and then creates a green dot starting from the middle, then traveling to the left corner of the applet. If someone can read this code, I'll be thankful. It will take a genius to sort my code disorganization (sorry, haste.)

import java.applet.*;
import java.awt.*;
import java.awt.event.*;
import java.net.*;

public class MySitepre extends Applet implements Runnable, MouseListener, MouseMotionListener
{
private Rectangle rect = null;

private Color foreground;
private Color background;

private Color selection_color;

private Font font;

private int[] current_pos_x; // current position of one of the boxes
private int[] current_pos_y; // current position of one of the boxes

private int[] current_width; // current width of one
private int[] current_height; // current width of one

// destined position at the end of animation (of one box)
private int[] final_pos_x;
private int[] final_pos_y;

// destined width/height at end of animation (of one)
private int[] final_width;
private int[] final_height;

// start position of one box
private int[] start_pos_x;
private int[] start_pos_y;

/* these string variables are irrelevant to my problem, so ignore anything about strings/fonts, etc. */

private int stringX;
private int stringY;

private int stringHeight;
private int stringTop;

private int pause;

/* values for the arrays, totalNum is the amount of boxes (in this applet, 4) currentNum is for the FOR loops, currentNum2 (is better explained later) */
private int currentNum;
private int currentNum2;
private int totalNum;

private boolean hover;
private boolean clicked;
private boolean animated;

// if the current box is animated or not
private boolean[] expanding_width;
private boolean[] expanding_height;

private boolean running;
private boolean stopped;

private Thread looper;

private String string;

private Image image;

URL url;

public void init()
{
addMouseListener(this);
addMouseMotionListener(this);

foreground = new Color(205, 205, 205);
background = Color.black;

selection_color = Color.green;

// basically everything I explained above, just giving values

totalNum = 4;
currentNum = 0;
currentNum2 = totalNum;

current_pos_x = new int[totalNum];
current_pos_y = new int[totalNum];

current_width = new int[totalNum];
current_height = new int[totalNum];

final_pos_x = new int[totalNum];
final_pos_y = new int[totalNum];

final_width = new int[totalNum];
final_height = new int[totalNum];

start_pos_x = new int[totalNum];
start_pos_y = new int[totalNum];

expanding_width = new boolean[totalNum];
expanding_height = new boolean[totalNum];

pause = 5;

stopped = true;

hover = false;
hover_2 = false;
clicked = false;
animated = false;

for(currentNum = 0; currentNum < totalNum; currentNum++)
{
current_width[currentNum] = 0;
current_height[currentNum] = 0;

expanding_width[currentNum] = false;
expanding_height[currentNum] = false;
}

string = "Text in an animated box!";

font = new Font ("TimesRoman", Font.PLAIN, 24);
}

public void start()
{
if(!running)
{
running = true;
looper = new Thread(this);
looper.start();
}
}

public void stop()
{
running = false;
}

public void run()
{
try
{
while(running)
{
for(currentNum = 0; currentNum < totalNum; currentNum++)
{
if(expanding_width[currentNum])
current_width[currentNum] = current_width[currentNum] + 2;
if(expanding_height[currentNum])
current_height[currentNum] = current_height[currentNum] + 2;

repaint();

looper.sleep(pause);
}
}
}

catch(InterruptedException e)
{
running = false;
}
}

public void update(Graphics g)
{
if(running)
{
if(rect == null)
{
rect = getBounds();

for(currentNum = 0; currentNum < totalNum; currentNum++)
{
final_width[currentNum] = rect.width - (rect.width / 10) - currentNum * 2;
final_height[currentNum] = rect.height - (rect.height / 2) - currentNum * 2;

start_pos_x[currentNum] = (rect.width / 2) - currentNum2;
start_pos_y[currentNum] = (rect.height / 2) - currentNum2;

currentNum2--;
}

image = createImage(rect.width, rect.height);
}

paint(image.getGraphics());
g.drawImage(image, 0, 0, null);

for(currentNum = 0; currentNum < totalNum; currentNum++)
{

if(hover)
{
if(current_width[currentNum] < final_width[currentNum])
{
expanding_width[currentNum] = true;

current_pos_x[currentNum] = current_pos_x[currentNum] - 1;
}

if(current_height[currentNum] < final_height[currentNum])
{
expanding_height[currentNum] = true;

current_pos_y[currentNum] = current_pos_y[currentNum] - 1;
}

if(current_width[currentNum] >= final_width[currentNum])
expanding_width[currentNum] = false;
if(current_height[currentNum] >= final_height[currentNum])
expanding_height[currentNum] = false;
}

else
{
current_pos_x[currentNum] = start_pos_x[currentNum];
current_pos_y[currentNum] = start_pos_y[currentNum];

current_width[currentNum] = 0;
current_height[currentNum] = 0;
}
}
}
}

public void paint(Graphics g)
{
if (rect == null)
return;

g.setColor(background);
g.fillRect(0, 0, rect.width, rect.height);

FontMetrics fm = g.getFontMetrics(font);

stringX = (rect.width - fm.stringWidth(string)) / 2;

stringY = rect.height;
stringY -= fm.getAscent() + fm.getDescent();
stringY /= 2;
stringY += fm.getAscent();

g.setColor(foreground);
g.setFont(font);
g.drawString(string, stringX, stringY);

if(hover)
{
for(currentNum = 0; currentNum < totalNum; currentNum++)
{
g.setColor(selection_color);
g.drawRect(current_pos_x[currentNum], current_pos_y[currentNum], current_width[currentNum], current_height[currentNum]);
}
}
}

public void mousePressed(MouseEvent event) {}
public void mouseDragged(MouseEvent event) {}
public void mouseReleased(MouseEvent event) {}
public void mouseMoved(MouseEvent event) {}
public void mouseClicked(MouseEvent event)
{
if(hover)
{
try { url = new URL("http://www.google.com");}
catch (MalformedURLException e) { System.out.println("Bad URL");}

getAppletContext().showDocument(url);

hover = false;
}

}
public void mouseEntered(MouseEvent event)
{
hover = true;
repaint();
}

public void mouseExited(MouseEvent event)
{
hover = false;

for(currentNum = 0; currentNum < totalNum; currentNum++)
{
current_pos_x[currentNum] = start_pos_x[currentNum];
current_pos_y[currentNum] = start_pos_y[currentNum];
}

repaint();
}

}

In more detail:

The boxes must start out in the coordinates: first box is the very outer box in start position, to the last box, which is the very inner. This sequence must be kept even at the end of its expanding of the width/height. Please try this out, for it is a big help.

With best regards,
Ben

P.S. Don't waste too much time on this if you're getting nowhere. Thanks!

[destin]

Instead of doing arrays, why not just draw two rectangles, one for the outline, and one the same as the background color, then draw the text over it. So it appears that you're drawing a border, when you're really just drawing a green rectangle, with some of it covered by a black rectangle.

[destin]

Here's a simple applet to demonstrate what I'm talking about:

import java.applet.*;
import java.awt.*;

public class BorderDemo extends Applet {
    /** color of the background */
    private Color backColor;

    /** color of the border */
    private Color borderColor;
	
    /** the width of the border */
    private int borderWidth;
	
    /**
     * how far away from the edge of the screen
     * that the border will be
     */
    private int borderDist;
	
    public void init() {
        borderWidth = 10;
        borderDist = 15;
		
        backColor = Color.black;
        borderColor = Color.green;
    }
	
    public void paint(Graphics g) {
        /* 
         * instead of this.getWidth() and this.getHeight(), 
         * you can just do getWidth() or getHeight() i just
         * like to use this because im weird like that
         */
		
        g.setColor(backColor);
        g.fillRect(0, 0, this.getWidth(), this.getHeight());

        g.setColor(borderColor);
        g.fillRect(borderDist, 
                   borderDist, 
                   this.getWidth() - (2 * borderDist),
                   this.getHeight() - (2 * borderDist));
		
        g.setColor(backColor);
        g.fillRect(borderDist + borderWidth, 
                   borderDist + borderWidth, 
                   this.getWidth() - (2 * (borderDist + borderWidth)), 
                   this.getHeight() - (2 * (borderDist + borderWidth)));
    }
}

[pentacle1]

wow, thanks. you saved me a lot of trouble!

Thanks again,
ben

[destin]

Here's basically the same thing with some animation. (i was bored )

import java.applet.*;
import java.awt.*;
import java.awt.event.*;

public class BorderAnimationDemo extends Applet implements Runnable, MouseListener {
	Thread t;
	
	/** color of the background */
	private Color backColor;

	/** color of the border */
	private Color borderColor;
	
	/** the width of the border */
	private int borderWidth;
	
	/**
	 * how far away from the edge of the screen
	 * that the border will be
	 */
	private int borderDist;
	
	public void init() {
		setSize(500, 500);
		
		t = new Thread(this);
		t.start();
		
		addMouseListener(this);
		
		borderWidth = 30;
		borderDist = this.getWidth() / 2;
		
		backColor = Color.black;
		borderColor = Color.green;
	}
	
	public void paint(Graphics g) {
		/* 
		 * instead of this.getWidth() and this.getHeight(), 
		 * you can just do getWidth() or getHeight() i just
		 * like to use this because im weird like that
		 */
		
		g.setColor(backColor);
		g.fillRect(0, 0, this.getWidth(), this.getHeight());

		g.setColor(borderColor);
		g.fillRect(borderDist, 
				   borderDist, 
				   this.getWidth() - (2 * borderDist),
				   this.getHeight() - (2 * borderDist));
		
		g.setColor(backColor);
		g.fillRect(borderDist + borderWidth, 
				   borderDist + borderWidth, 
				   this.getWidth() - (2 * (borderDist + borderWidth)), 
				   this.getHeight() - (2 * (borderDist + borderWidth)));
	}
	
	public void run() {
		try {
			while (true) {
				t.sleep(10);
				
				if (borderDist > 0) {
					borderDist--;
				}
				repaint();
			}
		} catch (InterruptedException e) {
			System.err.println("Error: " + e);
		}
	}
	
	public void mouseEntered(MouseEvent me) {}
	
	public void mouseExited(MouseEvent me) {}
	
	public void mousePressed(MouseEvent me) {
		borderDist = this.getWidth() / 2;
		repaint();
	}
	
	public void mouseClicked(MouseEvent me) {}
	
	public void mouseReleased(MouseEvent me) {}
}

If you click the mouse, it will start over.