Curvy beziers

Programming Questions

asdf

in Programming Questions • 8 months ago

Hi,

I found thiscode online showing bezier curves dashed line. The code shows one curve. I am using this to map on an image. Is there a way i can make 2 or more simultaneous curves from one Pvector to another. Been trying, but unsuccessfull. Few edits in there are/ might be off..Here's the code-

float x1, y1, x2, y2, x3, y3, x4, y4, t;
float bl = 0;
int hselected = -1;
PVector Delhi;
PVector Mumbai;
PVector Dubai;
PVector Chennai;
PVector Bangkok;
int dashlength = 10;
PImage img;
void setup() {
size(1024, 709);
img = loadImage("map2.jpg");
background(0);
Delhi = new PVector(427, 235);
Mumbai = new PVector(169, 325);
Dubai = new PVector(36, 84 );
Chennai = new PVector(219, 453 );
Bangkok = new PVector(991, 433);
t =0;
x1 = Delhi.x;
y1 = Delhi.y;
x2 = 294;
y2 = 75;
x3 = 162;
y3 = 101;
x4 = Mumbai.x;
y4 = Mumbai.y;
noFill();
}
void draw() {
image(img, 0 ,0);
println(mouseX + "mouseY " + mouseY);
// if(mouse
// delhi();
//mumbai();
DelhiOrigin();
if(mousePressed)
if (hselected == 1) {
x1 = mouseX;
y1 = mouseY;
} else if (hselected == 2) {
x2 = mouseX;
y2 = mouseY;
} else if (hselected == 3) {
x3 = mouseX;
y3 = mouseY;
} else if (hselected == 4) {
x4 = mouseX;
y4 = mouseY;
}
}
void DelhiOrigin() {
stroke(0.0);
strokeWeight(1.0);
beginShape();
vertex(x1, y1);
bezierVertex(x2, y2, x3, y3, x4, y4);
endShape();
ellipse(x1,y1,10,10);
ellipse(x2,y2,10,10);
ellipse(x3,y3,10,10);
ellipse(x4,y4,10,10);
bl = blength(x1, y1, x2, y2, x3, y3, x4, y4);
//find any point on the curve:
t+=0.01;
if(t>1) {
t=0;
}
double mu, mum1,mum13,mu3;
mu = t;
mum1 = 1 - mu;
mum13 = mum1 * mum1 * mum1;
mu3 = mu * mu * mu;
float xn = (float) ( mum13*x1 + 3*mu*mum1*mum1*x2 + 3*mu*mu*mum1*x3 + mu3*x4 );
float yn = (float) ( mum13*y1 + 3*mu*mum1*mum1*y2 + 3*mu*mu*mum1*y3 + mu3*y4 );
stroke(255.0, 0.0, 0.0);
strokeWeight(5.0);
point(xn, yn);
stroke(0.0, 100.0);
strokeWeight(1.0);
//line(x1, y1, x2, y2);
//line(x2, y2, x3, y3);
//line(x3, y3, x4, y4);
stroke(255,0,0);
strokeWeight(2);
float dashnum = bl/dashlength;
float dx = x1;
float dy = y1;
float t = 0;
for (int i=0; i < dashnum*2; i++) {
t += 0.001;
float[] p = findPositionOnBezier(x1, y1, x2, y2, x3, y3, x4, y4, t);
while ( t < 1 && dist(dx,dy,p[0],p[1]) < dashlength) {
t += 0.001;
p = findPositionOnBezier(x1, y1, x2, y2, x3, y3, x4, y4, t);
}
if (t >= 1) { p[0] = x4; p[1] = y4; }
if(i*0.5 == Math.round(i*0.5)) {
line(dx,dy,p[0],p[1]);
}
dx = p[0];
dy = p[1];
if (t == 1) { break; }
}
}
void keyPressed() {
if (keyCode == 38) {
if (dashlength < 40) { dashlength++; }
} else if (keyCode == 40) {
if (dashlength > 4) { dashlength--; }
} else {
System.out.println(keyCode);
}
}
void mouseReleased() {
hselected = -1;
}
void mousePressed() {
if (dist(mouseX,mouseY,x1,y1) < 5) {
hselected = 1;
} else if (dist(mouseX,mouseY,x2,y2) < 5) {
hselected = 2;
} else if (dist(mouseX,mouseY,x3,y3) < 5) {
hselected = 3;
} else if (dist(mouseX,mouseY,x4,y4) < 5) {
hselected = 4;
} else {
hselected = -1;
}
}
float[] findPositionOnBezier(float x1,float y1,float x2,float y2,float x3,float y3,float x4,float y4, float t) {
float [] out = new float[]{0,0};
double mu, mum1,mum13,mu3;
mu = t;
mum1 = 1 - mu;
mum13 = mum1 * mum1 * mum1;
mu3 = mu * mu * mu;
out[0] = (float) ( mum13*x1 + 3*mu*mum1*mum1*x2 + 3*mu*mu*mum1*x3 + mu3*x4 );
out[1] = (float) ( mum13*y1 + 3*mu*mum1*mum1*y2 + 3*mu*mu*mum1*y3 + mu3*y4 );
return out;
}
float blength(float x1,float y1,float x2,float y2,float x3,float y3,float x4,float y4) {
float out = 0;
float t = 0;
float px = x1;
float py = y1;
for (int i=0; i<100; i++) {
t+=(0.01);
float[] p = findPositionOnBezier(x1, y1, x2, y2, x3, y3, x4, y4, t);
out+=dist(px,py,p[0],p[1]);
px = p[0];
py = p[1];
}
return out;
}

Replies(3)

quarks

Re: Curvy beziers

8 months ago

Is there a way i can make 2 or more simultaneous curves from one Pvector to another.

Yes

I created this example for another topic you might like to try it out by getting the code here.

asdf

Re: Curvy beziers

8 months ago

quarks, thanks for the reply. Seems this will definitely solve my purpose. Been trying and experimenting :D
But i have quite a few questions related to the quite complex code.

I just want to make simultaneous curves( perfect semi-circle curves) from one PVector to 4 or more PVectors when mousePressed() on a particular PVector location, on this image.

1. Even though the image has been transformed into a 3d like image, do you reckon i should do this in 3D? Would the code change ? I believe the third tab/'bzcurve' is for that purpose.

2. I tried for 2 paths at the moment. Is this the best way for it?(second path is replacing the first path) -

PVector[] path;
PVector[] path2;
PVector p;
P_BezierSpline spline;
float pt = 0, dpt = 0.005;
PImage img;
void setup(){
int width = 1024;
int height = 709;
size(width, height);
img = loadImage("map2.jpg");
makeSpline();
}
void draw(){
background(255);
image(img, 0, 0);
drawSpline();
drawKnots();
p = spline.point(pt);
pt = (pt + dpt) % 1.0;
fill(0,128,0,96);
noStroke();
ellipse(p.x, p.y, 20, 20);
}
void drawSpline(){
float t = 0, dt = 0.001;
PVector last, curr;
stroke(0);
strokeWeight(1.2);
noFill();
last = spline.point(t);
for(t = dt; t <= 1; t += dt){
curr = spline.point(t);
line(last.x, last.y, curr.x, curr.y);
last = curr;
}
}
void drawKnots(){
noStroke();
fill(0,128,128,96);
for(int i = 0; i < path.length; i++){
ellipse(path[i].x, path[i].y, 10,10);
}
///////////////path2
for(int i = 0; i < path2.length; i++){
ellipse(path2[i].x, path2[i].y, 10,10);
}
}
void makeSpline(){
path = new PVector[] {
new PVector(427, 235),
new PVector(200,90),
// new PVector(210,250),
new PVector(170,325)
};
spline = new P_BezierSpline(path);
//////////// path2
path2 = new PVector[] {
new PVector(427, 235),
new PVector(250,120),
// new PVector(210,250),
new PVector(36, 84)
};
spline = new P_BezierSpline(path2);
}

quarks

Re: Curvy beziers

8 months ago

Just consider a single curve between two points A and B then to create the Bezier spline you need to create a third point C through which the 'flight path' will pass through.

To get a symetrical path between A and B then the point C must on a line that passes through the mid point between A and B and is normal to the line AB.

This function can be used to calculate the point C. The bendyness of the path depends on the value of bend and you get realistic results in the range -0.3 to 0.3 inclusive although you should experiment with this yourself.

PVector calcCcurvePoint(float bend, PVector v0, PVector v1) {
// Calculate mid point between cities
PVector v = PVector.sub(v1, v0);
PVector mid = PVector.div(v, 2);
mid.add(v0);
// Get normal to line between cities
PVector n = new PVector(-v.y, v.x, 0);
n.normalize();
// Rescale and translet n to give third point for Bezier spline
n. mult(bend * v.mag());
n.add(mid);
return n;
}

Anyway I have taken your picture and create an applet that calculates and shows a flight between two cities and you can see that here. You can also download the entire sketch here.

Top Reply

Curvy beziers

Replies(3)

Re: Curvy beziers

Re: Curvy beziers

Re: Curvy beziers

Statistics

Tags

Actions