I am required to write something similar to graphviz. I have already managed to draw the nodes so that they do not overlap and to connect their center with a quadratic Bezier curve, but I am facing the following problem with the directionality of a curved edge:
As you can see, the yellow little triangle is not quite nice. My code is the following:
g.setColor(Color.RED);
ArrowGraph arrow = graph.getArrows().get(0);
int x = (int)(arrow.getP1().getX() + arrow.getP2().getX()) / 2;
int y = (int)(arrow.getP1().getY() + arrow.getP2().getY()) / 2 + 50;
QuadCurve2D.Double curve = new QuadCurve2D.Double(arrow.getP1().getX() - 20, arrow.getP1().getY() - 20, x, y, arrow.getP2().getX() - 20, arrow.getP2().getY() - 20);
((Graphics2D)g).draw(curve);
int[] xPoints = new int[] {(int)arrow.getP2().getX() - 20, (int)arrow.getP2().getX() - 15, (int)arrow.getP2().getX() - 25};
int[] yPoints = new int[] {(int)arrow.getP2().getY() - 20, (int)arrow.getP2().getY() - 10, (int)arrow.getP2().getY() - 10};
g.setColor(Color.YELLOW);
g.fillPolygon(xPoints, yPoints, 3);
The coordinates that I know: the start and end point and the control point of the curve. The start and the end points are basically the centers of the nodes.
I would like to somehow adjust the triangle to the curve, so it's on the end of it (preferably at border of the node). Any idea how I could do that?
You can use FlatteningPathIterator passing your curve and get the last segment (last line on the path in fact).
The use the line to to build the arrow triangle.
Related
I studied this question, but I still don't get it. The shortest possible code below shows a Pyramid totally grey, whereas I try to give the 6 triangles making up the pyramid different colors. So ... why don't these colors show up?
Note that I borrowed the getTexCoords().addAll(..) statement from that question, but clearly I still am doing something wrong. Is it the uv mapping? What is that anyway? I have seen a topological explanation (sphere <-> map), but what has that got to do with textures/colors...?
Appreciate your help - Michael
public class ColoredPyramid extends Application {
public void start(Stage primaryStage) {
Group root = new Group();
Scene scene = new Scene(root, 200, 200, true);
primaryStage.setTitle("Colored Pyramid");
primaryStage.setScene(scene);
primaryStage.show();
TriangleMesh colouredPyramid = new TriangleMesh();
float height = 100;
float hypotenuse = 150;
colouredPyramid.getPoints().addAll(0, 0, 0); //0-index:: top
colouredPyramid.getPoints().addAll(0, height, -hypotenuse / 2); //1-index:: x=0, z=-hyp/2 ==> Closest to user
colouredPyramid.getPoints().addAll(-hypotenuse / 2, height, 0); //2-index:: x=hyp/2, z=0 ==> Leftest
colouredPyramid.getPoints().addAll(hypotenuse / 2, height, 0); //3-index:: x=hyp/2, z=0 ==> rightest
colouredPyramid.getPoints().addAll(0, height, hypotenuse / 2); ////4-index:: x=0, z=hyp/2 ==> Furthest from user
//Next statement copied from stackoverflow.com/questions/26831871/coloring-individual-triangles-in-a-triangle-mesh-on-javafx
colouredPyramid.getTexCoords().addAll(
0.1f, 0.5f, // 0 red
0.3f, 0.5f, // 1 green
0.5f, 0.5f, // 2 blue
0.7f, 0.5f, // 3 yellow
0.9f, 0.5f // 4 orange
);
colouredPyramid.getFaces().addAll(0, 0, 2, 0, 1, 0); //Left front face ---> RED
colouredPyramid.getFaces().addAll(0, 1, 1, 1, 3, 1); //Right front face ---> GREEN
colouredPyramid.getFaces().addAll(0, 2, 3, 2, 4, 2); //Right back face ---> BLUE
colouredPyramid.getFaces().addAll(0, 3, 4, 3, 2, 3); //Left back face ---> RED
colouredPyramid.getFaces().addAll(4, 4, 1, 4, 2, 4); //Base: left triangle face ---> YELLOW
colouredPyramid.getFaces().addAll(4, 0, 3, 0, 1, 0); //Base: right triangle face ---> ORANGE
MeshView meshView = new MeshView(colouredPyramid);
Group group = new Group(meshView);
group.setTranslateX(100);
group.setTranslateY(80);
root.getChildren().add(group);
}
public static void main(String[] args) {
launch(args);
}
}
To understand how JavaFX 3D defines the color of any given 3D shape, have a look at the PhongMaterial javadoc (bold is mine):
The PhongMaterial class provides definitions of properties that represent a Phong shaded material. It describes the interaction of light with the surface of the Mesh it is applied to. The PhongMaterial reflects light in terms of a diffuse and specular component together with an ambient and a self illumination term. The color of a point on a geometric surface is mathematical function of these four components.
That means that you need to supply a material in the first place, and then you need to specify any of those components, for instance the diffuse component.
If you copy the image from the cited question:
and create a material instance with it:
PhongMaterial material = new PhongMaterial();
material.setDiffuseMap(new Image(getClass().getResourceAsStream("bB2jV.png")));
meshView.setMaterial(material);
you can see that this image is used to apply colors to your pyramid:
If you modify the texture indices for the faces, you will get different colors, based on the texture coordinates.
To know more about this, you can have a look at the FXyz3D library, that provides a TexturedMesh class based in this concept. There you will find many different 3D shape "textured" primitives, that can use different texture "modes". Most of those modes don't even require an image, as this is created internally. This allows creating for instance color gradients based on mathematical functions.
This is an example of a TetrahedraMesh, that makes use a 3D function to define the density map:
TetrahedraMesh tetra = new TetrahedraMesh(10, 5, null);
tetra.setTextureModeVertices3D(1530, p -> p.magnitude());
I had a problem programming my first Minecraft Mod.
Here is the source code:
Events.java:
public class Events {
#SubscribeEvent
public void onRenderGameOverlay(RenderGameOverlayEvent event) {
if(!event.isCancelable() && event.type == ElementType.EXPERIENCE && !Minecraft.getMinecraft().thePlayer.capabilities.isCreativeMode) {
int posX = event.resolution.getScaledWidth() / 2 + 10;
int posY = event.resolution.getScaledHeight() - 48;
Minecraft.getMinecraft().renderEngine.bindTexture(new ResourceLocation("tc:textures/gui/thermo-icon.png"));
Minecraft.getMinecraft().ingameGUI.drawTexturedModalRect(posX + 9, posY + 3, 0, 9, 71, 3);
}
}
}
So, my problem is that in Minecraft it shows me this:
Note the red ellipse (I added it with GIMP), inside it there is a black rectangle (I haven't added it with GIMP)... it is too small and without texture...
I followed this tutorial (https://www.youtube.com/watch?v=oi41BAlRjtE), but still not working...
Any solution, please?
UPDATE - - - - - -
Thanks all guys for help, I understood that height = 3 pixel is too small... But now I've one more problem...
The light grey rectangle in the center, should be a
square, and the black part should be a "circle".
Does anyone know the cause of the wrong proportions? Thanks!
Too small?
What size were you expecting?
drawTexturedModalRect(posX + 9, posY + 3, 0, 9, 71, 3);
Is it not 71 pixels long and 3 tall... just what you provided? Its hard to tell. Maybe the texture is working but you are offseting it by 9 pixels(when you only draw 3 pixels of it), but it looks like you are using bindTexture wrong. It takes an int returned from getTexture.
int i = mc.renderEngine.getTexture("/Items/GUI/mixer.png");
GL11.glColor4f(1.0F, 1.0F, 1.0F, 1.0F);
mc.renderEngine.bindTexture(i);
There is a nice wiki / tutorial on doing the sort of mods you are doing that might help : http://www.minecraftforge.net/wiki/Gui_Overlay#Mod_Code
I'm making a zamboni driving game and im doing collision detection. I'm trying to make it by checking if a corner of the zamboni is inside a wall. I draw a rectangle at the corner location by using LWJGL. At the moment, I have the corner located at the center of the zamboni, but I want it to be at the top left corner of it. I can make this, but when I rotate the zamboni, the corner thing does not go to the location of the actual corner of the zamboni, but instead it stays at the same position as when the zamboni is not rotated.
Here's my code:
cornerLocation.x = position.x + (float) Math.cos(Math.toRadians(angle + 90));
cornerLocation.y = position.y + (float) Math.sin(Math.toRadians(angle + 90));
position is a vector where i store the location of the zamboni. The origin of it is at the center so the top-left corner of the zamboni is basically at position-size/2.
How can I make it so it is always at the actual corner the the zamboni, even when I rotate it?
You need two set of coordinates:
Zamboni corners points.
Rectangle points for collision detection.
The Rectangle points can be calculated from zamboni corners. For this:
You must to get the "min-x" and the "min-y" of them:
Point topLeftRect = new Point(Math.min(zamboniCorner1.x,zamboniCorner2.x,zamboniCorner3.x,zamboniCorner4.x),
Math.min(zamboniCorner1.y,zamboniCorner2.y,zamboniCorner3.y,zamboniCorner4.y));
Point bottomRightRect = new Point(Math.max(zamboniCorner1.x,zamboniCorner2.x,zamboniCorner3.x,zamboniCorner4.x),
Math.max(zamboniCorner1.y,zamboniCorner2.y,zamboniCorner3.y,zamboniCorner4.y));
Rectangle collisionDetectionRectangle =new Rectangle(topLeftRect,bottomRightRect);
Detection collisions rectangle size is usually greater than the Zamboni Size.
What happens with rotation?
Steps (one of many possibles ways)
the 2d points {x,y} -> goes to 3d: {x, y, 1}
float[][] zamboniCorner1Point3d = {{zamboniCorner1.x,zamboniCorner1.y,1}};
...
float[][] zamboniCorner4Point3d = {{zamboniCorner4.x,zamboniCorner4.y,1}};
1.- You need to move zamboni's center to (0,0) and you drop the zamboni corners with center:
You can used this 3-d matrix (1):
float[][] translationMatrix1 = {{1, 0,-zamboniCenter.x},{0, 1,-zamboniCenter.y},{0, 0, 1}};
float[][] zamboniCorner1Point3dNew = Matrix.cross(zamboniCorner1Point3d,translationMatrix1);
...
float[][] zamboniCorner4Point3dNew = Matrix.cross(zamboniCorner4Point3d,translationMatrix1);
Point' -> Point * Matrix1
2.- You need to rotate all cordinates (center of zamboni doesn't change, it's {{0,0,1})
You can used this 3-d matrix (2):
float[][] rotationMatrix2 = {Math.cos(rotationAngle), Math.sin(rotationAngle), 0 }, {-Math.sin(rotationAngle), Math.cos(rotationAngle), 0}, {0, 0, 1 }};
float[][] zamboniCorner1Point3dNew = Matrix.cross(zamboniCorner1Point3dNew,rotationMatrix2);
...
float[][] zamboniCorner4Point3dNew = Matrix.cross(zamboniCorner4Point3dNew,rotationMatrix2);
Point' -> Point * Matrix2
3.- You need to move zamboni's center (from the {0,0,1}) to original position (in the same place at first {{zamboniCenter.x,zamboniCenter.y,1}}) and drop the corners with center.
You can used a 3-d matrix(3):
float[][] translationMatrix3 = {{1, 0, zamboniCenter.x},{0, 1, zamboniCenter.y},{0, 0, 1}};
float[][] zamboniCorner1Point3dNew = Matrix.cross(zamboniCorner1Point3dNew,translationMatrix3);
...
float[][] zamboniCorner4Point3dNew = Matrix.cross(zamboniCorner1Point3dNew,translationMatrix3);
Point' -> Point * Matrix3
4.- Set the new values.
zamboniCorner1.x = zamboniCorner1Point3dNew[0];
zamboniCorner1.y = zamboniCorner1Point3dNew[1];
...
zamboniCorner4.x = zamboniCorner4Point3dNew[0];
zamboniCorner4.y = zamboniCorner4Point3dNew[1];
5.- Then, obtain: min-x, min-y, max-x and max-y of the new zamboni corners, there's your new collision detection rect.
top-lef: (min-x,min-y) bottom-right:(max-x,max-y).
Point topLeftRect = new Point(Math.min(zamboniCorner1.x,zamboniCorner2.x,zamboniCorner3.x,zamboniCorner4.x),
Math.min(zamboniCorner1.y,zamboniCorner2.y,zamboniCorner3.y,zamboniCorner4.y));
Point bottomRightRect = new Point(Math.max(zamboniCorner1.x,zamboniCorner2.x,zamboniCorner3.x,zamboniCorner4.x),
Math.max(zamboniCorner1.y,zamboniCorner2.y,zamboniCorner3.y,zamboniCorner4.y));
Rectangle collisionDetectionRectangle =new Rectangle(topLeftRect,bottomRightRect);
The steps 1, 2 and 3; can be computed together:
float[][] matrix = Matrix.cross(Matrix.cross(translationMatrix1,rotationMatrix2),translationMatrix3);
float[][] zamboniCorner1Point3dNew = Matrix.cross(zamboniCorner1Point3d,matrix);
...
float[][] zamboniCorner4Point3dNew = Matrix.cross(zamboniCorner4Point3d,matrix);
Point' -> Point * (Matrix-1 * Matrix-2 * Matrix-3)
This code is OpenCV c++:
lines = cvHoughCircles(frame2, storage, CV_HOUGH_GRADIENT, 1, 50, 300, 60, 10, 600);
for (int i = 0; i < lines.total(); i++) {
//Would like the code to go here
CvPoint2D32f point = new CvPoint2D32f(cvGetSeqElem(lines, i));
cvCircle(src, cvPoint((int)point.x(), (int)point.y()), 3, CvScalar.WHITE, -1, 8, 0);
Point p = new Point((int)point.x(), (int)point.y());
points.add(p);
}
What is the correspondent in the new Java Api? I cannot get CvPoint2D32f, cvGetSeqElem and CV_AA. I found that existed in JavaCV but cannot find them in OpenCV Java api.
Thanks
EDIT:
I've changed my code and now I have:
MatOfPoint3 circles = new MatOfPoint3();
Imgproc.HoughCircles(image, circles, Imgproc.CV_HOUGH_GRADIENT,2, image.rows()/4,200,100,0,0);
for(Point3 circle : circles.toArray()){
Point center = new Point(circle.x, circle.y);
int radius = (int) Math.round(circle.z);
Core.circle(image, center, radius, new Scalar(0,255,0), 6, 8, 0);
}
However I got an error at for(Point3 circle : circles.toArray()):
Exception in thread "main" java.lang.UnsupportedOperationException: Mat data type is not compatible: 21
at org.opencv.core.Mat.get(Mat.java:2581)
at org.opencv.core.MatOfPoint3.toArray(MatOfPoint3.java:64)
at org.opencv.core.MatOfPoint3.toList(MatOfPoint3.java:76)
at main.java.DetectFaceDemo.run(HelloOpenCV.java:60)
at main.java.HelloOpenCV.main(HelloOpenCV.java:83)
Any thoughts on this? Thanks
EDIT 2:
The solution to last edit problem resides in
MatOfPoint3 circles = new MatOfPoint3();
It must be
MatOfPoint3f circles = new MatOfPoint3f();
Use Class Point3. Template class for 3D points specified by its coordinates x, y and z. An instance of the class is interchangeable with the C structure CvPoint2D32f. Similarly to Point_, the coordinates of 3D points can be converted to another type. The vector arithmetic and comparison operations are also supported.
I'm trying to detect the center of a circle. I try to do this with cvHoughCircle. But I can't seem to get it working properly .
The only thing that can vary is the size of the circle.
I try detecting the circle by doing :
circle = cvHoughCircles(imgThreshold, storage, CV_HOUGH_GRADIENT, 1,
(double)imgThreshold.height()/20, 200, 20, 0, 0);
imgThreshold is the b/w image you can see here. The resolution of the image is in fact 1280*1024.
Can anyone tell me what I am doing wrong.
Instead of using cvHoughCircle it is possible to solve this problem with a bit of math:
CvMoments moments = new CvMoments();
cvMoments(imgThreshold, moments, 1);
double moment10 = cvGetSpatialMoment(moments, 1, 0);
double moment01 = cvGetSpatialMoment(moments,0,1);
double area = cvGetCentralMoment(moments, 0, 0);
int posX = 0;
int posY = 0;
int lastX = posX;
int lastY = posY;
posX = (int) (moment10/area);
posY = (int) (moment01/area);
cvCircle(iplRgbImage, new CvPoint(posX,posY), 3, CvScalar.GREEN, -1, 8, 0);
source = http://aishack.in/tutorials/tracking-colored-objects-in-opencv/
If the circle is complete and filled and not occluded by other shapes, you can use findContours() and then find the center of the contour.
use cvBlob
https://code.google.com/p/cvblob/
Concerning Hough transform it can detect circles by identifying pixels that belongs to a circle periphery. More precisely given a binary (thresholded) image containing ie white pixels along a cyclic path, the hough circle transform will detect the circle. So the image to feed the algorithm should be binary and thresholded but in your example must be the thresholded example of an edge filter (ex Sobel) rather than a solid filled circle.
I can not tell a right way of "fitting" a circle on the above image, but the centroid of the blob extracted with connected components is a good and fast way to go.