We closed this forum 18 June 2010. It has served us well since 2005 as the ALPHA forum did before it from 2002 to 2005. New discussions are ongoing at the new URL http://forum.processing.org. You'll need to sign up and get a new user account. We're sorry about that inconvenience, but we think it's better in the long run. The content on this forum will remain online.
Index › Programming Questions & Help › Programs › dynamically connecting points with rounded lines
‹ Previous Topic | Next Topic ›
Page Index Toggle Pages: 1
dynamically connecting points with rounded lines (Read 560 times)
frederickk
dynamically connecting points with rounded lines
Aug 22nd, 2008, 11:55pm  
i'm trying to connect points, with rounded lines similar to how hektor's interface works.

http://video.google.com/videosearch?q=8602137013431929280&emb=0#

or like this.

http://www.thebarricades.de/kenfrederick/transfer/round_connect.png

i'm not sure where to start. but i know it's possible any help would be immensely appreciated.

thanks.
Ken
Back to top
 
http://cargocollective.com/kenfrederick
WWW  
seltar
Re: dynamically connecting points with rounded lin
Reply #1 - Aug 23rd, 2008, 11:27am  
I'd use a bezier (http://processing.org/reference/bezier_.html)
I'd take use the direction of the lines to detirmine which one is longest. From that I'd make a temporary point and add a bit to the length. Then center it between the two lines.
Then use the bezier function i.e. bezier(lineA.x,lineA.y,tempLine.x,tempLine.y,tempLine.x,tempLine.y,lineB.x,lineB
.y);

hope this helps

seltar
Back to top
 
I'm bored, therefore I program
http://seltar.org  > seltar's special place
http://snippet.seltar.org > seltar's snippet palace
http://libraries.seltar.org > seltar's libraries
WWW  
Ira
Re: dynamically connecting points with rounded lin
Reply #2 - Aug 23rd, 2008, 2:10pm  
You can also use curve(), which I find a little simpler to control since the curve passes through all the pts. The trick is in the ordering of the pts passed to the function. Here's an example:
Code:

// spline curve between random points
int nodeCount = 60;
float nodeSize = 6.0;
float padding = 50.0;
Point3D[] pts = new Point3D[nodeCount];
 
void setup(){
  size(500, 500, P3D);
  background(255);
  lights();
   
  // argument changes spline interpolation
  curveTightness(0);
 
  // calc random points
  for (int i=0; i<pts.length; i++){
    pts[i] = new Point3D(random(padding, width-padding), random(padding, height-padding), random(-padding, padding));
  }
 
  // draw spline curve
  /********** 
  look carefully at the order 
  of the points passed to curve() 
  ***********/
  noFill();
  stroke(0);
  beginShape();
  curve(pts[0].x, pts[0].y, pts[0].z, pts[0].x, pts[0].y, pts[0].z, pts[1].x, pts[1].y, pts[1].z, pts[2].x, pts[2].y, pts[2].z);
  for (int i=0; i<pts.length-3; i++){
    curve(pts[i].x, pts[i].y, pts[i].z, pts[i+1].x, pts[i+1].y, pts[i+1].z, pts[i+2].x, pts[i+2].y, pts[i+2].z, pts[i+3].x, pts[i+3].y, pts[i+3].z);
  }
  curve(pts[pts.length-3].x, pts[pts.length-3].y, pts[pts.length-3].z, pts[pts.length-2].x, pts[pts.length-2].y, pts[pts.length-2].z, pts[pts.length-1].x, pts[pts.length-1].y, pts[pts.length-1].z, pts[pts.length-1].x, pts[pts.length-1].y, pts[pts.length-1].z);
 
  // draw nodes
  noStroke();
  for (int i=0; i<pts.length; i++){
    pushMatrix();
    translate(pts[i].x, pts[i].y, pts[i].z);
    fill(100);
    if (i==0 || i == pts.length-1){
 fill(255, 75, 0);
    }
    box(nodeSize, nodeSize, nodeSize);
    popMatrix();
  }
}
 
class Point3D{
  float x, y, z;
 
  Point3D(){
  }
 
  Point3D(float x, float y, float z){
    this.x = x;
    this.y = y;
    this.z = z;
  }
}

Back to top
 
Processing: Creative Coding and Computational Art
http://friendsofed.com/book.html?isbn=159059617X

The Essential Guide to Processing for Flash Developers
http://www.friendsofed.com/book.html?isbn=9781430219798

Center of Creative Computation
Meadows/Lyle
SMU, Dallas
WWW irarobinian  
frederickk
Re: dynamically connecting points with rounded lin
Reply #3 - Aug 27th, 2008, 7:17am  
ira.

thank you so much. that's definately a start, but i'm not sure how to use it in a way that would conect the endpoints of a shape that already exists.

lets say i'm drawing a form from a set of points in a 2D array OR importing an svg file

is this possible? it has to be. right?

Code:

float[][] punkte = {
{-71.927734375,59.08203125, -73.017578125,62.310546875,-56.22265625,23.654296875, -56.22265625,23.654296875},
{-56.22265625,23.654296875, -48.1884765625,31.69921875,-45.5361328125,62.13671875, -45.5361328125,62.13671875},
{56.7978515625,56.201171875, 58.013671875,45.609375,60.8447265625,22.1328125, 60.8447265625,22.1328125},
{60.8447265625,22.1328125, 68.57421875,26.56640625,83.623046875,36.10546875, 83.623046875,36.10546875},
{25.4013671875,57.4453125, 33.263671875,50.77734375,51.0400390625,25.8125, 51.0400390625,25.8125},
{51.0400390625,25.8125, 52.486328125,40.0859375,52.6318359375,68.75, 52.6318359375,68.75},
{20.564453125,47.767578125, 36.150390625,42.18359375,38.6318359375,20.73828125, 38.6318359375,20.73828125},
{38.6318359375,20.73828125, 33.021484375,19.974609375,21.8017578125,18.44921875, 21.8017578125,18.44921875},
{-22.021484375,-4.56640625, 24.0966796875,15.19921875,-89.640625,69.22265625, -89.640625,69.22265625},
{-89.640625,69.22265625, -108.9658203125,15.705078125,-23.482421875,-34.826171875, -23.482421875,-34.826171875},
{-92.220703125,20.671875, -85.2998046875,17.984375,-65.8505859375,4.69140625, -65.8505859375,4.69140625},
{-65.8505859375,4.69140625, -73.4619140625,-0.201171875,-89.03515625,-9.400390625, -89.03515625,-9.400390625},
{-80.3876953125,24.072265625, -83.1376953125,25.328125,-88.31640625,28.4296875, -88.31640625,28.4296875},
{-80.3876953125,24.072265625, -53.7998046875,9.638671875,-80.4501953125,59.298828125, -80.4501953125,59.298828125},
{80.4765625,-11.302734375, 77.302734375,-10.7109375,49.9462890625,9.5546875, 49.9462890625,9.5546875},
{49.9462890625,9.5546875, 59.5380859375,12.54296875,77.900390625,20.544921875, 77.900390625,20.544921875},
{-36.5595703125,26.76953125, -85.8203125,-15.892578125,36.689453125,13.2578125, 36.689453125,13.2578125},
{36.689453125,13.2578125, 30.7236328125,12.830078125,18.7919921875,11.97265625, 18.7919921875,11.97265625},
{-46.7431640625,24.447265625, -46.9462890625,33.951171875,-42.1171875,51.84765625, -42.1171875,51.84765625},
{70.5498046875,-15.880859375, 65.34765625,-8.748046875,50.84375,-1.169921875, 50.84375,-1.169921875},
{50.84375,-1.169921875, 54.2109375,-15.1640625,55.9775390625,-43.7265625, 55.9775390625,-43.7265625},
{-0.1044921875,-88.640625, -5.8427734375,-49.345703125,41.59375,-4.455078125, 41.59375,-4.455078125},
{41.59375,-4.455078125, 44.697265625,-15.69140625,48.0029296875,-38.71484375, 48.0029296875,-38.71484375},
{8.591796875,-26.03125, 23.5341796875,-44.333984375,65.4453125,-53.099609375, 65.4453125,-53.099609375},
{65.4453125,-53.099609375, 88.1396484375,-24.087890625,92.5400390625,58.59375, 92.5400390625,58.59375},
{92.5400390625,58.59375, 91.6259765625,73.953125,31.3857421875,90.791015625, 31.3857421875,90.791015625},
{31.3857421875,90.791015625, 3.2421875,95.66015625,9.740234375,1.482421875, 9.740234375,1.482421875},
{-61.8544921875,-46.1328125, -49.48046875,-37.4609375,-34.576171875,-15.93359375, -34.576171875,-15.93359375},
{-34.576171875,-15.93359375, -6.2568359375,-35.439453125,-10.9765625,-94.896484375, -10.9765625,-94.896484375},
{-89.91015625,-16.556640625, -87.64453125,-17.984375,-68.1181640625,-3.970703125, -68.1181640625,-3.970703125},
{-68.1181640625,-3.970703125, -63.828125,-2.685546875,-67.5048828125,-45.21484375, -67.5048828125,-45.21484375}};

int nodeCount = punkte.length;//4;
float nodeSize = 3.0;

Point2D[] pts = new Point2D[nodeCount];
 
void setup(){
  size(500, 500);
  background(255);

  // calc random points
  for (int i=0; i<pts.length; i++){
    pts[i] = new Point2D(punkte[i][0], punkte[i][1]);
  }
 
}

void draw(){
  background(255);
  translate(width*0.5,height*0.5);
  strokeWeight(0.5);
  scale(2);
  
  // argument changes spline interpolation
  curveTightness(-0.5);

  noFill();
  stroke(0,255,255);

  // draw the starting/original form
  for(int i=0; i<punkte.length; i++) {
    //println(punkte[i][0]);
    bezier(
    punkte[i][0], punkte[i][1], 
    punkte[i][2], punkte[i][3], 
    punkte[i][4], punkte[i][5], 
    punkte[i][6], punkte[i][7]);
  } 


  // draw spline curve
  // look carefully at the order of the points passed to curve()  
  stroke(0);
  beginShape();

  curve(pts[0].x, pts[0].y, pts[0].x, pts[0].y, pts[1].x, pts[1].y, pts[2].x, pts[2].y);

  for (int i=0; i<pts.length-3; i++){
    curve(pts[i].x, pts[i].y, pts[i+1].x, pts[i+1].y, pts[i+2].x, pts[i+2].y, pts[i+3].x, pts[i+3].y);
  }

  curve(pts[pts.length-3].x, pts[pts.length-3].y, pts[pts.length-2].x, pts[pts.length-2].y, pts[pts.length-1].x, pts[pts.length-1].y, pts[pts.length-1].x, pts[pts.length-1].y);

  // draw nodes
  noStroke();
  for (int i=0; i<pts.length; i++){
    pushMatrix();
    translate(pts[i].x, pts[i].y);
    fill(100);

    if (i==0 || i == pts.length-1){
	fill(255, 75, 0);
    }

    ellipse(0,0, nodeSize,nodeSize);
    popMatrix();
  }

}

class Point2D{
  float x, y;
 
  Point2D(){
  }
 
  Point2D(float x, float y){
    this.x = x;
    this.y = y;
  }

}


Ken
Back to top
 
http://cargocollective.com/kenfrederick
WWW  
Ira
Re: dynamically connecting points with rounded lin
Reply #4 - Aug 27th, 2008, 11:25pm  
ken,

I'd convert the 2D float array into a 1D Point2D array. I also noticed that your point data had lots of redundancy. See if this helps at all:

Code:

float[][]punkte={{-71.927734375,59.08203125,-73.017578125,62.310546875,-56.22265625,23.654296875,-56.22265625,23.654296875},{-56.22265625,23.654296875,-48.1884765625,31.69921875,-45.5361328125,62.13671875,-45.5361328125,62.13671875},{56.7978515625,56.201171875,58.013671875,45.609375,60.8447265625,22.1328125,60.8447265625,22.1328125},{60.8447265625,22.1328125,68.57421875,26.56640625,83.623046875,36.10546875,83.623046875,36.10546875},{25.4013671875,57.4453125,33.263671875,50.77734375,51.0400390625,25.8125,51.0400390625,25.8125},{51.0400390625,25.8125,52.486328125,40.0859375,52.6318359375,68.75,52.6318359375,68.75},{20.564453125,47.767578125,36.150390625,42.18359375,38.6318359375,20.73828125,38.6318359375,20.73828125},{38.6318359375,20.73828125,33.021484375,19.974609375,21.8017578125,18.44921875,21.8017578125,18.44921875},{-22.021484375,-4.56640625,24.0966796875,15.19921875,-89.640625,69.22265625,-89.640625,69.22265625},{-89.640625,69.22265625,-108.9658203125,15.705078125,-23.482421875,-34.826171875,-23.482421875,-34.826171875},{-92.220703125,20.671875,-85.2998046875,17.984375,-65.8505859375,4.69140625,-65.8505859375,4.69140625},{-65.8505859375,4.69140625,-73.4619140625,-0.201171875,-89.03515625,-9.400390625,-89.03515625,-9.400390625},{-80.3876953125,24.072265625,-83.1376953125,25.328125,-88.31640625,28.4296875,-88.31640625,28.4296875},{-80.3876953125,24.072265625,-53.7998046875,9.638671875,-80.4501953125,59.298828125,-80.4501953125,59.298828125},{80.4765625,-11.302734375,77.302734375,-10.7109375,49.9462890625,9.5546875,49.9462890625,9.5546875},{49.9462890625,9.5546875,59.5380859375,12.54296875,77.900390625,20.544921875,77.900390625,20.544921875},{-36.5595703125,26.76953125,-85.8203125,-15.892578125,36.689453125,13.2578125,36.689453125,13.2578125},{36.689453125,13.2578125,30.7236328125,12.830078125,18.7919921875,11.97265625,18.7919921875,11.97265625},{-46.7431640625,24.447265625,-46.9462890625,33.951171875,-42.1171875,51.84765625,-42.1171875,51.84765625},{70.5498046875,-15.880859375,65.34765625,-8.748046875,50.84375,-1.169921875,50.84375,-1.169921875},{50.84375,-1.169921875,54.2109375,-15.1640625,55.9775390625,-43.7265625,55.9775390625,-43.7265625},{-0.1044921875,-88.640625,-5.8427734375,-49.345703125,41.59375,-4.455078125,41.59375,-4.455078125},{41.59375,-4.455078125,44.697265625,-15.69140625,48.0029296875,-38.71484375,48.0029296875,-38.71484375},{8.591796875,-26.03125,23.5341796875,-44.333984375,65.4453125,-53.099609375,65.4453125,-53.099609375},{65.4453125,-53.099609375,88.1396484375,-24.087890625,92.5400390625,58.59375,92.5400390625,58.59375},{92.5400390625,58.59375,91.6259765625,73.953125,31.3857421875,90.791015625,31.3857421875,90.791015625},{31.3857421875,90.791015625,3.2421875,95.66015625,9.740234375,1.482421875,9.740234375,1.482421875},{-61.8544921875,-46.1328125,-49.48046875,-37.4609375,-34.576171875,-15.93359375,-34.576171875,-15.93359375},{-34.576171875,-15.93359375,-6.2568359375,-35.439453125,-10.9765625,-94.896484375,-10.9765625,-94.896484375},{-89.91015625,-16.556640625,-87.64453125,-17.984375,-68.1181640625,-3.970703125,-68.1181640625,-3.970703125},{-68.1181640625,-3.970703125,-63.828125,-2.685546875,-67.5048828125,-45.21484375,-67.5048828125,-45.21484375}};

void setup(){
  size(500, 500);
  background(255);
  smooth();
  noFill();
  
  // convert 2D float array into 1D Point2D array
  Point2D[] pts = new Point2D[punkte.length*(punkte[0].length/2)];
  int counter=0;
  for (int i=0; i<punkte.length; i++){
    for (int j=1; j<punkte[i].length; j+=2){
      pts[counter++] = new Point2D(punkte[i][j-1], punkte[i][j]);
    }
  }
  // remove redundant pts
  Point2D[] cleanedPts = { new Point2D(pts[0].x, pts[0].y) };
  for (int i=1; i<pts.length; i++){
    if (pts[i].x != pts[i-1].x || pts[i].y != pts[i-1].y){
      cleanedPts = (Point2D[])append(cleanedPts, new Point2D(pts[i].x, pts[i].y));
    }
  }
  stroke(0);
  curveTightness(-.5);
  Path2D path = new Path2D(cleanedPts);
  translate(width/2, height/2);
  scale(2.0);
  path.createPath();
}


class Path2D{
  Point2D[] pts;

  Path2D(Point2D[] pts){
    this.pts = pts;
  }

  void createPath(){
    curve(pts[0].x, pts[0].y, pts[0].x, pts[0].y, pts[1].x, pts[1].y, pts[2].x, pts[2].y);
    for (int i=0; i<pts.length-3; i++){
      curve(pts[i].x, pts[i].y, pts[i+1].x, pts[i+1].y, pts[i+2].x, pts[i+2].y, pts[i+3].x, pts[i+3].y);
    }
    curve(pts[pts.length-3].x, pts[pts.length-3].y, pts[pts.length-2].x, pts[pts.length-2].y, pts[pts.length-1].x, pts[pts.length-1].y, pts[pts.length-1].x, pts[pts.length-1].y);
  }

  void createNodes(){
    for (int i=0; i<pts.length; i++){
      ellipse(pts[i].x, pts[i].y, 4, 4);
    }
  }
}

class Point2D{
  float x, y;

  Point2D(){
  }

  Point2D(float x, float y){
    this.x = x;
    this.y = y;
  }
}

Back to top
 
Processing: Creative Coding and Computational Art
http://friendsofed.com/book.html?isbn=159059617X

The Essential Guide to Processing for Flash Developers
http://www.friendsofed.com/book.html?isbn=9781430219798

Center of Creative Computation
Meadows/Lyle
SMU, Dallas
WWW irarobinian  
fry
Re: dynamically connecting points with rounded lin
Reply #5 - Aug 28th, 2008, 2:51pm  
ira, you've just won the "widest comment ever" award. you may not have realized there was an award for it, and we may have never awarded it in the past, but this time around, the prize is yours.
Back to top
 
WWW  
Ira
Re: dynamically connecting points with rounded lin
Reply #6 - Aug 28th, 2008, 4:12pm  
YES!!!!!!!
(I had to fit that nasty array in somehow)
Back to top
 
Processing: Creative Coding and Computational Art
http://friendsofed.com/book.html?isbn=159059617X

The Essential Guide to Processing for Flash Developers
http://www.friendsofed.com/book.html?isbn=9781430219798

Center of Creative Computation
Meadows/Lyle
SMU, Dallas
WWW irarobinian  
Page Index Toggle Pages: 1
‹ Previous Topic | Next Topic ›