Is there a way to make the mouseDragged Event be called more Often ( In my Case, Drawing a Color? I need it for Smooth Drawing, because right now, if you move too fast, it doesn't Draw All my Path. Also, I have an 2D Array Storing the Color of the Pixel, so that's also Problematic if I try to solve by problem by another Way, that's why I thought Increasing the mouseDragged Frequency would be the Best thing to Do
Thanks
If you want smooth drawing, you'd likely have to interpolate the data yourself. If you get an event at (3,3) and another at (10,10) you can figure the slope between the two, and iterate through the logical points that the mouse must have been dragged to get from (3,3) to (10,10)
I don't know of a way to force mouseDragged to update faster, and if, for instance the system was under high load, or someone used a touch screen, you might get huge jumps anyhow.
If you are drawing ovals to as color lines, change to lines:
ArrayList<> colors;
mousepressed(Event e) {
startPoint = e.getPoint();
}
mousedragged(Event e) {
colors.add(new Color(startPoint, e.getPoint);
startPoint = e.getPoint();
}
class Color() {
Color(Point start, Point end) {
// ...
}
paint(Graphics g) {
g.drawLine(start, end);
}
}
Related
GitHub
I’m making a gear simulator and I’ve set it up where you can place the gears, and I have a plan on how you can update each gears rotation speed. I’m going to make a Initialize (method?) where I make the gear that will spin check every point next to it(it’s beta size hasn’t been implemented yet) and then I will add the original gear to a dontSpin list, then make every gear the first one detected spin everything around it, except for gears in dontSpin.
My issue I’m having is how do I rotate the gear Image a bit every tick? I’ve done a bunch of research and tried implementing some things I found but they all rotate it once, and I can’t find a way/I’m not smart enough to know how to make each gear object in the gearList rotate at the rotateSpeed every tick.
If you need more information please message me as I’ve been working on this for like a week and this has been a roadblock for at least 3 days making me lose motivation.
I tried researching multiple different sites and different methods of rotating images and it seemed none were what I needed, they seemed to all be a single rotation. I tried just staring at my code for 15 minutes waiting for it to just pop in my head to no avail. I tried asking on a discord help server, where I was told “just make a method to rotate it, then use it” and I’m not even kidding lmao. I even tried asking a fellow java coder about it, but they had no idea.
Help me stack overflow, you’re my only hope.
Edit: taken down for focusing on 2 problems , so I’ll elaborate on the one problem.
Gear is a class with a Point(x,y), I have a Board class with the bulk of my code, where I have a 10 by 10 ish size grid of squares, the gear and player automatically moves around on these squares.
You can hit a button ‘E’ to add a gear, and ‘Q’ to remove a gear. Every time you add a gear, a new gear is added to the gearList ArrayList. My issue is how to update the gear Images every single tick in the board class.
Here is where the gears are drawn
#Override
public void paintComponent(Graphics g) {
super.paintComponent(g);
// when calling g.drawImage() we can use "this" for the ImageObserver
// because Component implements the ImageObserver interface, and JPanel
// extends from Component. So "this" Board instance, as a Component, can
// react to imageUpdate() events triggered by g.drawImage()
// draw our graphics.
drawBackground(g);
drawScore(g);
for (Gear gear : gearList) {
gear.draw(g, this);
}
player.draw(g, this);
// this smooths out animations on some systems
Toolkit.getDefaultToolkit().sync();
}
This is what that calls
public class Gear {
// image that represents the gear's position on the board
private BufferedImage image;
private BufferedImage newSizeImage;
// current position of the gear on the board grid
private Point pos;
private int rot = 45;
private int rotSpeed = 5;
public Gear(Point gpos) {
// load the assets
loadImage();
// initialize the state
pos = gpos;
}
private void loadImage() {
try {
// you can use just the filename if the image file is in your
// project folder, otherwise you need to provide the file path.
image = ImageIO.read(new File("src/images/gear.png"));
finalImage = rotate(image.getScaledInstance(Board.TILE_SIZE, Board.TILE_SIZE, Image.SCALE_DEFAULT));
} catch (IOException exc) {
System.out.println("Error opening image file: " + exc.getMessage());
}
}
public void draw(Graphics g, ImageObserver observer) {
// with the Point class, note that pos.getX() returns a double, but
// pos.x reliably returns an int. https://stackoverflow.com/a/30220114/4655368
// this is also where we translate board grid position into a canvas pixel
// position by multiplying by the tile size.
g.drawImage(
finalImage,
pos.x * Board.TILE_SIZE,
pos.y * Board.TILE_SIZE,
observer);
}
I'm trying to make a simple bit of code that will detect whether a model was clicked on. So far the best method I've seen is to create some sort of rectangle around the mesh and detect with Gdx.input.justTouched() to get the x,y coordinates, and then check if the rectangle contains the coordinates returned by justTouched().
I have no idea if there's a better way to do this, some kind of mesh onClick listener or something that LibGDX has in place that I'm unaware of (I've been scouring Google and the javadocs but I can't seem to find anything). I don't really need to deal with the z-axis coordinate, at least I don't think so. I only have the one PerspectiveCamera and it's not going to be moving around that much (not sure if this matters?)
Anyways, in my render() method I have:
if (Gdx.input.justTouched()) {
//this returns the correct values relative to the screen size
Vector2 pos = new Vector2(Gdx.input.getX(), Gdx.input.getY());
//I'm not sure how to get the correct rectangle to see what the
//width and height are for the model relative to the screen?
Rectangle modelBounds = new Rectangle(<<not sure what to put here>>);
if (modelBounds.contains(pos.x, pos.y) {
System.out.println("Model is being touched at: " + pos.x + ", " + pos.y);
}
}
I'm really not sure if this is the correct way to do this. I can get the position of the model with:
modelInstance.getNode("Node1").globalTransform.getTranslation(new Vector3());
but I'm not sure how to get the width and height as a rectangle relative to the screen size, if it's even possible.
I'm also unsure if this would cause massive lag, as I'm going to have about 7 nodes total that I need to detect if they're clicked on or not.
Is there a better way to do this? If not, is there a way to get the model width & height relative to the screensize (or camera, maybe)?
EDIT: Read about using Bounding Boxes, seems like what I need. Not quite sure how to implement it properly, however. I've changed my code to such:
public ModelInstance modelInstance;
public BoundingBox modelBounds;
#Override
public void create() {
...
//omitted irrelevant bits of code
modelInstance = new ModelInstance(heatExchangerModel);
modelBounds = modelInstance.calculateBoundingBox(new BoundingBox());
}
#Override
public void render() {
...
if (Gdx.input.justTouched()) {
Vector3 pos = new Vector3(Gdx.input.getX(), Gdx.input.getY(), 0);
System.out.println(pos);
if (modelBounds.contains(pos)) {
System.out.println("Touching the model");
}
}
}
I'm not really sure what the output of BoundingBox is supposed to be, or how the numbers it gives me correlates to the position in a 2d space. Hmm..
EDIT2: Think I'm getting closer.. Read about Rays and the .getPickRay method for my PerspectiveCamera. .getPickRay seems to return completely unusable numbers though, like really tiny numbers. I think I need to do something like:
if (Gdx.input.justTouched()) {
Vector3 intersection = new Vector3();
Ray pickRay = perspectiveCamera.getPickRay(Gdx.input.getX(), Gdx.input.getY());
Intersector.intersectRayBounds(pickRay, modelBounds, intersection);
}
and then intersection should give me the point where they overlap. It appears to be not working, however, giving me really small numbers like (4.8066642E-5, 2.9180354E-5, 1.0) .. hmmm..
I have done a program that numerically solves a set of differential equations which describes how an "arbitrary" illness move in an isolated and constant population, it was a programming assignment from a class I took a while ago. What I've done to extend it is to add some graphical components that can pause, reset and "play" the simulation, as well as some components that allows me to change some constants in the equations.
All this was an exercise in programming as I find it to be fun and exciting and want to become better.
However, at the moment I'm stuck, what I want to do now is to make a very simple form of animation of it. I want to visualize the data I get for the number of infected, susceptibles and resistants in a grid as points. I managed to create the grid and have an idea of how to place the dots.
The problem I have is how to draw the dots as the program is working, I can draw one dot in the grid but only as the grid is created, that's it. I need to be able to create a dot at a specific place in the grid, this goes on until the number of dots reaches a finite number, say 30. At that points I want to have the first dot, the one the left, removed, all the dots shifted to the left and place the new dot at the furthest right of the grid, the whole thing is then repeated.
I think I will be able to figure it out with some help/hints about the paintComponent() method and whether I need to use repaint() method at all, I can't get my head around these for some reason. I've read through my course literature on Java, but despite the extensive sections where he explains most of the different graphical components he does not say that much about those methods, only that you don't call for the paintComponent() method, it is done automatically.
If there is something unclear let me know and I'll try to clarify it.
Thanks in advance.
//
Fox Mulder
I think I will be able to figure it out with some help/hints about the paintComponent() method and whether I need to use repaint() method at all, I can't get my head around these for some reason.
Basically, say you create a custom component by extending JPanel. When you #Override the paintComponent() method, it get implicitly called for you, so you never have to call it. So what ever you paint inside the method, gets drawn on your surface. For example
public class DrawingPanel extends JPanel {
#Override
protected void paintComponent(Graphics g) {
super.paintComponent(g);
g.fillOval(x, y, 10, 10);
}
}
When you call repaint() you are basically causing the paintComponent method to be call implicitly. So to answer your question, Yes you will need to call it if you want to animate, as you will need to update some kind of variable (like the x and y) in the paintComponent() method, to see any change in the drawing.
You can see more at Performing Custom Painting
Not to handle the actual animation, you'll want to use a javax.swing.Timer. You can see more at How to use Swing Timers. Here's the basic construct
Timer ( int delayInMillis, ActionListener listener )
where delayInMillis is the time to delay between ticks(in this case animations) and the ActionListener listens for "ticks". Each tick, the actionPerformed of the ActionListener is called. There, you can put the code to update any variables you use for animation.
So for example you update the x and y, in the actionPerformed, then call repaint()
public class DrawingPanel extends JPanel {
int x = 50;
int y = 50;
public DrawingPanel() {
Timer timer = new Timer(40, new ActionListener(){
#Override
public void actionPerformed(ActionEvent e) {
x += 5;
y += 5;
repaint();
}
});
timer.start();
}
#Override
protected void paintComponent(Graphics g) {
super.paintComponent(g);
g.fillOval(x, y, 10, 10);
}
}
Now this was just a simple example. But in your case you want to animate a scatter plot. So what you can do is have a list of Points and in the actionPerformed you can add pull points from that list and push them into another list that is to be drawn. So say you have this
List<Point> originalPoints;
List<Point> pointsToDraw;
...
#Override
protected void paintComponent(Grapchics g) {
super.paintComponent(g);
for (Point point : pointsToDraw) {
g.fillOval(point.x - 5, point.y - 5, 10, 10);
}
}
Basically all the points in pointsToDraw list will be drawn. Initially it will be empty. And in the timer, you can add to the list, until the originalPoints list is exhausted. For example.
List<Point> originalPoints;
List<point> pointsToDraw;
private int currentIndex = 0;
public DrawingPanel(List<Point> originalPoints) {
this.originalPoints = originalPoints;
pointsToDraw = new ArrayList<>();
Timer timer = new Timer(40, new ActionListener(){
#Override
public void actionPerformed(ActionEvent e) {
if (currentIndex == originalPoints.size() - 1) {
((Timer)e.getSource()).stop();
} else {
pointsToDraw.add(originalPoints.get(currentIndex));
currentIndex++;
}
repaint();
}
});
timer.start();
}
So basicall you just keep a current index. When the index reaches the size of the original list, you stop the timer. Otherwise you just pop from the originalPoints and push to the pointsToDraw. For every point you add the pointsToDraw, a repaint() is called, and there will be another point for the paintComponent to draw a circle with.
The END
UDPATE
I just reread your question, and I think I have have misunderstood it. If you want all the points drawn, then basically just have one list. And draw all the points initially. with each tick, just remove the first index, advance all the rest up an index, and add a new one to the end. Though this is the implementation of a LinkedList so you may just want to use that
I got something working but cannot interpret in my mind, how is it painting every picture with the player in the middle by taking its original position away from where it is painting everything, my brain is addled.
I would like to know why it is working
public static Integer ufox = 102,ufoy = 115;
public void paint (Graphics g){
g.clearRect(0,0,1000,1000);
g.translate(-ufox+102,-ufoy+115);
g.setColor(Color.WHITE);
g.fillRect(0, 0, 1000, 1000);
//backround enemies etc
g.setColor(Color.BLUE);
g.drawString(ufo,ufox,ufoy);//this is the player!
g.setColor(Color.GREEN);
}
public void run() {
while(true){
ufox=//game logic
ufoy=//game logic
try{Thread.sleep(20);}catch(Exception e){}
repaint();
}
}
//key listener and main...
It's an issue of relative coordinates. If you imagine yourself moving in the real world, you can conceptualize it either as your coordinates changing to reflect your movement, or EVERYTHING ELSE'S coordinates changing (in the opposite direction) while your coordinates stay the same. A coordinate transform like the one in your code can translate between these two (absolute and relative) coordinate systems.
I found this little sample code, to do drawing with your finger:
http://marakana.com/tutorials/android/2d-graphics-example.html
Here is some of the relevant code:
List<Point> points = new ArrayList<Point>();
#Override
public void onDraw(Canvas canvas) {
for (Point point : points) {
canvas.drawCircle(point.x, point.y, 5, paint);
}
}
public boolean onTouch(View view, MotionEvent event) {
Point point = new Point();
point.x = event.getX();
point.y = event.getY();
points.add(point);
invalidate();
Log.d(TAG, "point: " + point);
return true;
}
I was looking through it, and saw that they are adding points to an ArrayList, then looping through the ArrayList, this doesn't seem like it is a very optimized approach to this. Is there a better approach or is this a good approach?
After testing on my Samsung GS3, I colored the whole screen in with a circle size of 20, and the closer it got to full color the slower it took to draw, and then circles were becoming spaced out.
No, this makes sense in this example.
He loops through all the points he wants to draw.
This means he adds every point to the array, so he can loop through all the objects at once.
You'll often see this in game programming.
This is also very expandable.
You can add as many points as you want
It supports polymorphism
You don't have to make variables for multiple points > Less code
First, use stroke (not circles) to draw the line. Second, approximate. Here's a summary:
Change Paint to use a stroke with width=5. That reduces the need to draw so many circles.
Pick a threshold, for example 3px after which you'll add a point in onTouch().
if (Math.abs(previousX - event.getX()) < THRESHOLD
&& Math.abs(previousY - event.getY()) < THRESHOLD) {
return;
}
previousX = event.getX();
previousY = event.getY();
// drawing update goes here
This should reduce number of (unnoticeable) points.
Use Picture or Path class to draw the line to, and use Canvas.drawPath() or Canvas.drawPicture(). This, especially for large number of points, will really speed the drawing since all drawing commands will be passed to the internal drawing function in one call.
Simplify the shape at need. For example, you could delete eldest points (which would be a perfect case to use circular buffer), use the Ramer-Douglas-Peucker algorithm which is pretty easy to implement, gives good results and has complexity of O(nlogn).