Is it possible to draw a shape with open ends?
E.g.: Let's say I want to draw a tree, which roots are open. Is there a elegant way to let the ends open, without overdrawing the already drawed lines?
I could overdraw it with shapes, which are exactly as big as my openings and have the color of the background, but I don't think that is the elegant way and I don't find any option to let them open. Perhaps I'm just blind and I could make strokePolygon(...) in which not all points are linked, but I think that's neither the way to go.
Let's have a simple shape:
[ceate Scene and Stage, etc]
Canvas sc = new Canvas(x, y);
GraphicsContext gcCs = cs.getGraphicsContext2D();
gcCs.setStroke(Color.BLACK);
double counter = 0.0;
[calculate points, instantiate arrays, etc]
for (int i = 0; i < arrayX.length; i++)
{
arrayX = shapeMidX + Math.cos(Math.toRadiants(counter * Math.PI)) * shapeSizeX / 2);
arrayY = shapeMidY + Math.sin(Math.toRadiants(counter * Math.PI)) * shapeSizeY / 2);
}
gcCs.strokePolygon(arrayX, arrayY, arrayX.length);
[making other things]
stackPane.getChildren().add(sc);
I know that I could use .strokeOval(), but I wanted to have a example that is near of my own code.
I like to draw my shapes from the center.
P.S.: I wrote the for() { } out of my head, it could be that there's something wrong. I've got no Internet at home at the moment, so my answers could be taking a lot of time.
Thank you in advance.
You could draw individual lines using strokeLine and store the current position in variables allowing you to draw any combination of lines.
You could also construct a path instead which allows you to use moveTo instead of lineTo to "skip" a segment. This way you don't need to keep track of the previous position for continuous lines.
The following example draws every other line of a square this way:
#Override
public void start(Stage primaryStage) {
Canvas canvas = new Canvas(400, 400);
GraphicsContext gc = canvas.getGraphicsContext2D();
gc.moveTo(100, 100);
gc.lineTo(100, 300);
gc.moveTo(300, 300);
gc.lineTo(300, 100);
// gc.moveTo(100, 100);
gc.stroke();
Scene scene = new Scene(new StackPane(canvas));
primaryStage.setScene(scene);
primaryStage.show();
}
Related
I am drawing differently sized maps on a pane. Some look decent, others are just presented as a small shape and you have to zoom in to get it to the right size. I want those maps to appear roughly the same size each time I initialize (so I don't have to manually scale each map). I've got Point2D points for the min and max values of x and y of the pane they're drawn on and same goes for the map (which is a Group of polygons). How do I set the distance between, say, the minPoint of Pane and the minPoint of Group? Or am I approaching this the wrong way?
edit:
public void setDistance(Group map, Point2D paneSize, Point2D mapSize){
//um diese distance verschieben, if distance > 10px (scale)
double d = paneSize.distance(mapSize);
double scale = ??
map.setScaleX(scale);
map.setScaleY(scale);
}
That's how I planned on doing it, not sure about that one line though.
To scale the node to the size of the parent node, the difference in the size is not important. What is important is the quotient of the sizes, more precisely the minimum of the quotients of the heights and the widths (assuming you want to fill the parent in one direction completely).
Example:
#Override
public void start(Stage primaryStage) {
Text text = new Text("Hello World!");
Pane root = new Pane();
root.getChildren().add(text);
InvalidationListener listener = o -> {
Bounds rootBounds = root.getLayoutBounds();
Bounds elementBounds = text.getLayoutBounds();
double scale = Math.min(rootBounds.getWidth() / elementBounds.getWidth(),
rootBounds.getHeight() / elementBounds.getHeight());
text.setScaleX(scale);
text.setScaleY(scale);
// center the element
elementBounds = text.getBoundsInParent();
double cx = (elementBounds.getMinX() + elementBounds.getMaxX()) / 2;
double cy = (elementBounds.getMinY() + elementBounds.getMaxY()) / 2;
text.setTranslateX(rootBounds.getWidth() / 2 - cx + text.getTranslateX());
text.setTranslateY(rootBounds.getHeight() / 2 - cy + text.getTranslateY());
};
root.layoutBoundsProperty().addListener(listener);
text.layoutBoundsProperty().addListener(listener);
Scene scene = new Scene(root);
primaryStage.setScene(scene);
primaryStage.show();
}
I have a simple Processing Sketch, drawing a continuous line of ellipses with a 20px diameter. Is there a way to modify the sketch so that it draws vector shapes instead of pixels?
void setup() {
size(900, 900);
background(110, 255, 94);
}
void draw() {
ellipse(mouseX, mouseY, 20, 20);
fill(255);
}
Thanks to everyone who can provide some helpful advice.
Expanding my comment above, there a couple of things to tackle:
drawing a continuous line of ellipses with a 20px diameter
draws vector shapes
Currently you're drawing ellipses based on mouse movement.
A side effect is that if you move the mouse fast enough you will have gaps in between ellipses.
To fill the gaps you can work out the distance between every two ellipses.
If the distance is greater than the sizes of these two ellipses you can draw some in between.
The PVector class provides a lerp() function that allows you easily interpolate between two points.
You can read more on this and run some examples here
Using the ratio between these distance of two points and the ellipse size the number of points needed in between.
Here is an example that stores mouse locations to a list of PVectors as you drag the mouse:
//create an array list to store points to draw
ArrayList<PVector> path = new ArrayList<PVector>();
//size of each ellipse
float size = 20;
//how tight will the extra ellipses be drawn together
float tightness = 1.25;
void setup() {
size(900, 900);
}
void draw() {
background(110, 255, 94);
fill(255);
//for each point in the path, starting at 1 (not 0)
for(int i = 1; i < path.size(); i++){
//get a reference to the current and previous point
PVector current = path.get(i);
PVector previous = path.get(i-1);
//calculate the distance between them
float distance = previous.dist(current);
//work out how many points will need to be added in between the current and previous points to keep the path continuous (taking the ellipse size into account)
int extraPoints = (int)(round(distance/size * tightness));
//draw the previous point
ellipse(previous.x,previous.y,size,size);
//if there are any exta points to be added, compute and draw them:
for(int j = 0; j < extraPoints; j++){
//work out a normalized (between 0.0 and 1.0) value of where each extra point should be
//think of this as a percentage along a line: 0.0 = start of line, 0.5 = 50% along the line, 1.0 = end of the line
float interpolation = map(j,0,extraPoints,0.0,1.0);
//compute the point in between using PVector's linear interpolation (lerp()) functionality
PVector inbetween = PVector.lerp(previous,current,interpolation);
//draw the point in between
ellipse(inbetween.x,inbetween.y,size,size);
}
}
//draw instructions
fill(0);
text("SPACE = clear\nLEFT = decrease tightness\nRIGHT = increase tightness\ntightness:"+tightness,10,15);
}
void mouseDragged(){
path.add(new PVector(mouseX,mouseY));
}
void keyPressed(){
if(keyCode == LEFT) tightness = constrain(tightness-0.1,0.0,3.0);
if(keyCode == RIGHT) tightness = constrain(tightness+0.1,0.0,3.0);
if(key == ' ') path.clear();
}
Note that the interpolation between points is linear.
It's the simplest, but as the name implies, it's all about lines:
it always connects two points in a straight line, not curves.
I've added the option to control how tight interpolated ellipses will be packed together. Here are a couple of screenshots with different tightness levels. You'll notice as tightness increases, the lines will become more evident:
You run the code bellow:
//create an array list to store points to draw
var path = [];
//size of each ellipse
var ellipseSize = 20;
//how tight will the extra ellipses be drawn together
var tightness = 1.25;
function setup() {
createCanvas(900, 900);
}
function draw() {
background(110, 255, 94);
fill(255);
//for each point in the path, starting at 1 (not 0)
for(var i = 1; i < path.length; i++){
//get a reference to the current and previous point
var current = path[i];
var previous = path[i-1];
//calculate the distance between them
var distance = previous.dist(current);
//work out how many points will need to be added in between the current and previous points to keep the path continuous (taking the ellipse size into account)
var extraPoints = round(distance/ellipseSize * tightness);
//draw the previous point
ellipse(previous.x,previous.y,ellipseSize,ellipseSize);
//if there are any exta points to be added, compute and draw them:
for(var j = 0; j < extraPoints; j++){
//work out a normalized (between 0.0 and 1.0) value of where each extra point should be
//think of this as a percentage along a line: 0.0 = start of line, 0.5 = 50% along the line, 1.0 = end of the line
var interpolation = map(j,0,extraPoints,0.0,1.0);
//compute the point in between using PVector's linear interpolation (lerp()) functionality
var inbetween = p5.Vector.lerp(previous,current,interpolation);
//draw the point in between
ellipse(inbetween.x,inbetween.y,ellipseSize,ellipseSize);
}
}
//draw instructions
fill(0);
text("BACKSPACE = clear\n- = decrease tightness\n+ = increase tightness\ntightness:"+tightness,10,15);
}
function mouseDragged(){
path.push(createVector(mouseX,mouseY));
}
function keyPressed(){
if(keyCode == 189) tightness = constrain(tightness-0.1,0.0,3.0);
if(keyCode == 187) tightness = constrain(tightness+0.1,0.0,3.0);
if(keyCode == BACKSPACE) path = [];
}
//https://stackoverflow.com/questions/40673192/processing-draw-vector-instead-of-pixels
<script src="https://cdnjs.cloudflare.com/ajax/libs/p5.js/0.5.4/p5.min.js"></script>
If you want smoother lines you will need to use a different interpolation such as quadratic or cubic interpolation. You can start with existing Processing functions for drawing curves such as curve() or bezier(),and you'll find some helpful resources unrelated to Processing here,here and here.
On vector shapes
You're not directly working with pixels[], you're drawing shapes.
These shapes can easily be saved to PDF using Processing's PDF library
Check out the Single Frame from an Animation (With Screen Display) example.
Here is a version that saves to PDF when pressing the 's' key:
import processing.pdf.*;
//create an array list to store points to draw
ArrayList<PVector> path = new ArrayList<PVector>();
//size of each ellipse
float size = 20;
//how tight will the extra ellipses be drawn together
float tightness = 1.25;
//PDF saving
boolean record;
void setup() {
size(900, 900);
}
void draw() {
background(110, 255, 94);
fill(255);
//if we need to save the current frame to pdf, begin recording drawing instructions
if (record) {
// Note that #### will be replaced with the frame number. Fancy!
beginRecord(PDF, "frame-####.pdf");
}
//for each point in the path, starting at 1 (not 0)
for(int i = 1; i < path.size(); i++){
//get a reference to the current and previous point
PVector current = path.get(i);
PVector previous = path.get(i-1);
//calculate the distance between them
float distance = previous.dist(current);
//work out how many points will need to be added in between the current and previous points to keep the path continuous (taking the ellipse size into account)
int extraPoints = (int)(round(distance/size * tightness));
//draw the previous point
ellipse(previous.x,previous.y,size,size);
//if there are any exta points to be added, compute and draw them:
for(int j = 0; j < extraPoints; j++){
//work out a normalized (between 0.0 and 1.0) value of where each extra point should be
//think of this as a percentage along a line: 0.0 = start of line, 0.5 = 50% along the line, 1.0 = end of the line
float interpolation = map(j,0,extraPoints,0.0,1.0);
//compute the point in between using PVector's linear interpolation (lerp()) functionality
PVector inbetween = PVector.lerp(previous,current,interpolation);
//draw the point in between
ellipse(inbetween.x,inbetween.y,size,size);
}
}
//once what we want to save has been recorded to PDF, stop recording (this will skip saving the instructions text);
if (record) {
endRecord();
record = false;
println("pdf saved");
}
//draw instructions
fill(0);
text("SPACE = clear\nLEFT = decrease tightness\nRIGHT = increase tightness\ntightness:"+tightness+"\n's' = save PDF",10,15);
}
void mouseDragged(){
path.add(new PVector(mouseX,mouseY));
}
void keyPressed(){
if(keyCode == LEFT) tightness = constrain(tightness-0.1,0.0,3.0);
if(keyCode == RIGHT) tightness = constrain(tightness+0.1,0.0,3.0);
if(key == ' ') path.clear();
if(key == 's') record = true;
}
In addition to George's great answer (which I've +1'd), I wanted to offer a more basic option:
The problem, like George said, is that when you move the mouse, you actually skip over a bunch of pixels. So if you only draw ellipses or points at mouseX, mouseY then you'll end up with gaps.
The dumb fix: the pmouseX and pmouseY variables hold the previous position of the cursor.
That might not sound very useful, but they allow you to solve exactly your problem. Instead of drawing ellipses or points at the current mouse position, draw a line from the previous position to the current position. This will eliminate any gaps in your lines.
void draw(){
line(pmouseX, pmouseY, mouseX, mouseY);
}
Shameless self-promotion: I've written a tutorial on getting user input in Processing available here.
Note: This dumb solution will only work if you aren't redrawing the background every frame. If you need to redraw everything every frame, then George's answer is the way to go.
i am trying to create a kind of metaball, nice curves between two circles.
Something like the image, the lines are drawn straight but can also be more curved. I need them as a vector in Processing. Does anyone can help me?
thanks in advance!
Example in paperjs:
http://paperjs.org/examples/meta-balls/
image:
http://www.smeulders.biz/tmp/metaballs.png
void setup() {
size(500,500);
ellipse(100, 250, 100, 100);
ellipse(350, 250, 200, 200);
}
void draw() {}
With a bit of math (to workout distance between circles) and a bit of pixel manipulation to set pixel colours based on these calculated distances, you can render 2D metaballs and there plenty of examples
For fun however I decided to take a stab at making a very hacky version of the example you shared by simply rendering ellipses into an image, then filtering the image at the end:
PGraphics pg;//a separate layer to render into
int dilateAmt = 3;
PImage grid;//pixels of the grid alone, minus the 'cursor'
void setup(){
size(400,400);
//create a new layer
pg = createGraphics(width,height);
pg.beginDraw();
//draw a di-grid inside
pg.background(255);
pg.noStroke();pg.fill(0);
for(int y = 0 ; y < 5; y++)
for(int x = 0 ; x < 5; x++)
pg.ellipse((y%2==0?40:0)+(x * 80),40+(y * 80), 40, 40);
pg.endDraw();
//grab a snapshot for later re-use
grid = pg.get();
}
void draw(){
pg.beginDraw();
//draw the cached grid (no need to loop and re-render circles)
pg.image(grid,0,0);
//and the cursor into the layer
pg.ellipse(mouseX,mouseY,60,60);
pg.endDraw();
//since PGraphics extends PImage, you can filter, so we dilate
for(int i = 0; i < dilateAmt; i++) pg.filter(DILATE);
//finally render the result
image(pg,0,0);
}
void keyPressed(){
if(keyCode == UP) dilateAmt++;
if(keyCode == DOWN) dilateAmt--;
if(dilateAmt < 1) dilateAmt = 1;
println(dilateAmt);
}
Note that the end result is raster, not vector.
If you want to achieve the exact effect you will need to port your example from JavaScript to Java. The source code is available.
If you like Processing the above example you could use plain javascript using p5.js. You'll find most of the familiar functions from Processing, but also directly use the paper.js library.
I want to make the node go further instead of starting from initial coordinates and going a certain distance can anyone help me?
public void sky(Node node, double xDest, double yDest) {
TranslateTransition tTrans = new TranslateTransition(
Duration.millis(4000), node);
tTrans.setFromX(0);
tTrans.setFromY(0);
tTrans.setToY(yDest);
tTrans.setToX(xDest);
tTrans.setRate(2);
tTrans.setInterpolator(Interpolator.LINEAR);
tTrans.play();
}
The method above moves a node with xDest and yDest.
xDest = x coordinate and yDest = y coordinate
If the initial coordinates are 100, 100 and xDest = 50 and yDest = 50 then when i press the button the node will go to 150, 150 but if i press the button again the animation shows the node starting from 100, 100 and going to 150, 150. I want it to go to 200, 200 at second mouse click, any ideas please ?
Use the byX and byY properties instead of the toX and toY properties:
public void sky(Node node, double deltaX, double deltaY) {
TranslateTransition tTrans = new TranslateTransition(
Duration.millis(4000), node);
tTrans.setFromX(node.getTranslateX());
tTrans.setFromY(node.getTranslateY());
tTrans.setByY(deltaY);
tTrans.setByX(deltaX);
tTrans.setRate(2);
tTrans.setInterpolator(Interpolator.LINEAR);
tTrans.play();
}
Now each time you call this with deltaX=50 and deltaY=50 it will translate it by an additional 50 pixels along both axes.
Currently, the PolarChart joins all the coordinates with lines creating a polygon. I just want it to plot each point with a dot and NOT join them together. Is this possible?
I have tried using translateValueThetaRadiusToJava2D() and Graphics2D to draw circles but it's very clunky and contrived.
Any suggestions welcome!
So the DefaultPolarItemRenderer takes in all the polar points, converts the polar points to regular Java2D coordinates, makes a Polygon with those points and then draws it. Here's how I got it to draw dots instead of a polygon:
public class MyDefaultPolarItemRenderer extends DefaultPolarItemRenderer {
#Override
public void drawSeries(java.awt.Graphics2D g2, java.awt.geom.Rectangle2D dataArea, PlotRenderingInfo info, PolarPlot plot, XYDataset dataset, int seriesIndex) {
int numPoints = dataset.getItemCount(seriesIndex);
for (int i = 0; i < numPoints; i++) {
double theta = dataset.getXValue(seriesIndex, i);
double radius = dataset.getYValue(seriesIndex, i);
Point p = plot.translateValueThetaRadiusToJava2D(theta, radius,
dataArea);
Ellipse2D el = new Ellipse2D.Double(p.x, p.y, 5, 5);
g2.fill(el);
g2.draw(el);
}
}
}
and then instantiated this class elsewhere:
MyDefaultPolarItemRenderer dpir = new MyDefaultPolarItemRenderer();
dpir.setPlot(plot);
plot.setRenderer(dpir);
This one's a little harder. Given a PolarPlot, you can obtain its AbstractRenderer and set the shape. For example,
PolarPlot plot = (PolarPlot) chart.getPlot();
AbstractRenderer ar = (AbstractRenderer) plot.getRenderer();
ar.setSeriesShape(0, ShapeUtilities.createDiamond(5), true);
The diamond will appear in the legend, but the DefaultPolarItemRenderer neither renders shapes, nor provides line control. You'd have to extend the default renderer and override drawSeries(). XYLineAndShapeRenderer is good example for study; you can see how it's used in TimeSeriesChartDemo1.
If this is terra incognita to you, I'd recommend The JFreeChart Developer Guide†.
†Disclaimer: Not affiliated with Object Refinery Limited; I'm a satisfied customer and very minor contributor.
This is an excellent discussion, in case you want the function to pick up the color assigned by user to the series
add ...
Color c =(Color)this.lookupSeriesPaint(seriesIndex);
g2.setColor(c);
before ...
g.draw(e1);
there are other functions... use code completion to see what else functions are available against series rendereing with name starting from lookupSeries........(int seriesindex)
I found a rather strange way to get the points without any lines connecting them.
I set the Stroke of the renderer to be a thin line, with a dash phase of 0, and length of 1e10:
Stroke dashedStroke = new BasicStroke(
0.0f, BasicStroke.CAP_ROUND, BasicStroke.JOIN_ROUND,
0.0f, new float[] {0.0f, 1e10f}, 1.0f );
renderer.setSeriesStroke(0, dashedStroke);