Why does the locaton of my animated circles flicker? - java

With trident I created a (seemingly) simple animation. A number of circles are moving from bottom to top and back again with a sine interpolation:
The animation itself seems to work, but there is one or two frames where all my spheres flicker all to the topmost location.
Why does it flicker? Who is invoking the setY method with seemingly wrong values?
I've made a testclass to reproduce the behavior. You need radiance-trident 3.0 to make it work:
import java.awt.BorderLayout;
import java.awt.Color;
import java.awt.FlowLayout;
import java.awt.Graphics;
import java.awt.Graphics2D;
import java.awt.RenderingHints;
import java.awt.geom.Ellipse2D;
import java.util.ArrayList;
import java.util.List;
import javax.swing.JDialog;
import javax.swing.JPanel;
import org.pushingpixels.trident.api.Timeline;
import org.pushingpixels.trident.api.Timeline.RepeatBehavior;
import org.pushingpixels.trident.api.ease.TimelineEase;
import org.pushingpixels.trident.api.swing.SwingRepaintTimeline;
public class MovingSpheresTest extends JDialog {
private final double sphereRadius = 3d;
private final double sphereCount = 12d;
private final double helixHeight = 100d;
private final double size = 200d;
private final double animationSpeed = 0.5d;
private List<CenteredSphere> spheres;
private SwingRepaintTimeline repaintTimeline;
private final JPanel contentPanel = new JPanel() {
protected void paintComponent(Graphics g) {
super.paintComponent(g);
paintFrame((Graphics2D) g);
}
private void paintFrame(Graphics2D g) {
Graphics2D create = (Graphics2D) g.create();
try {
create.setRenderingHint(RenderingHints.KEY_ANTIALIASING, RenderingHints.VALUE_ANTIALIAS_ON);
create.setRenderingHint(RenderingHints.KEY_RENDERING, RenderingHints.VALUE_RENDER_QUALITY);
create.setColor(Color.BLACK);
for (CenteredSphere centeredSphere : spheres) {
create.fill(centeredSphere);
}
} finally {
create.dispose();
}
}
};
/**
* Launch the application.
*/
public static void main(String[] args) {
try {
MovingSpheresTest dialog = new MovingSpheresTest();
dialog.setDefaultCloseOperation(JDialog.DISPOSE_ON_CLOSE);
dialog.setVisible(true);
} catch (Exception e) {
e.printStackTrace();
}
}
/**
* Create the dialog.
*/
public MovingSpheresTest() {
setBounds(100, 100, 450, 300);
getContentPane().setLayout(new BorderLayout());
contentPanel.setLayout(new FlowLayout());
getContentPane().add(contentPanel, BorderLayout.CENTER);
installSpheres();
installRepaintTimeline();
}
private void installSpheres() {
double helixRadius = helixHeight / 2;
double effectiveWidth = size - (2 * sphereRadius);
double sphereDistance = effectiveWidth / (sphereCount - 1);
double sphereCenterX = sphereRadius;
double sphereCenterY = size / 2d;
double sphereCenterYInitial = sphereCenterY - helixRadius;
spheres = new ArrayList<>();
for (int sphereIndex = 0; sphereIndex < sphereCount; sphereIndex++) {
CenteredSphere sphere = new CenteredSphere(sphereCenterX, sphereRadius);
spheres.add(sphere);
sphereCenterX += sphereDistance;
Timeline.builder()
.addPropertyToInterpolate(Timeline.<Double>property("y").on(sphere).from(sphereCenterYInitial)
.to(sphereCenterY + helixRadius))
.setEase(new FullSine((float) (sphereIndex * 2 * Math.PI / sphereCount)))
.setDuration((long) (animationSpeed * 3000d)).playLoop(RepeatBehavior.LOOP);
}
}
private class FullSine implements TimelineEase {
private float horizontalOffset;
private FullSine(float horizontalOffset) {
this.horizontalOffset = horizontalOffset;
}
#Override
public float map(float durationFraction) {
return ((float) Math.sin(durationFraction * Math.PI * 2f + horizontalOffset) + 1f) / 2f;
}
}
private void installRepaintTimeline() {
repaintTimeline = SwingRepaintTimeline.repaintBuilder(contentPanel).build();
repaintTimeline.playLoop(RepeatBehavior.LOOP);
}
public class CenteredSphere extends Ellipse2D.Double {
private double sphereCenterX;
private double sphereRadius;
public CenteredSphere(double sphereCenterX, double sphereRadius) {
this.sphereCenterX = sphereCenterX;
this.sphereRadius = sphereRadius;
}
public void setY(double y) {
setFrameFromCenter(sphereCenterX, y, sphereCenterX + sphereRadius, y + sphereRadius);
}
}
}

As noted here and fixed here,
This is interesting. It's because of the underlying assumption that the TimelineEase always maps the [0.0-1.0] interval without "warping" the end points. In this particular case, during each animation loop, the custom FullSine is used to remap that interval based on the sphere offset, but during the loop reset, the "end" points are not mapped.

Related

Drawing Circles to JFrame

I'm having issues drawing some circles to my JFrame. I originally had it using the default layout and realized this was only adding the most recent circle, so I changed the layout to null, and now nothing gets drawn. I've also tried frame.setLayout(new FlowLayout()) which also doesn't draw anything. Any help would be appreciated!
import java.util.ArrayList;
import java.util.Random;
import javax.swing.JComponent;
import javax.swing.JFrame;
import javax.swing.JLabel;
/**
* #author Christopher Nielson
*
*/
public class Main {
private static JFrame frame;
private static Random rand;
private static Jiggler jiggler;
private static ArrayList<JComponent> circles;
private static int fps;
public static void main(String[] args) {
frame = new JFrame();
frame.setDefaultCloseOperation(JFrame.EXIT_ON_CLOSE);
frame.setLayout(null);
frame.setBounds(100, 100, 450, 450);
rand = new Random();
circles = new ArrayList<JComponent>();
int x = frame.getWidth();
int y = frame.getHeight();
for (int i = 0; i < Integer.parseInt(args[0]); i++) {
circles.add(new Circle(rand.nextInt(frame.getWidth()), rand.nextInt(frame.getHeight()),
rand.nextInt(frame.getWidth() / 10) + 100, rand.nextInt(frame.getHeight() / 10) + 100, null));
}
circles.forEach(current -> {
frame.add(current);
});
frame.setVisible(true);
jiggler = new Jiggler(circles, new JLabel("FPS: ")); // TODO add fps
jiggler.run();
}
}
And this is one reason you'll see us recommending time and time again to avoid using null layouts like the plague.
Having said that, your main problem is a design problem, not a layout problem, and that problem being that your Circle class shouldn't extend JComponent or any component for that matter, since if you want to draw multiple circles, you should have only one component, probably a JPanel doing the drawing, and the Circles should be logical classes, classes that have a public void draw(Graphics g) method, not component classes. You would pass the List of Circles to your drawing JPanel, and it would draw the Circles in its paintComponent method by calling the draw(g) methods of each Circle in the list.
For example:
import java.awt.Color;
import java.awt.Dimension;
import java.awt.Graphics;
import java.awt.Graphics2D;
import java.awt.Point;
import java.awt.Rectangle;
import java.awt.RenderingHints;
import java.awt.Shape;
import java.awt.event.*;
import java.awt.geom.*;
import java.util.ArrayList;
import java.util.List;
import javax.swing.*;
#SuppressWarnings("serial")
public class DrawChit extends JPanel {
private static final int PREF_W = 900;
private static final int PREF_H = 700;
private static final int MAX_SHAPES = 30;
private List<MyShape> shapes = new ArrayList<>();
public DrawChit() {
setBackground(Color.WHITE);
for (int i = 0; i < MAX_SHAPES; i++) {
double x = (PREF_W - 100) * Math.random();
double y = (PREF_H - 100) * Math.random();
double w = 100 + (Math.random() * PREF_W) / 10;
double h = 100 + (Math.random() * PREF_H) / 10;
Ellipse2D ellipse = new Ellipse2D.Double(x, y, w, h);
float hue = (float) Math.random();
double delta = 0.3;
float saturation = (float) (Math.random() * delta + (1 - delta));
float brightness = (float) (Math.random() * delta + (1 - delta));
Color color = Color.getHSBColor(hue, saturation, brightness);
shapes.add(new MyShape(ellipse, color));
}
// we'll throw a black square in the middle!
int rectW = 200;
int rectX = (PREF_W - rectW) / 2;
int rectY = (PREF_H - rectW) / 2;
shapes.add(new MyShape(new Rectangle(rectX, rectY, rectW, rectW), Color.BLACK));
MyMouse myMouse = new MyMouse();
addMouseListener(myMouse);
addMouseMotionListener(myMouse);
}
#Override
protected void paintComponent(Graphics g) {
super.paintComponent(g);
// use anti-aliasing to make graphics smooth
Graphics2D g2 = (Graphics2D) g;
g2.setRenderingHint(RenderingHints.KEY_ANTIALIASING, RenderingHints.VALUE_ANTIALIAS_ON);
// iterate through the shapes list, filling all
for (MyShape shape : shapes) {
shape.fill(g2);
}
}
#Override
public Dimension getPreferredSize() {
if (isPreferredSizeSet()) {
return super.getPreferredSize();
}
return new Dimension(PREF_W, PREF_H);
}
private class MyMouse extends MouseAdapter {
private Point p0 = null;
private MyShape shape = null;
#Override
public void mousePressed(MouseEvent e) {
if (e.getButton() != MouseEvent.BUTTON1) {
return;
}
// iterate *backwards* so get top-most Shape
for (int i = shapes.size() - 1; i >= 0; i--) {
if (shapes.get(i).contains(e.getPoint())) {
p0 = e.getPoint();
shape = shapes.get(i);
// move selected shape to the top!
shapes.remove(shape);
shapes.add(shape);
repaint();
return;
}
}
}
#Override
public void mouseDragged(MouseEvent e) {
if (p0 != null) {
moveShape(e.getPoint());
}
}
#Override
public void mouseReleased(MouseEvent e) {
if (p0 != null) {
moveShape(e.getPoint());
p0 = null;
shape = null;
}
}
// translates the shape
private void moveShape(Point p1) {
int deltaX = p1.x - p0.x;
int deltaY = p1.y - p0.y;
shape.translate(deltaX, deltaY);
p0 = p1;
repaint();
}
}
private static void createAndShowGui() {
DrawChit mainPanel = new DrawChit();
JFrame frame = new JFrame("Draw Chit");
frame.setDefaultCloseOperation(JFrame.EXIT_ON_CLOSE);
frame.getContentPane().add(mainPanel);
frame.pack();
frame.setLocationRelativeTo(null);
frame.setVisible(true);
}
public static void main(String[] args) {
SwingUtilities.invokeLater(() -> createAndShowGui());
}
}
class MyShape {
private Path2D path = new Path2D.Double();
private Color color;
public MyShape(Shape shape, Color color) {
path.append(shape, true);
this.color = color;
}
public boolean contains(Point p) {
return path.contains(p);
}
public void draw(Graphics2D g2) {
g2.setColor(color);
g2.draw(path);
}
public void fill(Graphics2D g2) {
g2.setColor(color);
g2.fill(path);
}
public void translate(int deltaX, int deltaY) {
path.transform(AffineTransform.getTranslateInstance(deltaX, deltaY));
}
}

Drawing Hexagon Using Java error

i written a code to draw a hexagon. First i plot the 6 points using this formula :
(x + r*cos(i*2*pi/6), y + r*sin(i*2*pi/6))
then after i plot these points i tried to match between the points using Bresnham's Algorithm for drawing lines which i had implemented it in a method.
Unfortunately the Code doesn't work successfully and i get this instead of the hexagon. I think there is an error with Bresnham's algorithm implementation. In addition, I tried to plot each point alone but it wont work.
If anyone can help me?
Also this is my Code :
package javaapplication1;
import java.awt.Color;
import java.awt.Dimension;
import java.awt.Graphics;
import java.awt.Graphics2D;
import java.awt.Toolkit;
import java.awt.geom.Line2D;
import static java.lang.Math.cos;
import static java.lang.Math.sin;
import javax.swing.JFrame;
import javax.swing.SwingUtilities;
public class LinesDrawingExample extends JFrame {
public LinesDrawingExample() {
super("Lines Drawing Demo");
//Dimension screenSize=Toolkit.getDefaultToolkit().getScreenSize();
setSize(500, 500);
setDefaultCloseOperation(JFrame.EXIT_ON_CLOSE);
setLocationRelativeTo(null);
}
void drawLines(Graphics g , int x,int y) {
Graphics2D g2d = (Graphics2D) g;
g2d.setColor(Color.RED);
g2d.drawLine(x, y, x,y);
//g2d.draw(new Line2D.Double(59.2d, 99.8d, 419.1d, 99.8d));
// g2d.draw(new Line2D.Float(21.50f, 132.50f, 459.50f, 132.50f));
}
public void getvalue(Graphics g,double x1,double y1 ,double x2,double y2){
int x=(int)x1;
int y=(int)y1;
int deltax=(int)x2-(int)x1;
int deltay=(int)y2-(int)y1;
int twodeltay=2*deltay;
int var1=twodeltay-(2*deltax);
int p=twodeltay-deltax;
drawLines(g,x,y);
while(x<x2)
{
drawLines(g,x,y);
if(p>0)
{
y=y+1;
p=p+twodeltay-(2*deltax);
}
else
{
p=p+twodeltay;
}
x++;
}
}
public void paint(Graphics g) {
super.paint(g);
double r=50;
double pi=3.14;
int [] xval =new int [6];
int [] yval=new int [6];
int x=100,y=100;
for(int i=0; i<6; i++) {
getvalue(g,x + r*cos(i*2*pi/6), y + r*sin(i*2*pi/6),x + r*cos(i*2*pi/6),y + r*cos(i*2*pi/6));
xval[i]=(int)(x + r*cos(i*2*pi/6));
yval[i]=(int)(y + r*sin(i*2*pi/6));
}
getvalue(g,xval[4],yval[4],xval[5],yval[5]);
getvalue(g,xval[2],yval[2],xval[1],yval[1]);
getvalue(g,xval[3],yval[3],xval[2],yval[2]);
getvalue(g,xval[3],yval[3],xval[3],yval[3]);
getvalue(g,xval[4],yval[4],xval[4],yval[4]);
getvalue(g,xval[5],yval[5],xval[5],yval[5]);
}
public static void main(String[] args) {
SwingUtilities.invokeLater(new Runnable() {
#Override
public void run() {
new LinesDrawingExample().setVisible(true);
}
});
}
}
You were drawing on the JFrame. Never draw on a JFrame. Always draw on a JPanel.
Here's the GUI.
Here are the major changes I made.
I moved the creation of the hexagon into its own class, Hexagon. That way, you can create a List of Hexagons if you want.
I moved the creation of the drawing panel into its own class, DrawingPanel. That way, I have a GUI view class that draws the hexagon, and a GUI model class that generates the hexagons. A nice, clean separation of concerns.
This left the JFrame code and the instantiation of a Hexagon object in the constructor of the LinesDrawingExample class.
Here's the code.
package com.ggl.testing;
import java.awt.Color;
import java.awt.Dimension;
import java.awt.Graphics;
import java.awt.Point;
import java.awt.Polygon;
import javax.swing.JFrame;
import javax.swing.JPanel;
import javax.swing.SwingUtilities;
public class LinesDrawingExample extends JFrame {
private static final long serialVersionUID = 3775690273871048733L;
private DrawingPanel drawingPanel;
public LinesDrawingExample() {
super("Lines Drawing Demo");
setDefaultCloseOperation(JFrame.EXIT_ON_CLOSE);
Hexagon hexagon = new Hexagon(new Point(250, 250), 200);
drawingPanel = new DrawingPanel(hexagon);
add(drawingPanel);
pack();
setLocationByPlatform(true);
setVisible(true);
}
public static void main(String[] args) {
SwingUtilities.invokeLater(new Runnable() {
#Override
public void run() {
new LinesDrawingExample();
}
});
}
public class DrawingPanel extends JPanel {
private static final long serialVersionUID = 5701311351092275287L;
private Hexagon hexagon;
public DrawingPanel(Hexagon hexagon) {
this.hexagon = hexagon;
this.setPreferredSize(new Dimension(500, 500));
}
#Override
protected void paintComponent(Graphics g) {
super.paintComponent(g);
g.setColor(Color.RED);
g.drawPolygon(hexagon.getHexagon());
}
}
public class Hexagon {
private final int radius;
private final Point center;
private final Polygon hexagon;
public Hexagon(Point center, int radius) {
this.center = center;
this.radius = radius;
this.hexagon = createHexagon();
}
private Polygon createHexagon() {
Polygon polygon = new Polygon();
for (int i = 0; i < 6; i++) {
int xval = (int) (center.x + radius
* Math.cos(i * 2 * Math.PI / 6D));
int yval = (int) (center.y + radius
* Math.sin(i * 2 * Math.PI / 6D));
polygon.addPoint(xval, yval);
}
return polygon;
}
public int getRadius() {
return radius;
}
public Point getCenter() {
return center;
}
public Polygon getHexagon() {
return hexagon;
}
}
}
You shouldn't override paint(g). Override paintComponent(g) instead. You can use a loop to plots all the points needed for a polygon.
Plot the points and create a Polygon object, then draw the polygon object:
public class DrawPolyPanel extends JPanel{
public DrawPolyPanel(){
setPreferredSize(new Dimension(200, 200));
}
public void paintComponent(Graphics g){
super.paintComponent(g);
Polygon p = new Polygon();
for (int i = 0; i < 6; i++)
p.addPoint((int) (100 + 50 * Math.cos(i * 2 * Math.PI / 6)),
(int) (100 + 50 * Math.sin(i * 2 * Math.PI / 6)));
g.drawPolygon(p);
}
public static void main(String[] args){
JFrame frame = new JFrame("DrawPoly");
frame.setDefaultCloseOperation(JFrame.EXIT_ON_CLOSE);
frame.add(new DrawPolyPanel());
frame.pack();
frame.setLocationRelativeTo(null);
frame.setVisible(true);
}
}

GUI button placement

I am trying to design a GUI with triangle shaped buttons. I have create the triangle button class correctly in so far as creating a JButton with my class constructor results in a triangle button on the page, but I fall short when it comes to placement of the button.
Could any direct me or have an example for creating a hexagonal shape from triangle buttons?
Here is my TriangleButton class for reference:
import java.awt.Polygon;
import java.awt.Shape;
import java.awt.Graphics;
import java.awt.Graphics2D;
import javax.swing.JFrame;
import javax.swing.JButton;
import javax.swing.JPanel;
import java.awt.Dimension;
import java.awt.event.ActionListener;
import java.awt.event.ActionEvent;
class TriangleButton extends JButton {
final static double side_len = 52; //Change for variable triangle size
final static double y_offset = (Math.sqrt(3) * side_len / 2);
private Shape triangle;
public TriangleButton(int spot){
triangle = createTriangle(spot);
}
public void paintBorder( Graphics g ) {
((Graphics2D)g).draw(triangle);
}
public void paintComponent( Graphics g ) {
((Graphics2D)g).fill(triangle);
}
public Dimension getPreferredSize() {
return new Dimension((int)side_len, (int)y_offset);
}
public boolean contains(int x, int y) {
return triangle.contains(x, y);
}
private Shape createTriangle(int spot) {
Polygon p = new Polygon();
p.addPoint( 0 , 0 );
p.addPoint( (int)side_len , 0 );
p.addPoint( (int)side_len/2, (int)(y_offset) );
return p;
}
}
The look I had in mind would be something like..
With space between the buttons.. basically just up-pointing and down-pointing triangles lined up.
But anything to put me in the right direction would be appreciated!
As an alternative, due to the complexities of generating a suitable layout to allow components to overlap, you could simply create a single button which housed all the triangles and which provided centralised control, for example
import java.awt.Dimension;
import java.awt.EventQueue;
import java.awt.Graphics;
import java.awt.Graphics2D;
import java.awt.GridBagLayout;
import java.awt.Polygon;
import java.awt.Shape;
import java.awt.event.ActionEvent;
import java.awt.event.ActionListener;
import java.awt.event.MouseAdapter;
import java.awt.event.MouseEvent;
import java.awt.geom.Path2D;
import java.util.Arrays;
import java.util.HashMap;
import java.util.Map;
import javax.swing.AbstractButton;
import javax.swing.DefaultButtonModel;
import javax.swing.JButton;
import javax.swing.JFrame;
import javax.swing.JPanel;
import javax.swing.UIManager;
import javax.swing.UnsupportedLookAndFeelException;
public class Test {
public static void main(String[] args) {
new Test();
}
public Test() {
EventQueue.invokeLater(new Runnable() {
#Override
public void run() {
try {
UIManager.setLookAndFeel(UIManager.getSystemLookAndFeelClassName());
} catch (ClassNotFoundException | InstantiationException | IllegalAccessException | UnsupportedLookAndFeelException ex) {
ex.printStackTrace();
}
JFrame frame = new JFrame("Testing");
frame.setDefaultCloseOperation(JFrame.EXIT_ON_CLOSE);
frame.add(new TestPane());
frame.pack();
frame.setLocationRelativeTo(null);
frame.setVisible(true);
}
});
}
public class TestPane extends JPanel {
public TestPane() {
setLayout(new GridBagLayout());
HexagonButton btn = new HexagonButton();
btn.addActionListener(new ActionListener() {
#Override
public void actionPerformed(ActionEvent e) {
System.out.println(Arrays.toString(btn.getSelectedObjects()));
System.out.println(e.getActionCommand());
}
});
add(btn);
}
}
public class HexagonButton extends AbstractButton {
public static final String TOP_RIGHT_QUAD = "Top.right";
public static final String TOP_QUAD = "Top";
public static final String TOP_LEFT_QUAD = "Top.left";
public static final String BOTTOM_LEFT_QUAD = "Bottom.left";
public static final String BOTTOM_QUAD = "Bottom";
public static final String BOTTOM_RIGHT_QUAD = "Bottom.right";
private Shape top;
private Shape topRight;
private Shape topLeft;
private Shape bottomLeft;
private Shape bottomRight;
private Shape bottom;
private Map<String, Shape> paths;
private String selectedQuad;
public HexagonButton() {
setModel(new DefaultButtonModel());
createPaths();
addMouseListener(new MouseAdapter() {
#Override
public void mouseClicked(MouseEvent e) {
String previousQuad = selectedQuad;
selectedQuad = null;
for (String quad : paths.keySet()) {
Shape shape = paths.get(quad);
if (shape.contains(e.getPoint())) {
getModel().setPressed(true);
getModel().setArmed(true);
selectedQuad = quad;
if (!selectedQuad.equals(previousQuad)) {
fireActionPerformed(new ActionEvent(HexagonButton.this, ActionEvent.ACTION_PERFORMED, selectedQuad));
}
break;
}
}
repaint();
}
#Override
public void mouseReleased(MouseEvent e) {
getModel().setArmed(false);
getModel().setPressed(false);
}
});
}
#Override
public Object[] getSelectedObjects() {
return new Object[]{selectedQuad};
}
#Override
public void invalidate() {
super.invalidate();
createPaths();
}
protected void createPaths() {
topRight = create(0d, -60d);
top = create(-60d, -120d);
topLeft = create(-120d, -180d);
bottomLeft = create(-180d, -240d);
bottom = create(-240d, -300d);
bottomRight = create(-300d, -360d);
paths = new HashMap<>(6);
paths.put(TOP_RIGHT_QUAD, topRight);
paths.put(TOP_QUAD, top);
paths.put(TOP_LEFT_QUAD, topLeft);
paths.put(BOTTOM_LEFT_QUAD, bottomLeft);
paths.put(BOTTOM_QUAD, bottom);
paths.put(BOTTOM_RIGHT_QUAD, bottomRight);
}
#Override
public Dimension getPreferredSize() {
return new Dimension(104, 104);
}
#Override
protected void paintComponent(Graphics g) {
super.paintComponent(g); //To change body of generated methods, choose Tools | Templates.
Graphics2D g2d = (Graphics2D) g.create();
if (selectedQuad != null) {
Shape path = paths.get(selectedQuad);
g2d.setColor(UIManager.getColor("List.selectionBackground"));
g2d.fill(path);
}
g2d.setColor(getForeground());
g2d.draw(topRight);
g2d.draw(top);
g2d.draw(topLeft);
g2d.draw(bottomLeft);
g2d.draw(bottom);
g2d.draw(bottomRight);
g2d.dispose();
}
public Shape create(double startAngle, double endAngle) {
double width = getWidth();
double height = getHeight();
double radius = Math.min(width, height) / 2;
double xOffset = width - radius;
double yOffset = height - radius;
double startX = xOffset + radius * (Math.cos(Math.toRadians(startAngle)));
double startY = yOffset + radius * (Math.sin(Math.toRadians(startAngle)));
double endX = xOffset + radius * (Math.cos(Math.toRadians(endAngle)));
double endY = yOffset + radius * (Math.sin(Math.toRadians(endAngle)));
Path2D path = new Path2D.Double();
path.moveTo(xOffset, yOffset);
path.lineTo(startX, startY);
path.lineTo(endX, endY);
path.closePath();
return path;
}
}
public static class TriangleButton extends JButton {
final static double side_len = 52; //Change for variable triangle size
final static double y_offset = (Math.sqrt(3) * side_len / 2);
private Shape triangle;
public TriangleButton(int spot) {
triangle = createTriangle(spot);
}
#Override
public void paintBorder(Graphics g) {
super.paintBorder(g);
((Graphics2D) g).draw(triangle);
}
#Override
protected void paintComponent(Graphics g) {
super.paintComponent(g);
((Graphics2D) g).fill(triangle);
}
#Override
public Dimension getPreferredSize() {
return new Dimension((int) side_len, (int) y_offset);
}
#Override
public boolean contains(int x, int y) {
return triangle.contains(x, y);
}
private Shape createTriangle(int spot) {
Polygon p = new Polygon();
p.addPoint(0, 0);
p.addPoint((int) side_len, 0);
p.addPoint((int) side_len / 2, (int) (y_offset));
return p;
}
}
}
Using your class I made some changes and came up with the following:
import java.awt.*;
import java.awt.Shape;
import java.awt.Graphics;
import java.awt.Graphics2D;
import javax.swing.*;
import java.awt.Dimension;
import java.awt.event.ActionListener;
import java.awt.event.ActionEvent;
public class TriangleButton2 extends JButton {
final static double side_len = 52; //Change for variable triangle size
final static double y_offset = (Math.sqrt(3) * side_len / 2);
private Shape triangle;
public TriangleButton2(int degrees){
triangle = createTriangle(degrees);
setRolloverEnabled( false );
setContentAreaFilled( false );
setBorderPainted( false );
}
public void paintBorder( Graphics g ) {
((Graphics2D)g).draw(triangle);
}
public void paintComponent( Graphics g ) {
super.paintComponent(g);
((Graphics2D)g).fill(triangle);
}
public Dimension getPreferredSize() {
return new Dimension((int)side_len, (int)y_offset);
}
public boolean contains(int x, int y) {
return triangle.contains(x, y);
}
private Shape createTriangle(int degrees) {
Polygon p = new Polygon();
p.addPoint( 0 , 0 );
p.addPoint( (int)side_len , 0 );
p.addPoint( (int)side_len/2, (int)(y_offset) );
return ShapeUtils.rotate(p, degrees);
// return p;
}
private static void createAndShowGUI()
{
JPanel panelNorth = new JPanel( new FlowLayout(FlowLayout.CENTER, -22, 2) );
panelNorth.add( new TriangleButton2(180) );
panelNorth.add( new TriangleButton2(0) );
panelNorth.add( new TriangleButton2(180) );
JPanel panelSouth = new JPanel( new FlowLayout(FlowLayout.CENTER, -22, 1) );
panelSouth.add( new TriangleButton2(0) );
panelSouth.add( new TriangleButton2(180) );
panelSouth.add( new TriangleButton2(0) );
JFrame frame = new JFrame("SSCCE");
frame.setDefaultCloseOperation(JFrame.EXIT_ON_CLOSE);
frame.add(panelNorth, BorderLayout.NORTH);
frame.add(panelSouth, BorderLayout.SOUTH);
frame.setLocationByPlatform( true );
frame.pack();
frame.setVisible( true );
}
public static void main(String[] args)
{
EventQueue.invokeLater(new Runnable()
{
public void run()
{
createAndShowGUI();
}
});
}
}
The above code uses the ShapeUtils class found in Playing With Shapes.
Not sure of the exact functionality you want from the button. Your current implantation doesn't have any visual effects when you click on the button or mouse over the button.
In this case you might want to consider just creating an Icon to represent your triangle. you can use the ShapeIcon class found in Playing With Shapes to create your triangle icons. Then you can use the ShapeComponent class also found in Playing With Shapes to create an actual component that you add to the panel.
The FlowLayout shows how you can overlap the buttons to get your desired layout effect.
Check out this page for some relatable information:
Creating custom JButton from images containing transparent pixels
It just might be easier creating JButtons from triangle images.

Move image in a spiral fashion in java

I am trying to make a simple animated intro. I have an image I am trying to move from the bottom left of the screen to the center of the screen in a clockwise spiral motion. This is the code that I am using for now. It just moves the image upward to the center:
static ImageLoader il = new ImageLoader();
private static BufferedImage logo = il.load("/logoNew.png");
private static Image power = il.gif("http://i.stack.imgur.com/KSnus.gif");
static double y = 1024.0;
public static void render(Graphics g){
if(y>(486/2)-128){
y = y-0.25;
}
if(draw){
g.drawImage(logo,(864/2)-128,(int)y,null);
g.setColor(Color.WHITE);
g.drawImage(power,10,10,null);
}
}
The if(draw) statement is activated by something else.
How do I go about moving the image. Do I just increment the x and the y differently at different points?
** EDIT **
I didn't make it clear on the motion. Its going from the bottom left to the top left to the top right to the bottom right to the bottom center (centre) to the center (centre) of the screen
Animation is the illusion of movement over time. Normally I would use something like the Timing Framework (or Trident or Universal Tween Engine) as the base of the animation, these provide better support for things like ease-in and ease-out.
The following example just makes uses of a simple javax.swing.Timer. I use this because it's safer to use with Swing, as it allows me to update the state of the UI from within the context of the Event Dispatching Thread, but doesn't block it (preventing it from updating the screen).
The following example uses a concept of a timeline and key frames. That is, at some point in time, something must happen. The timeline then provides the means for blending between those "key" points in time.
I, personally, like to work in abstract concepts, so the timeline is simply measured in a percentage from 0-1, which allows me to provide a variable time span. This allows me to adjust the speed of the animation without the need to change anything.
As you (should) be able to see, the last two legs only need to move half the distance, so they are slower than the other three legs, so, technically, they only need half the time to complete...but I'll leave it up to you to nut out the maths for that ;)
import java.awt.Dimension;
import java.awt.EventQueue;
import java.awt.Graphics;
import java.awt.Graphics2D;
import java.awt.Point;
import java.awt.event.ActionEvent;
import java.awt.event.ActionListener;
import java.awt.image.BufferedImage;
import java.io.File;
import java.io.IOException;
import java.util.Map;
import java.util.TreeMap;
import javax.imageio.ImageIO;
import javax.swing.JFrame;
import javax.swing.JPanel;
import javax.swing.Timer;
import javax.swing.UIManager;
import javax.swing.UnsupportedLookAndFeelException;
public class Test{
public static void main(String[] args) {
new Test();
}
public Test() {
EventQueue.invokeLater(new Runnable() {
#Override
public void run() {
try {
UIManager.setLookAndFeel(UIManager.getSystemLookAndFeelClassName());
} catch (ClassNotFoundException | InstantiationException | IllegalAccessException | UnsupportedLookAndFeelException ex) {
ex.printStackTrace();
}
JFrame frame = new JFrame("Testing");
frame.setDefaultCloseOperation(JFrame.EXIT_ON_CLOSE);
frame.add(new TestPane());
frame.pack();
frame.setLocationRelativeTo(null);
frame.setVisible(true);
}
});
}
public class TestPane extends JPanel {
protected static final int PLAY_TIME = 6000;
private Timeline timeline;
private long startTime;
private Point imgPoint;
private BufferedImage img;
public TestPane() {
try {
img = ImageIO.read(new File("C:/Neko.png"));
imgPoint = new Point(0, 200 - img.getHeight());
timeline = new Timeline();
timeline.add(0f, imgPoint);
timeline.add(0.2f, new Point(0, 0));
timeline.add(0.4f, new Point(200 - img.getWidth(), 0));
timeline.add(0.6f, new Point(200 - img.getWidth(), 200 - img.getHeight()));
timeline.add(0.8f, new Point(100 - (img.getWidth() / 2), 200 - img.getHeight()));
timeline.add(1f, new Point(100 - (img.getWidth() / 2), 100 - (img.getHeight() / 2)));
Timer timer = new Timer(40, new ActionListener() {
#Override
public void actionPerformed(ActionEvent e) {
long duration = System.currentTimeMillis() - startTime;
float progress = (float) duration / (float) PLAY_TIME;
if (progress > 1f) {
startTime = System.currentTimeMillis();
progress = 0;
((Timer) (e.getSource())).stop();
}
System.out.println(progress);
imgPoint = timeline.getPointAt(progress);
repaint();
}
});
startTime = System.currentTimeMillis();
timer.start();
} catch (IOException exp) {
exp.printStackTrace();
}
}
#Override
public Dimension getPreferredSize() {
return new Dimension(200, 200);
}
#Override
protected void paintComponent(Graphics g) {
super.paintComponent(g);
if (img != null && imgPoint != null) {
Graphics2D g2d = (Graphics2D) g.create();
g2d.drawImage(img, imgPoint.x, imgPoint.y, this);
g2d.dispose();
}
}
}
public static class Timeline {
private Map<Float, KeyFrame> mapEvents;
public Timeline() {
mapEvents = new TreeMap<>();
}
public void add(float progress, Point p) {
mapEvents.put(progress, new KeyFrame(progress, p));
}
public Point getPointAt(float progress) {
if (progress < 0) {
progress = 0;
} else if (progress > 1) {
progress = 1;
}
KeyFrame[] keyFrames = getKeyFramesBetween(progress);
float max = keyFrames[1].progress - keyFrames[0].progress;
float value = progress - keyFrames[0].progress;
float weight = value / max;
return blend(keyFrames[0].getPoint(), keyFrames[1].getPoint(), 1f - weight);
}
public KeyFrame[] getKeyFramesBetween(float progress) {
KeyFrame[] frames = new KeyFrame[2];
int startAt = 0;
Float[] keyFrames = mapEvents.keySet().toArray(new Float[mapEvents.size()]);
while (startAt < keyFrames.length && keyFrames[startAt] <= progress) {
startAt++;
}
if (startAt >= keyFrames.length) {
startAt = keyFrames.length - 1;
}
frames[0] = mapEvents.get(keyFrames[startAt - 1]);
frames[1] = mapEvents.get(keyFrames[startAt]);
return frames;
}
protected Point blend(Point start, Point end, float ratio) {
Point blend = new Point();
float ir = (float) 1.0 - ratio;
blend.x = (int) (start.x * ratio + end.x * ir);
blend.y = (int) (start.y * ratio + end.y * ir);
return blend;
}
public class KeyFrame {
private float progress;
private Point point;
public KeyFrame(float progress, Point point) {
this.progress = progress;
this.point = point;
}
public float getProgress() {
return progress;
}
public Point getPoint() {
return point;
}
}
}
}

How to simulate video within ImageIcon?

I have JToggleButton and this method capturing events:
tgl_playMouseClicked(java.awt.event.MouseEvent evt) {
new Thread() {
public void run() {
int i = 0;
String outputName = null;
while ((i <= 99)) {
ImageIcon imgThisImg = new ImageIcon("images/" + outputName + i + ".png");
lbl_image.setIcon(imgThisImg);
i++;
}
tgl_play.setSelected(!tgl_play.isSelected());
}
}.start();
}
I try to simulate video by reading and showing single images in imageIcon.
When I fist time click on JToggleButton, all is ok. Video is running. But when I press again, nothing happens. The event is captured as prints are displayed in output, but no refresh on ImageIcon.
I use thread there in order to be able to set some delay between frames.
What's wrong? Help me please
I think that one of your best shot is to use javax.swing.Timer to pace your "video". This will ensure that you are doing everything properly with Swing EDT.
(If the millisecond is not sufficient, then I would take a look at: java.util.concurrent.Executors.newScheduledThreadPool(int) and java.util.concurrent.ScheduledThreadPoolExecutor.scheduleAtFixedRate(Runnable, long, long, TimeUnit) and add Runnable's that immediately call all their code in SwingUtilities.invokeLater())
Here I made a small demo example with a list of images displaying a growing and shrinking circle (the images are created on the fly with some JPanel but this is just for the demo).
import java.awt.Color;
import java.awt.Graphics;
import java.awt.GraphicsEnvironment;
import java.awt.Image;
import java.awt.event.ActionEvent;
import java.awt.event.ActionListener;
import java.awt.image.BufferedImage;
import java.util.ArrayList;
import java.util.List;
import javax.swing.ImageIcon;
import javax.swing.JFrame;
import javax.swing.JLabel;
import javax.swing.JPanel;
import javax.swing.SwingUtilities;
import javax.swing.Timer;
import javax.swing.UnsupportedLookAndFeelException;
public class TestAnimation {
private static final int NB_OF_IMAGES = 50;
private static final int NB_OF_IMAGES_PER_SECOND = 25;
private static final int WIDTH = 300;
private static final int HEIGHT = 300;
protected void initUI() {
final JFrame frame = new JFrame(TestAnimation.class.getSimpleName());
frame.setDefaultCloseOperation(JFrame.EXIT_ON_CLOSE);
frame.setResizable(false);
// the label on which I will set images
final JLabel label = new JLabel();
// By adding to the frame, it is set as the central component of the
// BorderLayout of the JFrame. Eventually, the label will have the size of the content pane
frame.add(label);
frame.setSize(WIDTH, HEIGHT);
// Creating a list of images (just for demo purposes)
final List<Image> images = new ArrayList<Image>(NB_OF_IMAGES);
for (int i = 0; i < NB_OF_IMAGES; i++) {
CirclePanel circle = new CirclePanel(WIDTH / 2, WIDTH / 2, 2 * WIDTH * (NB_OF_IMAGES / 2 - Math.abs(i - NB_OF_IMAGES / 2))
/ NB_OF_IMAGES);
circle.setSize(WIDTH, HEIGHT);
BufferedImage image = GraphicsEnvironment.getLocalGraphicsEnvironment().getDefaultScreenDevice().getDefaultConfiguration()
.createCompatibleImage(WIDTH, HEIGHT, BufferedImage.TRANSLUCENT);
circle.print(image.getGraphics());
images.add(image);
}
// Here is the timer logic
Timer t = new Timer(1000 / NB_OF_IMAGES_PER_SECOND, new ActionListener() {
private int i = 0;
#Override
public void actionPerformed(ActionEvent e) {
if (i == images.size()) {
i = 0;
}
label.setIcon(new ImageIcon(images.get(i++)));
}
});
frame.setVisible(true);
t.start();
}
// Simple class that draws a red circle centered on x,y and given radius
public static class CirclePanel extends JPanel {
private int x;
private int y;
private int radius;
public CirclePanel(int x, int y, int radius) {
super();
this.x = x;
this.y = y;
this.radius = radius;
setOpaque(false);
}
#Override
protected void paintComponent(Graphics g) {
super.paintComponent(g);
g.setColor(Color.RED);
g.drawArc(x - radius / 2, y - radius / 2, radius, radius, 0, 360);
}
}
public static void main(String[] args) throws ClassNotFoundException, InstantiationException, IllegalAccessException,
UnsupportedLookAndFeelException {
SwingUtilities.invokeLater(new Runnable() {
#Override
public void run() {
new TestAnimation().initUI();
}
});
}
}

Categories