Develop Reference

Can I apply 2D transforms to shapes on a JavaFX 8 Canvas?

I'm porting a class that that was previously done in Swing to JavaFX 8. It displays a UI element that looks like an analog electric voltage meter with a half circle surrounded by a collection of "tic marks" at regular intervals. In the Swing version the class was an extension of JPanel and the tic marks were drawn in paintComponent(Graphics g) as follows:
private Line2D ticLine = new Line2D.Float(0, LINE_ROOT_Y, TIC_LENGTH, LINE_ROOT_Y);
public void paintComponent(Graphics g)
{
super.paintComponent(g);
Graphics2D g2 = (Graphics2D) g;
// Draw tic marks
if (ticCount > 0)
{
g2.draw(ticLine); // First tic
AffineTransform ticTrans = new AffineTransform();
// Draw all additional tics rotated around half circle
for (int i = 1; i < ticCount; i++)
{
ticTrans.rotate(Math.toRadians(ticGap),
METER_MIDDLE, METER_BASE_Y);
g2.draw(ticTrans.createTransformedShape(ticLine));
}
}
}
This worked fine.
Now with JavaFX I'm using a class extending VBox. It contains 2 stacked Canvas objects. One of which will draw the static elements like the half circle and tic marks, and the other for the regularly moving meter line. On that first Canvas I was hoping to use a similar loop as I did in the Swing version to easily redraw the first tic mark in a ticCount # of additional positions around the half circle. So I tried the following which compiled and ran but only drew that first tic mark:
// Called from the constructor:
MeterGC = MeterCanvas.getGraphicsContext2D();
Line ticLine = new Line(0, LINE_ROOT_Y, TIC_LENGTH, LINE_ROOT_Y);
// Draw tic marks
if (ticCount > 1)
{
MeterGC.setStroke(Color.GRAY);
MeterGC.setLineWidth(BASIC_LINE_WIDTH);
MeterGC.strokeLine(ticLine.getStartX(), ticLine.getStartY(),
ticLine.getEndX(), ticLine.getEndY());
Rotate ticTrans = new Rotate(Math.toRadians(ticGap), METER_MIDDLE, METER_BASE_Y);
for (int i = 1; i < ticCount; i++)
{
ticLine.getTransforms().add(ticTrans);
MeterGC.strokeLine(ticLine.getStartX(), ticLine.getStartY(),
ticLine.getEndX(), ticLine.getEndY());
}
}
It may be that trying to Transform a Shape object like this only works when drawing to a scene and not on a Canvas. Or that I have to do something after the "ticLine.getTransforms().add(ticTrans)" line to get them to apply to the line. Am I at least close? Or is there a much better way to do what I'm trying here?

What you are doing wrong
In your sample code you are applying the transform to a Line object (which you never display).
How to fix it
You need to set the transform on the canvas GraphicsContext before you stroke the line on the canvas.
Sample code
For an example, see:
How to draw image rotated on JavaFX Canvas?
/**
* Sets the transform for the GraphicsContext to rotate around a pivot point.
*
* #param gc the graphics context the transform to applied to.
* #param angle the angle of rotation.
* #param px the x pivot co-ordinate for the rotation (in canvas co-ordinates).
* #param py the y pivot co-ordinate for the rotation (in canvas co-ordinates).
*/
private void rotate(GraphicsContext gc, double angle, double px, double py) {
Rotate r = new Rotate(angle, px, py);
gc.setTransform(r.getMxx(), r.getMyx(), r.getMxy(), r.getMyy(), r.getTx(), r.getTy());
}

This is my revised for-loop and it works perfectly. Noticing that converting the angle in Rotate to radians is no longer necessary in JavaFX was also key in getting it to work.
for (int i = 1; i < ticCount; i++)
{
Rotate ticTrans = new Rotate(ticGap * i, METER_MIDDLE, METER_BASE_Y);
MeterGC.setTransform(ticTrans.getMxx(), ticTrans.getMyx(), ticTrans.getMxy(),
ticTrans.getMyy(), ticTrans.getTx(), ticTrans.getTy());
MeterGC.strokeLine(ticLine.getStartX(), ticLine.getStartY(),
ticLine.getEndX(), ticLine.getEndY());
}

recursive levels and loop counting

I have a homework assignment that I am ready to turn in, in the assignment I had to use recursion to draw nested circles 10 levels deep, after banging my head against this for a few hours I finally completed it. My only question is, is the image I am drawing 10 levels deep or actually 11?
This question comes from the fact that I have specifically state the recursion to end when it has gone through 10 levels, but I do tell the method to draw the original circles then it calls itself. this is making me think that it draws the first level then goes down 10 to make a total of 11 levels. the Image it creates goes down so far that I can not count the circles :/
any clarification would be appreciated, thanks!
// import statements
import java.awt.*;
import javax.swing.*;
public class RecursiveCircles
{
public static void main(String[] args)
{
// create a new canvas
RCanvas myCanvas = new RCanvas();
// create JFrame
JFrame myJframe = new JFrame();
myJframe.setTitle("Recursive Circles");
// set JFrame size, location and close operation
myJframe.setSize(1500, 500);
myJframe.setLocation(100, 100);
myJframe.setDefaultCloseOperation(JFrame.EXIT_ON_CLOSE);
// and canvas to JFrame and make it visble
myJframe.getContentPane().add(myCanvas);
myJframe.setVisible(true);
} // end main
} // end class RecursiveCircles
/*
* this class will draw the main circle of the image and will have the recursive
* method that draws the two outer circles down 10 levels
*/
class RCanvas extends Canvas
{
// defualt constructor
public RCanvas ()
{}
public void paint (Graphics graphics)
{
// declare variables
String title = "Recursive Circles";
int n = 300; // diamerter of the circle
int xOrigin = 600; // x location of start of circle (makes circle around the origin I wanted
int yOrigin = 100; // y location of start of circle (makes circle around the origin i wanted
int radius = n/2; // radius of circle (half the diamerter
int level = 10;
// make canvas background color black
graphics.setColor(Color.black); // make the background color black
graphics.fillRect(0, 0, 1500, 500); // rectangle that fills the JFrame
// put title on canvas
graphics.setColor(Color.BLUE);
graphics.drawString(title, 725, 50);
// draw main circle
graphics.setColor(Color.WHITE);
graphics.drawOval(xOrigin, yOrigin, n, n);
drawRCircles(graphics,xOrigin,yOrigin,radius,level); // call recrusrive method
System.out.println(level);
} // end paint
/*
* This is the recursive method that will draw the two circles on the outer sides of the
* main circle. it will then call itself and repate the process till it is 10 levels deep
*/
public void drawRCircles(Graphics graphics,int xOrigin,int yOrigin, int radius, int level)
{
int newRadius = (radius/2); // radius of smaller circle
int newXOrigin = xOrigin - (newRadius); // xOrigin of circle on left of the main circle
int newYOrigin = yOrigin + (newRadius); // yOrigin of circle on the right of the main circle
int newXOrigin2 = xOrigin + (newRadius*3); // xOrigin of circle on the right of the main circle
int newYOrigin2 = yOrigin + (newRadius); // yOrigin of circle on the right of the main circle
if (level > 0) // counts down from 10 to make the recursive image 10 levels deep
{
graphics.drawOval(newXOrigin, newYOrigin, newRadius*2, newRadius*2); // draw recursive circle on the left of main circle
graphics.drawOval(newXOrigin2, newYOrigin2, newRadius*2, newRadius*2); // draw recursive circle on the right of main circle
drawRCircles(graphics, newXOrigin, newYOrigin , newRadius, (level-1)); // make recursion of left circle
drawRCircles(graphics, newXOrigin2, newYOrigin2,newRadius,(level-1)); // make recursion of right circle
}// end if
} // end drawRCircles
}// end class

Your code is drawing 11 circles but your call(s) to the drawRCircles itself is responsible for only 10 of them.
More specifically, these lines are drawing 1 circle.
// draw main circle
graphics.setColor(Color.WHITE);
graphics.drawOval(xOrigin, yOrigin, n, n);
This circle gets drawn regardless of whether or not you even have a drawRCircles function. (Try removing it and running your code to see what happens.)
Then, your code calls the drawRCircles function 11 times, but only draws 10 circles since the last call to it, with level = 0 fails the test if(level > 0).
the Image it creates goes down so far that I can not count the circles :/
A quick tip: since you want to know if, given max level of N, will it draw N or N+1 levels of circles, you could also just try changing your level variable to something more manageable (like 2) and checking it visually.
Going back to your code above, and ignoring the draw main circle portion (since it's independent of your recursive circle drawing) you have
drawRCircles(graphics,xOrigin,yOrigin,radius,level); // call recursive method
System.out.println(level);
and within your public void drawRCircles(…) function,
drawRCircles(…,level-1);
Let's check it with level = 2 instead of 10:
drawRCircles(…, 2)
--> Check if 1 > 0.
--> Yes, 1 > 0 so drawRCircles(…, 1)
--> Check if 0 > 0.
--> No, 0 = 0, so stop.
Number of levels = 2 = number of recursive circles drawn.

Moving a Pacman

This is a program I wrote for creating a pacman. I now want the Pacman to move in a straight line from a random start point to a random goal point.
Could you please suggest how to do it.
import javax.swing.JFrame;
/**
* Main class for pacman example. All it does is create a frame and put
* the pacman panel in it.
*/
public class PacmanGUI extends JFrame{
private Pacman pc;
public PacmanGUI(){
super("Pacman");
pc = new Pacman();
this.getContentPane().add(pc);
this.setDefaultCloseOperation(JFrame.EXIT_ON_CLOSE);
this.pack();
this.setVisible(true);
}
public static void main(String[] args) {
new PacmanGUI();
}
}
import javax.swing.*;
import java.awt.*;
import java.awt.event.*;
/**
* Pacman class that extends JPanel and paints a pacman animation.
* It uses Timers and Actionlistener to do the Animation.
*
*/
public class Pacman extends JPanel implements ActionListener{
private int figureSize = 50;
private static final int DELAY = 200;
private double mouthOpenPercentages[] = {.1,.5};
private Timer animationTimer;
private int mouthState = 0;
private Point pacManPosition;
/**
* No args constructor that starts the animation.
*/
public Pacman(){
startAnimation();
}
/**
* Overriden paintComponent method that paints pacman.
*/
public void paintComponent(Graphics g) {
super.paintComponent(g);
pacManPosition = new Point(this.getWidth()/2 - figureSize/2,
this.getHeight()/2 - figureSize/2);
g.fillRect(0,0,this.getWidth(), this.getHeight());
drawPacMan(g);
mouthState = (++mouthState) % mouthOpenPercentages.length;
}
/**
* Stops the animation by stopping the animation timer.
*/
public void stopAnimation(){ animationTimer.stop(); }
/**
* Method do deal with actionevents that are triggered. In this
* case we only have actionevents being triggered from our timer
* and by the more usual case of a button click.
*/
public void actionPerformed(ActionEvent e){ repaint(); }
/**
* Gets the size that this component would like to be.
*/
public Dimension getPreferredSize(){ return new Dimension(400,400); }
/**
* Gets the minimum size for this component.
*/
public Dimension getMinimumSize(){ return new Dimension(200,200); }
/**
* Starts the animation by setting a timer. When this timer goes
* off the actionPerformed method will be triggered, which in
* turn triggers the painting.
*/
private void startAnimation(){
if (animationTimer == null){
mouthState = 0;
animationTimer = new Timer(DELAY, this);
animationTimer.start();
} else { //continue animating..
if (!animationTimer.isRunning())
animationTimer.restart();
}
}
/**
* Draws our little pacman on the given graphics canvas.
* #param g
*/
private void drawPacMan(Graphics g){
Color c = g.getColor();
g.setColor(Color.yellow);
g.fillOval(pacManPosition.x, pacManPosition.y, figureSize, figureSize);
//Change color back to original and draw pacman's mouth
g.setColor(c);
//calculate mouth offsets
int yOffset = (int)((figureSize/2)*mouthOpenPercentages[mouthState]);
//draw the mouth cutout.
int x[] = {pacManPosition.x + figureSize/2, pacManPosition.x + figureSize, pacManPosition.x + figureSize};
int y[] = {pacManPosition.y + figureSize/2,
pacManPosition.y + figureSize/2 + yOffset,
pacManPosition.y + figureSize/2 - yOffset};
g.fillPolygon(x, y, x.length);
}
}

Inside the Pacman class you would need to create 2 more values to store the start and end points. You already have private Point pacManPosition; declared so I would also declare these as Points. You'll want to set pacManPosition initially to the start point.
Point start = // random start point
Point end = // random end point
Point pacManPoint = new Point(start);
Now you'll want to determine the speed you want your Pacman to move at, let's say 2 pixels per frame.
int speed = 2;
To determine how much to move the Pacman each frame, we'll need to do some calculations. First, get the distance of the line -
double distance = Math.sqrt(Math.pow(end.x - start.x, 2) +
Math.pow(end.y - start.y, 2));
Then we calculate how many frames it will take to go that distance at the speed we want.
int totalFrames= (int)Math.round(distance / speed);
And add a frame counter -
int frame = 0;
Now, look inside your paintComponent method. Right now you're setting pacManPosition to the same point (the center of the panel) each time it paints. What you want to do here instead is to update pacManPosition each frame until it gets to the end position. You're doing something similar lower in paintComponent where you're updating mouthState each time to get the mouth to animate. For animating position it will look like -
if (frame < totalFrames) {
pacManPosition.x = start.x + frame * (end.x - start.x) / totalFrames;
pacManPosition.y = start.y + frame * (end.y - start.y) / totalFrames;
frame++;
}
This is only one way to do movement animation, and it assumes several things - constant speed, no need to avoid obstacles, no player control. The calculation in totalFrames isn't exact - it moves pacMan close to the end point, but there's no guarantee it will end exactly there. It is also tied to the frame rate, which has drawbacks. There are many, many other ways to do this depending on the situation.

Problem
You have to manage two animations at the same time.
The first, which you've already coded, opens and closes the Pacman's mouth.
The second animation is responsible for moving the Pacman from one location to another.
Solution - Sprite class
I suggest you create a Sprite class. The Sprite class would be responsible for holding the current position of the sprite, the next position of the sprite, and the speed at which the sprite moves.
You would extend Sprite to get one Pacman class, and a Chaser class with 4 instances.
Pacman class
The Pacman class would be responsible for the mouth animation.
Chaser class
The Chaser class would be responsible for determining whether to chase the Pacman, or run away from the Pacman.
Swing Tips
You should not extend Java Swing components, unless you are overriding one or more of the component classes. You should use Swing components.
You should always start your Swing GUI on the Event Dispatch Thread (EDT). You do this by executing the invokeLater method of SwingUtilities.
You should have a GUI model, separate from your GUI components. The three classes I defined would be part of your GUI model. You also need to lay out a maze.

SWT - Drawing a Moving Image Over Tiles

I've been experimenting with different ways of moving a image over a grid of tiles for a game, but I've been unable to get a working implementation.
First I tried using a grid layout to hold a bunch of Tiles that extended Canvas and drew themselves. This drew the tiles nicely, however it seems that I am unable to draw my Player object on top of them. Originally, the Player also extended Canvas and I intended to have the widget on top of the tiles. It seems like this is impossible.
I then tried to have the Tile simply extend nothing, and just hold the image. I then hold each Tile in a 2D array and draw each Tile by a nested for loop, using the int from the for loop, multiplied by the image size, to draw Tile's Image. I put this code in a PaintListener inside of my constructor for my Map class that extended Canvas and dropped my Map onto my Shell in a Fill layout, but the PaintListener never gets called (I tested with a print statement).
What implementation could I use to draw the Tiles at the start of the game, then allow me to control the movement of my Player image?

I did something similar.
Using a PaintListener I get the calls when the Widget needs to be repainted. In my paint function, I loop over a tile array (wrapped in a World class) and draw all tiles. Afterwards I use the same technique with a worldObjects array/class:
public class WorldWidget extends Canvas {
WorldWidget() {
addPaintListener(new PaintListener() {
#Override
public void paintControl(PaintEvent e) {
WorldWidget.this.paintControl(e);
}
});
}
protected void paintControl(PaintEvent e) {
GC gc = e.gc;
for (short y = 0; y < world.getHeight(); y++) {
for (short x = 0; x < world.getWidth(); x++) {
final ITile tile = world.getTile(x, y);
final Image image = ImageCache.getImage(tile);
gc.drawImage(image, x * tileSize, y * tileSize);
}
}
// Here is used a similar loop, to draw world objects
}
}
This is obviously a condensed code example, as the class is part of an editor and reacts on mouse clicks and movement amongst other things.

When I did a tile based simulation while ago I did it this way:
I had 2 layers of the tile map - one for the terrain and second for the units.
The map itself was represented by a JPanel.
So roughly you got this for the JPanel:
public void paintComponent(Graphics graphics) {
// create an offscreen buffer to render the map
if (buffer == null) {
buffer = new BufferedImage(SimulationMap.MAP_WIDTH, SimulationMap.MAP_HEIGHT, BufferedImage.TYPE_INT_ARGB);
}
Graphics g = buffer.getGraphics();
g.clearRect(0, 0, SimulationMap.MAP_WIDTH, SimulationMap.MAP_HEIGHT);
// cycle through the tiles in the map drawing the appropriate
// image for the terrain and units where appropriate
for (int x = 0; x < map.getWidthInTiles(); x++) {
for (int y = 0; y < map.getHeightInTiles(); y++) {
if (map.getTerrain(x, y) != null) {
g.drawImage(tiles[map.getTerrain(x, y).getType()], x * map.getTILE_WIDTH(), y * map.getTILE_HEIGHT(), null);
}
}
}
if (map.getSimulationUnits() != null) {
for (Unit unit : map.getSimulationUnits()) {
g.drawImage(tiles[unit.getUnitType()], (int) Math.round(unit.getActualXCor() * map.getTILE_WIDTH()), (int) Math.round(unit.getActualYCor() * map.getTILE_HEIGHT()),
null);
}
}
// ...
// draw the buffer
graphics.drawImage(buffer, 0, 0, null);
}
Logic:
private Terrain[][] terrain = new Terrain[WIDTH][HEIGHT];
/** The unit in each tile of the map */
private Unit[][] units = new Unit[WIDTH][HEIGHT];
Then you have your game loop where you update the position of the units and other things, basically render() and update() the game. Check the links I've provided below.
NOTE
Since you are making a simple game this post about making game loops will be definitely useful for you. This hopefully also answer your question about moving the object on the map.
This site will be also very helpful since you will probably need to detect collision at some point too.

Adding a Circle Object to An Arraylist and displaying on Screen

This is my second semester doing Java and so please be patient. Part of my assignment is to click a Radio button and use the Circle's draw method to draw a Circle object on a Jpanel Content pane when the mouse button is clicked. Then store each Circle object in a Arraylist so that it will stay on the pane until I unclick the radio button. I can get everything to work except for adding the Circle object to the Arraylist and keeping that circle on the screen. It will just draw one circle at a time and erase the first previous one when I click again. I don't think that I am adding the new circles created to the Arraylist, I'm just a circle. Not sure.
Here is my code for the part that is drawing the circle.
public class MyPanel extends JPanel {
public ArrayList<Circle> circles;
public void paintComponent(Graphics g) {
Circle c = new Circle(xstart, ystart); //create a new circle
ArrayList<Circle> circles = new ArrayList<Circle>();
if (drawing){
c.draw(g);
circles.add(c);
for(int k=0; k<circles.size(); k++){
circles.get(k).draw(g);
}
} // draw the circle
Code for drawing and declaring the drawing boolean in my MouseTest Constructor and tied to the radio button. Drawing true means that when the radio button is clicked then it can draw circles.
JPanel radioPanel = new JPanel(new GridLayout(2,0)); //new GridLayout(y, x)
radioPanel.add(circleButton);
radioPanel.add(trackButton);
cp.add(radioPanel,BorderLayout.EAST);
drawing = false;
circleButton.addActionListener(new ActionListener() {
//Set drawing to true when the button is clicked
public void actionPerformed(ActionEvent ae) {
drawCircles();
}
});
public void drawCircles() { //initialize tracking to false
drawing = !drawing;`

You have a couple of issues. First, in your paintComponent function you are creating a local ArrayList of Circles. Each time the paintComponent is called, you are recreating this variable. Instead, just use the ArrayList of Circles that belongs to the class.
The other issue you have is that each circle is being drawn twice, once after the circle is created, the other time in the for loop. you should remove the call to have the circle draw itself, and just drawn them all in the for loop.
Finally, and this may or may not be the desired behavior, but currently you are creating a new Circle each time the paintComponent is getting called. You can potentially end up with many more circles than you want, because this function can be called a lot. You may want to reconsider at what point new circles are being created.
The following fixes the first couple of issues.
public class MyPanel extends JPanel {
public ArrayList<Circle> circles = new ArrayList<Circle>();
public void paintComponent(Graphics g) {
Circle c = new Circle(xstart, ystart); //create a new circle
circles.add(c);
if (drawing){
for(int k=0; k<circles.size(); k++){
circles.get(k).draw(g);
}
} // draw the circle
}