PathTransition in loop - java

I have 8x8 Board, where SIZE = 8 and moveHistory is ArrayList of javafx.geometry.Point2D. Here is code :
private class ChessBoard extends Pane {
ImageView knightImageView = new ImageView("image/knight.jpg");
ChessBoard() {
this.setOnMouseClicked(e -> {
startX = (int)(e.getX() / (getWidth() / SIZE));
startY = (int)(e.getY() / (getHeight() / SIZE));
resetMoveHistory();
paint();
});
}
protected void paint() {
this.getChildren().clear();
this.getChildren().add(knightImageView);
knightImageView.setX(startX * getWidth() / SIZE);
knightImageView.setY(startY * getHeight() / SIZE);
knightImageView.setFitWidth(getWidth() / SIZE);
knightImageView.setFitHeight(getHeight() / SIZE);
for (int i = 1; i <= SIZE; i++) {
this.getChildren().add(new Line(0, i * getHeight() / SIZE,
getWidth(), i * getHeight() / SIZE));
this.getChildren().add(new Line(i * getWidth() / SIZE, 0,
i * getWidth() / SIZE, getHeight()));
}
if (moveHistory != null) {
for (int i = 1; i < moveHistory.size(); i++) {
Point2D p1 = moveHistory.get(i - 1);
Point2D p2 = moveHistory.get(i);
PathTransition ptMove = new PathTransition();
Line line = (new Line(
p1.getX() * (getWidth() / SIZE) + getWidth() / SIZE / 2,
p1.getY() * (getHeight() / SIZE) + (getHeight() / SIZE / 2),
p2.getX() * (getWidth() / SIZE) + getWidth() / SIZE / 2,
p2.getY() * (getHeight() / SIZE) + getHeight() / SIZE / 2));
ptMove.setPath(line);
ptMove.setNode(knightImageView);
ptMove.setCycleCount(1);
ptMove.setDuration(Duration.seconds(2));
ptMove.play();
}
}
}
}
What I am trying to do is display the moves with last loop, but it only shows 1 incorrect move and keeps playing it over and over. Where am I going wrong? Any help would be greatly appriecated!

The play() method starts the animation playing and exits immediately. So you effectively start all animations almost simultaneously, and let them all play concurrently. Each animation sets the translateX and translateY properties of your knightImageView, and these values will be set by each of the animations on each rendering frame during the duration of the animations. Whichever animation happens to set the values last will "win" on that frame, and that is the value that will be rendered. So the overall effect will be highly unpredictable.
What you want (I think) is to play one animation after the other. You can do this with a SequentialTransition. You code should probably look something like this:
if (moveHistory != null) {
SequentialTransition sequentialTransition = new SequentialTranstiion();
for (int i = 1; i < moveHistory.size(); i++) {
Point2D p1 = moveHistory.get(i - 1);
Point2D p2 = moveHistory.get(i);
PathTransition ptMove = new PathTransition();
Line line = (new Line(
p1.getX() * (getWidth() / SIZE) + getWidth() / SIZE / 2,
p1.getY() * (getHeight() / SIZE) + (getHeight() / SIZE / 2),
p2.getX() * (getWidth() / SIZE) + getWidth() / SIZE / 2,
p2.getY() * (getHeight() / SIZE) + getHeight() / SIZE / 2));
ptMove.setPath(line);
ptMove.setNode(knightImageView);
ptMove.setCycleCount(1);
ptMove.setDuration(Duration.seconds(2));
sequentialTransition.getChildren().add(ptMove);
}
sequentialTransition.play();
}
One other thing to note here is that the transition moves the image view by manipulating the translateX and translateY coordinates. The setX and setY methods of ImageView that you call probably don't do what you think: see the Javadocs.

Related

Rotate player towards mouse

I want my player rotate towards mouse. Here's the code calculating the angle:
float angle = (float) Math.atan2(MouseInput.getMousePos().y - transform.position.y + transform.size.y / 2,
MouseInput.getMousePos().x - transform.position.x + transform.size.x / 2);
angle = (float) (angle * (180 / Math.PI));
if (angle < 0) {
angle = 360 + angle;
}
transform.rotation = 180 + angle;
And getMousePos() method (it just returns mouse pos relative to window):
public static Vector2 getMousePos() {
Point p = MouseInfo.getPointerInfo().getLocation();
return new Vector2(p.x - Game.w.getAccessToWindow(Acces.WINDOW_JFRAME_ACCES).getLocation().x,
p.y - Game.w.getAccessToWindow(Acces.WINDOW_JFRAME_ACCES).getLocation().y);
}
Can you tell me what's wrong with this code? Player isn't rotating properly.
I tried following this article: https://gamefromscratch.com/gamedev-math-recipes-rotating-to-face-a-point/
Update:
I found this post: Java 2d rotation in direction mouse point
Now I've updated my code to this:
int centerX = (int) (transform.size.x / 2);
int centerY = (int) (transform.size.x / 2);
int mouseX = (int) MouseInput.getMousePos().x;
int mouseY = (int) MouseInput.getMousePos().y;
double angle = Math.atan2(centerY - mouseY, centerX - mouseX) - Math.PI / 2;
transform.rotation = angle;
But still something is off. Try this code for yourself. Maybe I did something wrong somewhere else.

How to repaint a specific area (e.g. circle) in java?

I am trying to make a simple game where you basically have to hit the circles to get a point. But i faced a tiny problem which i couldn't really solve on my own so here is my question how do I repaint a round surface.I used the repaint(Rectangle r) method but it doesn't workout.
public void objectHit(MouseEvent e) {
int distance = 0, deltaX = 0, deltaY = 0, RadiusSqaured = 0;
for (int i = 0; i < obj.length; i++) {
deltaX = e.getX() - obj[i].getPoint().x;
deltaY = e.getY() - obj[i].getPoint().y;
distance = deltaX * deltaX + deltaY * deltaY;
RadiusSqaured = obj[i].getRadius() * obj[i].getRadius();
if (distance <= RadiusSqaured) {
repaint(obj[i].repaintRect());
x = ThreadLocalRandom.current().nextInt(50 + radius / 2, 850 - radius / 2);
y = ThreadLocalRandom.current().nextInt(60 + radius / 2, 750 - radius / 2);
repaint(obj[i].repaintRect());
}
}
}
In JComponent, there is a method for repainting based on a box area. Does this satisfy your requirements?
https://docs.oracle.com/javase/8/docs/api/javax/swing/JComponent.html#repaint-long-int-int-int-int-

How to draw bitmap image on top in arc

I want to draw image on Top in each Arc of Canvas
private void drawImage(Canvas canvas, float tempAngle, Bitmap bitmap,String mValue) {
//get every arc img width and angle
int imgWidth = (radius / mWheelItems.size());
//int imgWidth = (radius / 3);
float angle = (float) ((tempAngle + 360 / mWheelItems.size() /2) * Math.PI / 180);
//calculate x and y
int x = (int) (center + radius / 2 / 2 * Math.cos(angle));
int y = (int) (center + radius / 2 / 2 * Math.sin(angle));
int top=y - imgWidth/2;
int bottom=y +imgWidth/2;
int left=x - imgWidth /2;
int right=x + imgWidth / 2;
Rect rect = new Rect(left, top, right, bottom);
final Rect rect1 = new Rect(x - imgWidth /2 , y - imgWidth / 2 , bitmap.getWidth() , bitmap.getHeight());
canvas.drawBitmap(bitmap, null, rect, null);
}
the Arc is made according to the size of items
The Result is shown like that
But I want the image bitmap shown on top like that of rect. Red also want to large size of images or bitmap
Solved by Specific Tab and Big Screen Tablets
Change the X and Y coordination According to Angle
if(tempAngle==0) {
x = x + 50;
}
if(tempAngle==60) {
y = y + 50;
}
if(tempAngle==120) {
imgWidth = imgWidth-12;
y = y + 20;
x = x - 40;
}
if(tempAngle==180) {
imgWidth = imgWidth+12;
x = x - 50;
}
if(tempAngle==240) {
y = y - 50;
}
if(tempAngle==300) {
y = y - 20;
x = x + 40;
}

How to make some of my rectangles Golden (Ratio)?

i'm not too sure on how to make it so when a rectangle is drawn onto the screen, there's a chance that it will be golden. Here's the current code i have for my game to randomly produce random rectangles:
public void drawRectangle() {
rects.clear();
int x = (int) (Math.random() * getWidth());
int y = (int) (Math.random() * getHeight());
int width = (int) (Math.random() * (getWidth() / 4));
int height = (int) (Math.random() * (getHeight() / 4));
if (x + width > getWidth()) {
x = getWidth() - width;
}
if (y + height > getHeight()) {
y = getHeight() - height;
}
Color color = new Color(
(int) (Math.random() * 255),
(int) (Math.random() * 255),
(int) (Math.random() * 255));
rects.add(new Rect(x, y, width, height, color));
repaint();
}
And heres the code i tried using to make it golden, although this was taken from online, i was jsut trying to get it working: EDIT: This code below is effectively now useless, but i'll keep it in the psot in case its of use
public static double golden(int n) {
if (n == 0) return 1;
return 1.0 + 1.0 / golden(n-1);
}
public static void main(String[] args) {
int n = Integer.parseInt(args[0]);
System.out.println(golden(n));
}
Any help is greatly appreciated! Thanks a bunch yet again
The basic idea is, you want to, randomly, create a golden rectangle (and possibly, randomly create the width or height)
You could use Math.random and if it's within a specified range (ie 0.75-1.0), generate a golden rectangle, but I'm lazy, so I'd use Random#nextBoolean to make the decision itself, for example...
private Random random = new Random(System.currentTimeMillis());
public void drawRectangle() {
rects.clear();
double x = (Math.random() * getWidth());
double y = (Math.random() * getHeight());
double width = 0;
double height = 0;
if (random.nextBoolean()) {
if (random.nextBoolean()) {
width = (Math.random() * (getWidth() / 4));
height = width * 1.618;
} else {
height = (Math.random() * (getHeight() / 4));
width = height * 1.618;
}
} else {
width = (Math.random() * (getWidth() / 4));
height = (Math.random() * (getHeight() / 4));
}
if (x + width > getWidth()) {
x = getWidth() - width;
}
if (y + height > getHeight()) {
y = getHeight() - height;
}
Color color = new Color(
(int) (Math.random() * 255),
(int) (Math.random() * 255),
(int) (Math.random() * 255));
rects.add(new Rect(x, y, width, height, color));
repaint();
}
Because the calculation of the golden width/height will generate a double value, I've opted to use doubles, you'll find that Rectangle2D.Double will be useful here and Graphics2D can paint Shape objects (see Graphics2D#draw and Graphics2D#fill)

How do I linearly scale my pixel coloring?

So I have a project for class I am working on in which you have to create a GUI box filled with circles, except the middle 50% of the screen cannot be filled with circles. Also, the red color value of each circle scales linearly from top to bottom of the screen, 0 at the top, 255 at the bottom. Here is what it should look like:
Here's what I have. I tried doing 255/500 (500 is the height) in order to get a scaling factor which I would then use to multiply all my y coordinates by in order to get the specified red value and it worked. The answer to 255 / 500 is 0.51 and when I used 0.51 instead of y * (255 / getHeight()); it worked. I need it to work with any dimensions of the frame, however, so the 0.51 doesn't work. For some reason the y * (255 / getHeight()) does not work, it appears to be returning 0 as the circles are various shades of blue and green. What can i do to fix this?
The code I have:
public class NewJComponent1 extends JComponent {
public void paintComponent(Graphics g) {
int count = 0;
int diameter = 0;
Random rand = new Random();
while (count < 5000) {
int x = rand.nextInt(getWidth() + 1);
int y = rand.nextInt(getHeight() + 1);
int greenValue = rand.nextInt(256);
int blueValue = rand.nextInt(256);
diameter = rand.nextInt(21) + 10;
int redValue = y * (255 / getHeight());
Color random = new Color (redValue, greenValue, blueValue);
if ((x < (getWidth() / 4) && y <= (getHeight() - diameter))
|| ((x > (getWidth() * .75) && (x < getWidth() - diameter)) && y <= (getHeight() - diameter))
|| (x <= (getWidth() - diameter) && y < (getHeight() / 4))
|| (x <= (getWidth() - diameter) && ((y > (getHeight() * .75)) && (y <= getHeight() - diameter)))){
g.setColor(random);
g.fillOval(x, y, diameter, diameter);
count++;
}
}
System.out.println(getHeight());
System.out.println(getWidth());
}
}
I tried various iterations of the redValue code, swapping order, making a double and typecasting to int, and various other things but I couldn't get it to work. I'm sure its a small mistake that is messing everything up, but anyways thank you for the help regardless. I am using Android Studio, not sure if that really would impact anything.
Replace this line
int redValue = y * (255 / getHeight());
with
int redValue = (int) Math.round(y * (255.0 / (double) getHeight()));
Just changing redValue to an double wouldn't change the fact that 255/getHeight() is integer division.

Categories