Java graphics - how to add delay between paint calls to create animation? - java

I'm designing a simple fractal program in Java that will start by drawing a rectangle then recursively draw rectangles 1/4 the size at each corner. This will repeat and span in all directions until the dimensions converge to 0.
I have the program and design completely functional as of now; however, I'm making additions that I am unsure of how to do. When I run the program, the fractal is shown already complete in the JFrame that pops up. What I want to do is have each rectangle appear individually with a short delay between each one being painted.
I have a class for my main method which simply instantiates a GUI object and calls its run() method. For the most part, all the relevant code exists in these two files.
In the GUI class
public GUI()
{
Dimension screenSize = Toolkit.getDefaultToolkit().getScreenSize();
fractal = new Fractal(this, screenSize.width, screenSize.height);
this.setTitle("Fractals");
this.setSize(screenSize.width, screenSize.height);
this.setDefaultCloseOperation(JFrame.EXIT_ON_CLOSE);
this.getContentPane().add(fractal);
this.setFocusable(true);
this.setVisible(true);
}
public void run()
{
fractal.repaint();
}
In the Fractal class
public Fractal(GUI gui, int width, int height)
{
this.gui = gui;
this.screenWidth = width;
this.screenHeight = height;
}
#Override
protected void paintComponent(Graphics g)
{
super.paintComponent(g);
/* Calculate coordinates and dimensions */
int x = 3 * this.screenWidth / 8;
int y = 3 * this.screenHeight / 8;
int width = this.screenWidth / 4;
int height = this.screenHeight / 4;
/* Draw the center rectangle */
g.setColor(Color.BLACK);
g.fillRect(x, y, width, height);
/* Adjust dimensions for next rectangles */
width /= 2;
height /= 2;
/* Draw rectangles at the corners */
drawTopLeft(g, x - width, y - height, width, height);
drawBottomLeft(g, x - width, y + (2 * height), width, height);
drawTopRight(g, x + (2 * width), y - height, width, height);
drawBottomRight(g, x + (2 * width), y + (2 * height), width, height);
}
public void drawTopLeft(Graphics g, int x, int y, int width, int height)
{
/* Ensure the boundaries lay within the screen */
if(x > 0 && y > 0)
{
/* Draw itself */
g.fillRect(x, y, width, height);
/* Adjust dimensions for next rectangles */
width /= 2;
height /= 2;
/* Draw rectangles at the corners */
if(width > 0 && height > 0)
{
drawTopLeft(g, x - width, y - height, width, height);
drawBottomLeft(g, x - width, y + (2 * height), width, height);
drawTopRight(g, x + (2 * width), y - height, width, height);
}
}
}
public void drawBottomLeft(Graphics g, int x, int y, int width, int height)
{
/* Ensure the boundaries lay within the screen */
if(x > 0 && y + height < screenHeight)
{
/* Draw itself */
g.fillRect(x, y, width, height);
/* Adjust dimensions for next rectangles */
width /= 2;
height /= 2;
/* Draw rectangles at the corners */
if(width > 0 && height > 0)
{
drawTopLeft(g, x - width, y - height, width, height);
drawBottomLeft(g, x - width, y + (2 * height), width, height);
drawBottomRight(g, x + (2 * width), y + (2 * height), width, height);
}
}
}
public void drawTopRight(Graphics g, int x, int y, int width, int height)
{
/* Ensure the boundaries lay within the screen */
if(x + width < screenWidth && y > 0)
{
/* Draw itself */
g.fillRect(x, y, width, height);
/* Adjust dimensions for next rectangles */
width /= 2;
height /= 2;
/* Draw rectangles at the corners */
if(width > 0 && height > 0)
{
drawTopLeft(g, x - width, y - height, width, height);
drawTopRight(g, x + (2 * width), y - height, width, height);
drawBottomRight(g, x + (2 * width), y + (2 * height), width, height);
}
}
}
public void drawBottomRight(Graphics g, int x, int y, int width, int height)
{
/* Ensure the boundaries lay within the screen */
if(x + width < screenWidth && y + height < screenHeight)
{
/* Draw itself */
g.fillRect(x, y, width, height);
/* Adjust dimensions for next rectangles */
width /= 2;
height /= 2;
/* Draw rectangles at the corners */
if(width > 0 && height > 0)
{
drawBottomLeft(g, x - width, y + (2 * height), width, height);
drawTopRight(g, x + (2 * width), y - height, width, height);
drawBottomRight(g, x + (2 * width), y + (2 * height), width, height);
}
}
}
Here is what the output generates.

You need to calculate each rectangle outside of the paintComponent method. Each subsequent one should be stored in an array or list or some data structure. Then call repaint and sleep for 1 second (but don't sleep in the paintComponent method).
Your paintComponent method must then iterate thru the list of rectangles and paint each one. So each time repaint is called, your old ones and then your new one will be painted.
Bottom line, do not do much processing in paintComponent or any other method that runs in the EDT or your application will become unresponsive or not work as desired.
One more thing. Any drawing that you do in paintComponent will not be visible until you leave the method.
I didn't see you image earlier. If you are going to be drawing curves or diagonal lines, then set the following in paintComponent before painting. It will smooth out the graphics.
Graphics2D g2d = (Graphics2D) g;
g2d.setRenderingHint(RenderingHints.KEY_ANTIALIASING, RenderingHints.VALUE_ANTIALIAS_ON);

Related

Creating a 2D Cylinder with Java Graphics

I'm trying to make a cylinder using Java Graphics and the paintComponent() method.
The user of the application can select which shape they want (in this case it's a cylinder) and input the dimensions they want for the shape.
After they input the dimensions and click the submit button, another window will open with the image drawn on it.
My current issue is getting the shape made correctly. I'm currently trying to make two ovals and connect them using two lines. The base will be a red oval and everything else will have no color.
When you submit the dimensions for the cylinder, the sides are never the correct length or in the correct position on the Y-Axis. An example can be view here:
The dimensions for this cylinder: 200 height, 50 radius.
What the cylinder should look like:
300 height, 300 radius
I'll be working on adding the minimal version of the program for testing. However, for right now I'll be providing what the code is for the cylinder itself and the paintComponent() method.
Cylinder:
import java.awt.Color;
public class Cylinder extends Circle {
private int length;
public Cylinder(int radius, int length, Color color) {
super(radius, length, color);
this.length = length;
this.radius = radius;
}
public Cylinder(int newX, int newY, int newRadius, int newLength) {
super(newX, newY, newRadius);
length = newLength;
}
public int getLength() {
return length;
}
public void setLength(int length) {
this.length = length;
}
public int calcArea() {
return (int) Math.ceil( 2 * 3.14 * radius * radius + 2 * 3.14 * radius * length);
}
public int calcVolume() {
return (int) Math.ceil(3.14 * radius * radius * length);
}
public DrawFigure drawFigure() {
DrawFigure cylinder1 = new DrawFigure(4, getRadius(), length);
return cylinder1;
}
public String toString() {
return "Length = " + length + " " + super.toString();
}
}
DrawFigure (paintComponent is the last method):
import java.awt.Color;
import java.awt.Graphics;
import javax.swing.JPanel;
public class DrawFigure extends JPanel {
int type;
int length, width, height, radius;
public DrawFigure() {
super();
type = 5;
}
public DrawFigure(int myType, int myWidth, int myLength, int myHeight) { // Box and Rectangle
super();
type = myType;
length = myLength;
width = myWidth;
height = myHeight;
}
public DrawFigure(int x, int y, int myType, int myWidth, int myLength, int myHeight) {
super();
type = myType;
length = myLength;
width = myWidth;
height = myHeight;
}
public DrawFigure(int myType, int myRadius, int myHeight) {
super();
type = myType;
radius = myRadius;
height = myHeight;
}
public void paintComponent(Graphics g) {
super.paintComponent(g);
if (type == 1) { // Draw Rectangle
} else if (type == 2) { // Draw Box
} else if(type == 3) { // Draw Circle
} else if(type == 4) { // Draw Cylinder
g.setColor(Color.BLACK);
g.drawOval(135, 65, radius, radius - radius / 2);
// Base
g.setColor(Color.RED);
g.fillOval(135, 65 + height, radius, radius / 2);
g.setColor(Color.BLACK);
g.drawLine(135, 65 + height + (height /4), 135, 135);
g.setColor(Color.BLACK);
g.drawLine(135 + radius, 65 + height + (height /4), 135 + radius, 135);
return;
}
}
}
Full code for the program:
Point.java https://pastebin.com/iVgN47e3
Lab6GUI.java https://pastebin.com/bKM790iQ
Rectangle.java https://pastebin.com/MdCrJYeA
Box.java https://pastebin.com/iZCZpUi7
Circle.java https://pastebin.com/aui1NgJi
Cylinder.java https://pastebin.com/fHDNmBXT
DrawFigure.java https://pastebin.com/z8t31put
LessThanOrEqualToZeroException.java https://pastebin.com/4ELEmsNX
LessThanOrGreaterThanException.java https://pastebin.com/1avRUudN
Okay, so drawing an oval extends from the x/y position, with a positive width/height, that would make the oval draw right/down from the x/y position, for example...
So, assuming we start at 0x0, this would mean that the lines would need to start at a y position of radius / 4, given that you're using radius for the width and radius / 2 for the height (I'm not going to mention how that is confusing). This will allow the lines to "appear" that they join the outer edge of the oval (and draw down)
The lines would then be height long. This means the bottom oval would then need to start at height - (radius / 4) ... okay, I had to go and double check this, but remember, the line ends at (radius / 4) + height, this also means that the cylinder is the height + (radius / 2) high in total.
🤪🤯
height=200, radius=50
height=300, radius=300
This prevents scenario where radius / 4 is greater than height, because that would just be a mess
Runnable example...
import java.awt.Color;
import java.awt.Dimension;
import java.awt.EventQueue;
import java.awt.Graphics;
import java.awt.Graphics2D;
import javax.swing.JFrame;
import javax.swing.JPanel;
public class Main {
public static void main(String[] args) {
new Main();
}
public Main() {
EventQueue.invokeLater(new Runnable() {
#Override
public void run() {
JFrame frame = new JFrame();
frame.add(new DrawPane(300, 300));
frame.pack();
frame.setLocationRelativeTo(null);
frame.setVisible(true);
}
});
}
public class DrawPane extends JPanel {
int height, radius;
public DrawPane(int myRadius, int myHeight) {
super();
radius = myRadius;
height = myHeight;
}
#Override
public Dimension getPreferredSize() {
return new Dimension(400, 400);
}
public void paintComponent(Graphics g) {
super.paintComponent(g);
Graphics2D g2d = (Graphics2D) g.create();
int x = (getWidth() - radius) / 2;
int y = (getHeight() - (height + (radius / 4))) / 2;
g2d.translate(x, y);
g2d.setColor(Color.LIGHT_GRAY);
g2d.drawRect(0, 0, radius, height + (radius / 4));
// Base
g2d.setColor(Color.RED);
g2d.fillOval(0, height - (radius / 4), radius, radius / 2);
g2d.setColor(Color.BLACK);
g2d.drawOval(0, 0, radius, radius / 2);
g2d.setColor(Color.BLACK);
g2d.drawLine(0, radius / 4, 0, height);
g2d.drawLine(radius, radius / 4, radius, height);
g2d.dispose();
}
}
}

Bouncing balls - balls passing through boundaries

I've created a bouncing balls animation, that's drawn on a surface (library from my university) that has 2 frames in it, and 2 arrays of balls that half goes to the first frame and the second to the second frame.
For some reason - the balls pass through to y and x axis of their frame.
I've already tried doing some of the solutions that were suggested (like here) and it didn't help..
my code:
public static void updateBalVelocity(Ball ball, int width, int height,
int minWidth, int minHeight) {
// get default value of the dx and dy
double dx = ball.getVelocity().getDx();
double dy = ball.getVelocity().getDy();
// check if the ball is touching the border (x/y axis) and if so -
// change it's directions
if ((ball.getX() + ball.getSize() + dx) >= width) {
dx = (dx > 0) ? -dx : dx;
} else if ((ball.getX() - ball.getSize()) <= minWidth) {
dx = Math.abs(dx);
}
if ((ball.getY() + ball.getSize() + dy) >= height) {
dy = (dy > 0) ? -dy : dy;
} else if ((ball.getY() - ball.getSize()) <= minHeight) {
dy = Math.abs(dy);
}
// apply the velocity to the ball
ball.setVelocity(dx, dy);
}
public static void moveBalls(Ball[] balls, DrawSurface d, int height,
int width, int minHeight, int minWidth) {
for (Ball ball : balls) {
updateBalVelocity(ball, width, height, minWidth, minHeight);
ball.moveOneStep();
d.setColor(ball.getColor());
d.fillCircle(ball.getX(), ball.getY(), ball.getSize());
ball.drawOn(d);
}
}
and in the run method:
while (true) {
...
// move balls
BouncingBallHelper.moveBalls(ballsD1, d, 500, 500, 50, 50);
BouncingBallHelper.moveBalls(ballsD2, d, 600, 600, 450, 450);
gui.show(d);
// wait for 50 milliseconds.
sleeper.sleepFor(50);
}

Drawing a segment of a circle in Java?

I am making a brick breaker game in Java for fun. In this game the bat is a curved arc that goes around the circumference of a circle. I am struggling to make the bat behave properly.
I am drawing an arc that comes from 2 points on the circle:
public void update(){
if(dir == 1){
angle += 0.05;
}else if(dir == 0){
angle -= 0.05;
}
x0 = a + r * Math.cos(angle);
y0 = b + r * Math.sin(angle);
x1 = a + r * Math.cos(angle - 0.1);
y1 = b + r * Math.sin(angle - 0.1);
}
public void draw(Graphics2D g){
g.setColor(Color.black);
g.fillRect(0, 0, GamePanel.WIDTH, GamePanel.HEIGHT);
int tr = (int)Math.sqrt((x0-a)*(x0-a) + (y0-b)*(y0-b));
int x = (int) (a - tr);
int y = (int) (a - tr);
int width = 2*tr;
int height = 2*tr;
int startAngle = (int) (180/Math.PI*Math.atan2(y0-b, x0-a));
int endAngle = (int) (180/Math.PI*Math.atan2(y1-b, x1-a));
g.setColor(Color.white);
g.drawArc(x, y, width, height, startAngle, endAngle);
}
In theory this should work, the second points being generated from the angle going slightly further, but the length of the arc keeps varying in size...? That is where the problem lies.
This here statement breaks the pattern:
int y = (int) (a - tr);
It would make more sense to use
int y = (int) (b - tr);
And then there is the way g.drawArc is being called:
g.drawArc(x, y, width, height, startAngle, endAngle);
The last parameter is the angle of the arc, so I think you want
g.drawArc(x, y, width, height, startAngle, endAngle - startAngle );
possibly even
g.drawArc(x, y, width, height, startAngle, Math.abs(endAngle - startAngle) );

How to add mouse listener to a JPanel image?

I have painted a BufferedImage on a JPanel with the following code.
protected void paintComponent(Graphics g) {
if (image != null) {
super.paintComponent(g);
Graphics2D g2 = (Graphics2D) g;
double x = (getWidth() - scale * imageWidth) / 2;
double y = (getHeight() - scale * imageHeight) / 2;
AffineTransform at = AffineTransform.getTranslateInstance(x, y);
at.scale(scale, scale);
g2.drawRenderedImage(image, at);
}
}
How can I add a mouse click listener to that image? Additionally, I want to get the click coordinate of the image, not the JPanel.
Add a MouseListener to the pane as per normal.
In the mouseClicked method check to see if the Point is within the rectangle of the image...
public void mouseClicked(MouseEvent evt) {
if (image != null) {
double width = scale * imageWidth;
double height = scale * imageHeight;
double x = (getWidth() - width) / 2;
double y = (getHeight() - height) / 2;
Rectangle2D.Double bounds = new Rectangle2D.Double(x, y, width, height);
if (bounds.contains(evt.getPoint()) {
// You clicked me...
}
}
}

Java 2d rotation in direction mouse point

So far I have a java app where I draw a circle(player) and then draw a green rectangle on top(gun barrel). I have it so when the player moves, the barrel follows with it. I want it to find where the mouse is pointing and then rotate the barrel accordingly. For an example of what I mean look at this video I found http://www.youtube.com/watch?v=8W7WSkQq5SU See how the player image reacts when he moves the mouse around?
Here's an image of what the game looks like so far:
So how do I rotate it like this? Btw I don't like using affinetransform or Graphics2D rotation. I was hoping for a better way. Thanks
Using the Graphics2D rotation method is indeed the easiest way. Here's a simple implementation:
int centerX = width / 2;
int centerY = height / 2;
double angle = Math.atan2(centerY - mouseY, centerX - mouseX) - Math.PI / 2;
((Graphics2D)g).rotate(angle, centerX, centerY);
g.fillRect(...); // draw your rectangle
If you want to remove the rotation when you're done so you can continue drawing normally, use:
Graphics2D g2d = (Graphics2D)g;
AffineTransform transform = g2d.getTransform();
g2d.rotate(angle, centerX, centerY);
g2d.fillRect(...); // draw your rectangle
g2d.setTransform(transform);
It's a good idea to just use Graphics2D anyway for anti-aliasing, etc.
Using AffineTransform, sorry, only way I know how :P
public class RotatePane extends javax.swing.JPanel {
private BufferedImage img;
private Point mousePoint;
/**
* Creates new form RotatePane
*/
public RotatePane() {
try {
img = ImageIO.read(getClass().getResource("/MT02.png"));
} catch (IOException ex) {
ex.printStackTrace();
}
addMouseMotionListener(new MouseAdapter() {
#Override
public void mouseMoved(MouseEvent e) {
mousePoint = e.getPoint();
repaint();
}
});
}
#Override
public Dimension getPreferredSize() {
return new Dimension(img.getWidth(), img.getHeight());
}
#Override
protected void paintComponent(Graphics g) {
super.paintComponent(g);
Graphics2D g2d = (Graphics2D) g.create();
double rotation = 0f;
int width = getWidth() - 1;
int height = getHeight() - 1;
if (mousePoint != null) {
int x = width / 2;
int y = height / 2;
int deltaX = mousePoint.x - x;
int deltaY = mousePoint.y - y;
rotation = -Math.atan2(deltaX, deltaY);
rotation = Math.toDegrees(rotation) + 180;
}
int x = (width - img.getWidth()) / 2;
int y = (height - img.getHeight()) / 2;
g2d.rotate(Math.toRadians(rotation), width / 2, height / 2);
g2d.drawImage(img, x, y, this);
x = width / 2;
y = height / 2;
g2d.setStroke(new BasicStroke(3));
g2d.setColor(Color.RED);
g2d.drawLine(x, y, x, y - height / 4);
g2d.dispose();
}
}
Will produce this effect
The red line (point out from the center) will want to follow the cursor.

Categories

Resources