I am painting a curve arrow using java,
but I can't place to arrow head in the right location .
can you help me please
This is what I done so far,
icon should be dynamic size, so all should be painted according to the
m_size variable
Thank you.
public void paintIcon(Component c, Graphics g, int x, int y) {
Graphics2D g2 = (Graphics2D) g;
Object hintOriginal = g2.getRenderingHint(RenderingHints.KEY_ANTIALIASING);
g2.setRenderingHint(RenderingHints.KEY_ANTIALIASING, RenderingHints.VALUE_ANTIALIAS_ON);
int strokeSize = m_size / 6;
Stroke strokeOriginal = g2.getStroke();
g2.setStroke(new BasicStroke(strokeSize, BasicStroke.CAP_SQUARE, BasicStroke.JOIN_MITER));
g2.drawArc(x + (strokeSize / 2), y + (strokeSize / 2), m_size - (strokeSize * 2), m_size - (strokeSize * 2), 45, 180);
g2.setStroke(strokeOriginal);
int arrSize = (m_size / 4) + strokeSize;
int[] xArr = new int[3];
int[] yArr = new int[3];
xArr[0] = x;
xArr[1] = x + arrSize;
xArr[2] = x + (arrSize / 2);
yArr[0] = y;
yArr[1] = y;
yArr[2] = y - (arrSize / 2);
AffineTransform origXform = g2.getTransform();
AffineTransform newXform = (AffineTransform) (origXform.clone());
newXform.rotate(Math.toRadians(135), x + m_size / 2, y + m_size / 2);
g2.setTransform(newXform);
g2.fillPolygon(xArr, yArr, 3);
g2.setRenderingHint(RenderingHints.KEY_ANTIALIASING, hintOriginal);
}
Related
I am trying to draw a grid over an image using the underlaying colours of the image to fill the circles. But some pixels are not getting the correct colour.
In this case the circles are drawn white but they should not be drawn white...
See my code below:
import processing.pdf.*;
PImage img;
color background = color(255);
void setup() {
size(1038, 525);
ellipseMode(CORNER);
noStroke();
//img = loadImage("noise2.jpg");
//img = loadImage("air.png");
img = loadImage("accidents.png");
image(img, 0, 0, width, height);
visualGrid(20, 0.4, false);
}
//void draw() {
// fill(noise.get(mouseX, mouseY));
// rect(width - 100, height - 100, 100, 100);
//}
void visualGrid(int circleSize, float fillSmoothing, boolean debug) {
float halfCircle = circleSize / 2.0;
int amountX = floor(width / circleSize);
int amountY = floor(height / circleSize);
amountY += floor(amountY * 0.1);
float offsetX = (width - (amountX * circleSize + halfCircle)) / 2 + halfCircle;
float offsetY = (height - amountY * circleSize + amountY * circleSize * 0.1) / 2;
for (int x = 0; x < amountX; x++) {
for (int y = 0; y < amountY; y++) {
float styledOffsetX = (y % 2 == 0) ? offsetX - halfCircle : offsetX;
float xpos = x * circleSize + styledOffsetX;
float ypos = circleSize * 0.9 * y + offsetY;
int sectionSize = round(circleSize * fillSmoothing);
float sectionOffset = (circleSize - sectionSize) / 2;
color c = getAvgImgColor(img.get(round(xpos + sectionOffset), round(ypos + sectionOffset), sectionSize, sectionSize));
//fill(noise.get(round(xpos), round(ypos)));
if(debug) {
stroke(255, 0, 255);
strokeWeight(1);
}
fill(c);
ellipse(xpos, ypos, circleSize, circleSize);
if(debug) {
noStroke();
fill(255, 0, 255);
rect(round(xpos + sectionOffset), round(ypos + sectionOffset), sectionSize, sectionSize);
}
}
}
}
color getAvgImgColor(PImage section) {
section.loadPixels();
int avgR = 0, avgG = 0, avgB = 0;
int totalPixels = section.pixels.length;
for (int i = 0; i < totalPixels; i++) {
color pixel = section.pixels[i];
//if(pixel == background) continue;
avgR += red(pixel);
avgG += green(pixel);
avgB += blue(pixel);
}
return color(
round(avgR / totalPixels),
round(avgG / totalPixels),
round(avgB / totalPixels)
);
}
This is what i get when drawing my grid on the image in question:
As you can see in the circled area not all circles should be filled with white... This happens in more places than just the circled are just compare this image with the one below.
I will upload the original image below, so you can use it to debug.
There's a mismatch between the dimensions of your sketch (1038 x 525) and the image you're sampling (2076 x 1048) which might explain the misalignment.
If size(2076, 1048) isn't an option try resizing the image once it's loaded in setup():
...
img = loadImage("accidents.png");
img.resize(width, height);
...
I'm attempting to draw a line graph based on data held in array. I have managed to get the X and Y axis drawn. However when I draw the line with the data onto the graph it does not line up with the X and Y axis values. I am unsure of how this can be fixed. I have shown the code below:
public void drawLineG(Graphics g, int yCoords[]) {
String maxY = Integer.toString(getMax(yCoords));
String minY = Integer.toString(getMin(yCoords));
String maxX = Double.toString((xInterval * yCoords.length) - xInterval);
String minX = Double.toString(xStart);
g.setColor(Color.BLUE);
int height = (getHeight() / 2);
int x = 200; // start x point
// previous coord positions.
int prevX = x;
int prevY = yCoords[0];
g.setColor(Color.BLACK);
g.drawLine(prevX, getHeight() / 2, 500, getHeight() / 2);
g.drawLine(prevX, 200, 200, getHeight() / 2);
g.setColor(Color.BLUE);
g.drawString(minY, 190, (getHeight() / 2));
g.drawString(maxY, 180, (getHeight() / 2) - 255);
g.drawString(yLabel, 140, (getHeight() / 2) - 100);
g.drawString(minX, 192, (getHeight() / 2) + 20);
g.drawString(maxX, 500, (getHeight() / 2) + 20);
g.drawString(xLabel, 350, (getHeight() / 2) + 50);
for (int y : yCoords) {
g.setColor(Color.RED);
g.drawLine(prevX, height - prevY, x, height - y);
prevX = x;
prevY = y;
// add an increment to the X pos.
x = x + 50;
}
}
The array of data I have been testing contains the values: 0, 3, 4, 7, 5, 10, 3
However when this is plotted on the graph it doesn't line up with the values on the x and y axis.
Current: https://i.stack.imgur.com/Ju8BQ.jpg
What I am trying to achieve: https://i.stack.imgur.com/n9Aio.jpg
Any help?
Thanks
Your problem is your scale, you're trying to draw your yCoords as they're given, (3, 10 and so on) but they should be like: 30, 100 to fit the window's scale (Window = your program window).
For example in my code below, each "square" or each "unit" are of 30 x 30 pixels each, so I must convert yCoord = 3 to it's equivalent which would be 3 * 30 = 90 but as the axis is below starting at 400 I must substract it so I get the coord from the axis or from the bottom of the window to the real yCoord which would be 400 - 90 = 310, now this is my real point that I must paint.
However the painting should be done in the paintComponent method.
For my example I didn't draw the Strings for 0, 10, 0.0, 90.0 but you can do it later if you wish
import java.awt.Color;
import java.awt.Dimension;
import java.awt.Graphics;
import java.awt.Graphics2D;
import javax.swing.JFrame;
import javax.swing.JPanel;
import javax.swing.SwingUtilities;
public class GraphSample {
private JFrame frame;
public static void main(String[] args) {
SwingUtilities.invokeLater(new GraphSample()::createAndShowGui);
}
private void createAndShowGui() {
frame = new JFrame(getClass().getSimpleName());
GraphDrawer drawer = new GraphDrawer(new int[] {0, 3, 4, 7, 5, 10, 3});
frame.add(drawer);
frame.pack();
frame.setVisible(true);
frame.setDefaultCloseOperation(JFrame.EXIT_ON_CLOSE);
}
#SuppressWarnings("serial")
class GraphDrawer extends JPanel {
private int[] yCoords;
private int startX = 100;
private int startY = 100;
private int endX = 400;
private int endY = 400;
private int unitX = (endX - startX) / 10;
private int unitY = (endY - startY) / 10;
private int prevX = startX;
private int prevY = endY;
public GraphDrawer(int[] yCoords) {
this.yCoords = yCoords;
}
#Override
protected void paintComponent(Graphics g) {
super.paintComponent(g);
Graphics2D g2d = (Graphics2D) g;
//We draw in the following 2 loops the grid so it's visible what I explained before about each "unit"
g2d.setColor(Color.BLUE);
for (int i = startX; i <= endX; i += unitX) {
g2d.drawLine(i, startY, i, endY);
}
for (int i = startY; i <= endY; i += unitY) {
g2d.drawLine(startX, i, endX, i);
}
//We draw the axis here instead of before because otherwise they would become blue colored.
g2d.setColor(Color.BLACK);
g2d.drawLine(startX, startY, startX, endY);
g2d.drawLine(startX, endY, endX, endY);
//We draw each of our coords in red color
g2d.setColor(Color.RED);
for (int y : yCoords) {
g2d.drawLine(prevX, prevY, prevX += unitX, prevY = endY - (y * unitY));
}
}
#Override
public Dimension getPreferredSize() {
return new Dimension(endX + 100, endY + 100);
}
}
}
I hope it's clear what the error was.
This is a sample of what the output looks like with a 10 x 10 grid
When I draw a texture with transparency(in file) over ShapeRenderer any shape isn't being updating. When I set batch.setColor(1f, 1f, 1f, 0.5f) result is almost the same: I see stuck shapes with 50% transparency and also see the same animated shapes underneath.
I've tried to use Gdx.gl.glEnable(GL20.GL_BLEND) but it didn't help.
shape.begin(ShapeRenderer.ShapeType.Filled);
shape.setColor(0f / 255f, 7f / 255f, 32f / 255f, 1f);
shape.rect(0,0, width, height);
for(Star star : stars) {
star.render(shape);
star.update(dx, dy, delta);
}
shape.end();
batch.begin();
batch.draw(overlay, 0, 0, width, height);
app.batch.end();
render method inside the Star class:
public void render(ShapeRenderer shape) {
r = (position.z / max_depth);
g = (position.z / max_depth);
b = (position.z / max_depth);
a = 1.f;
if(r < 0) r = 0;
if(g < 7f / 255f) g = 7f / 255f;
if (b < 32f / 255f) b = 32f / 255f
float radius = (position.z / max_depth) * maxRadius;
if(radius < 1) radius = 1;
shape.setColor(r, g, b, a);
shape.circle(position.x, position.y, radius);
}
You need to set BlendFunction to batch according to your desired blend output. By default it is enabled with GL20.GL_SRC_ALPHA, GL20.GL_ONE_MINUS_SRC_ALPHA
so try to change to :
batch.setBlendFunction(GL20.GL_SRC_ALPHA,GL20.GL_DST_COLOR);
May be this not fit your requirement so choose appropriate one, according to your requirement.
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) );
Hey i implement code to rotate AND flip image.
Left, Right, Upsidedown rotation works.
Fliping Horizontal, Vertical works.
But they dont work together
When i flip image and then i rotate, it disappears.
BUT
When i flip and flip image (so it is as it was before flip) i can rotate normally.
I try to understand what is wrong and i think the problem is with transform or scale.
Do you have any idea how to fix this code ?
/**
* Paint the icons of this compound icon at the specified location
*
* #param c
* The component on which the icon is painted
* #param g
* the graphics context
* #param x
* the X coordinate of the icon's top-left corner
* #param y
* the Y coordinate of the icon's top-left corner
*/
#Override
public void paintIcon(Component c, Graphics g, int x, int y) {
Graphics2D g2 = (Graphics2D) g.create();
AffineTransform af = g2.getTransform();
int cWidth = icon.getIconWidth() / 2;
int cHeight = icon.getIconHeight() / 2;
int xAdjustment = (icon.getIconWidth() % 2) == 0 ? 0 : -1;
int yAdjustment = (icon.getIconHeight() % 2) == 0 ? 0 : -1;
if (rotate == Rotate.DOWN) {
g2.translate(x + cHeight, y + cWidth);
g2.rotate(Math.toRadians(90));
icon.paintIcon(c, g2, -cWidth, yAdjustment - cHeight);
} else if (rotate == Rotate.UP) {
g2.translate(x + cHeight, y + cWidth);
g2.rotate(Math.toRadians(-90));
icon.paintIcon(c, g2, xAdjustment - cWidth, -cHeight);
} else if (rotate == Rotate.UPSIDE_DOWN) {
g2.translate(x + cWidth, y + cHeight);
g2.rotate(Math.toRadians(180));
icon.paintIcon(c, g2, xAdjustment - cWidth, yAdjustment - cHeight);
} else if (rotate == Rotate.VERTICAL) {
g2.translate(0, getIconHeight());
g2.scale(1, -1);
icon.paintIcon(c, g2, x, y);
vert = !vert; //boolean flag
} else if (rotate == Rotate.HORIZONTAL) {
g2.translate(getIconWidth(), 0);
g2.scale(-1, 1);
icon.paintIcon(c, g2, x, y);
hor = !hor; //boolean flag
} else if (rotate == Rotate.VERTICALLY_HORIZONTAL) {
g2.translate(getIconWidth(), getIconHeight());
g2.scale(-1, -1);
icon.paintIcon(c, g2, x, y);
hor = !hor;
vert = !vert;
} else if (rotate == Rotate.CENTER) {
g2.setRenderingHint(RenderingHints.KEY_ANTIALIASING,
RenderingHints.VALUE_ANTIALIAS_ON);
AffineTransform original = g2.getTransform();
AffineTransform at = new AffineTransform();
at.concatenate(original);
at.translate((getIconWidth() - icon.getIconWidth()) / 2,
(getIconHeight() - icon.getIconHeight()) / 2);
at.rotate(Math.toRadians(angle), x + cWidth, y + cHeight);
g2.setTransform(at);
icon.paintIcon(c, g2, x, y);
g2.setTransform(original);
}
}
If you want them to work together you've got to save the image you've made with your transform. Here is an example
Image orig = ...;
Image transformedCopy = ...;
AffineTransformation at = ...;
transformedCopy.getGraphics().setTransform(at).drawImage(orig);
//transformedCopy will now have a copy of the transformed image