Hey guys,
I'm very new to processing - I found about it in January, saw great potential and started experimenting and learning. I was hoping someone can help me out with a code I'm having trouble with. I'm importing a set of coordinates from an external txt file and putting the resulting shape on the drawing window. This much I was able to figure out. What I wanna do next - and which has been killing me for over a weeks now, and I seem to be giving up - is that I want to be able to drag any corner of the shape and change this point's position and consequently dragging the connecting lines with it resulting in a new shape. Say if the mouse is at least 5 pixels away from the corner, I can click and drag it to its new location. I tried using classes, which confused me, some if else statements, for structures.., I tried adding transparent circles (diameter=10) around each corner, so that if the mouse is over the circle, I can click and drag my point, but I didn't know how to go about controlling the mouseOver... I just don't seem to be getting the hang of it.

Can anyone PLEASE help me out with this one!
Here's the code that I have (importing the coordinates).


int x1, y1, x2, y2, firstX, firstY;
String[] coords;

void setup(){
 smooth();
 strokeWeight(2);
 coords = loadStrings("coordinates.txt");
}

void draw(){
 for (int i=0; i<coords.length; i++){
   //turn the data in the file coordinates.txt into an array called coords. then split this array into pieces, each having two positions [0] and [1], one for the x-position the other for the
   //y-position, place these coordinates into two variables x1 and y1 respectively (tell them apart by the TAB between each coordinate).  
   String[] pieces = split(coords[i], '\t');
   if (pieces.length == 2){
     x1 = int(pieces[0]);
     y1 = int(pieces[1]);
     
     if(i==0){//when we're in the first round, draw a point on the screen, and place the coords of the point into different variables (x2,y2) to be able to use them in drawing a line when i>0
       point(x1,y1);
       x2=x1;
       y2=y1;
       //keep the coords of the first point in separate variables to close the shape at the end
       firstX=x1;
       firstY=y1;    
     }
     
     //after the first point, draw the lines connecting the coordinates
     if(i>0){
       //when i=1 draw a line between the first coordinate and the second coordinate, turn the second coordinate into the first one and so on.
       line(x1,y1,x2,y2);
       if(i==(coords.length-1)){//when we reach the last item in the coords array, draw a line between the last point and the very first point
         line(x1,y1,firstX,firstY);
       }
       x2=x1;
       y2=y1;
       
     }//end if(i>0)
   }//end if (pieces.length == 2)
 }//end for()
 
 /*
 //if the mouse is pressed and it is near the first point by ±5pixels, allow dragging the first point with the mouse by setting it's coordinates to mouseX mouseY.
   if(mousePressed){
     if( (mouseX==firstX+5) || (mouseX==firstX-5) || (mouseY==firstY+5) || (mouseY==firstY-5) ){    
       firstX=mouseX;
       firstY=mouseY;
   }
 }*/
 
}//end draw
 
and the set of coordinates that i'm using is
15.0       21.0
58.0       14.0
90.0       63.0
50.0       97.0
37.0       52.0
11.0       62.0


and it's stored in coordinates.txt and are separated by tabs
but it should work with any set of coordinates.

Thank you infinitely!
Marianne

OgreProgrammer is right, you should do the parsing once and for all in setup().
You can find inspiration about dragging shapes in Examples > Topics > GUI, eg. Handles or Scrollbar.
If you need more help, just ask.

OK, here is what we mean:
Code:

int x1, y1, x2, y2, firstX, firstY;
String[] coordLines =
{// Hard-coded for testing purposes
"15.021.0",
"58.014.0",
"90.063.0",
"50.097.0",
"37.052.0",
"11.062.0 "
};
int[][] coords;
 
void setup(){
  smooth();
  strokeWeight(2);
// Restore this to read the file
//  coordLines = loadStrings("coordinates.txt");
  coords = new int[coordLines.length][2];
  for (int i=0; i<coordLines.length; i++){
    //turn the data in the file coordinates.txt into an array called coords. then split this array into pieces, each having two positions [0] and [1], one for the x-position the other for the
    //y-position, place these coordinates into two variables x1 and y1 respectively (tell them apart by the TAB between each coordinate).    
    String[] pieces = split(coordLines[i], '\t');
    if (pieces.length == 2){
	coords[i][0] = int(pieces[0]); // x
	coords[i][1] = int(pieces[1]); // y
    }
  }
}
 
void draw(){
 
  for (int i=0; i<coords.length; i++){
  int x1 = coords[i][0];
  int y1 = coords[i][1];
  
 if(i==0){//when we're in the first round, draw a point on the screen, and place the coords of the point into different variables (x2,y2) to be able to use them in drawing a line when i>0
   point(x1,y1);
   x2=x1;
   y2=y1;
   //keep the coords of the first point in separate variables to close the shape at the end
   firstX=x1;
   firstY=y1;	
 }
 
 //after the first point, draw the lines connecting the coordinates
 else{
   //when i=1 draw a line between the first coordinate and the second coordinate, turn the second coordinate into the first one and so on.
   line(x1,y1,x2,y2);
   if(i==(coords.length-1)){//when we reach the last item in the coords array, draw a line between the last point and the very first point
     line(x1,y1,firstX,firstY);
   }
   x2=x1;
   y2=y1;
   
 }//end else
  }//end for()
}//end draw
 

To drag corners, you have to loop on the array, and find if dist(mouseX, mouseY, x1, y1) is below a given radius. If not, do nothing on mousePressed. Otherwise, start dragging, changing the values at the found index.

Hello

I have the same issue. I got it right to read the coords from a file and put them into arrays. I just can't figure out how to use the mousedragged method.

Please help me!

ivan

Hi Ivan. I actually wasn't able to do more than you either. @PhiLho -  I looked at the examples of handles and the scrollbar that you pointed to, those kind of started sparking some ideas of how to fix my code - and I thank you for bringing them up, but I guess something doesn't click in me to be able to really get it and solve my problem. Actually, what I got so far is when I click and drag, a bunch of lines appear from the last coordinate pair and as I drag the mouse the lines multiply... I'll include the code of what I got so far, and if you have any further suggestions, please help me out.

Code:

int x1, y1, x2, y2, firstX, firstY;
String[] coordRows;
int[][] coords;//store the rows and columns of the coordinates.txt into this array
//Drag[] = drag;

void setup(){
  size(200, 200);
  smooth();
  strokeWeight(2);
  coordRows = loadStrings("coordinates.txt");//load this .txt file
  coords = new int[coordRows.length][2];//set the value of the array = the number of rows in coordRows (defines the number of coordinate pairs) and the number of columns which is 2 (x and y positions)
  for(int i = 0; i<coordRows.length; i++){
	   //turn the data in the file coordinates.txt into an array called coords. then split this array into pieces, each having two positions [0] and [1], one for the x-position the other for the
    //y-position, place these coordinates into two variables x1 and y1 respectively (tell them apart by the TAB between each coordinate).
    String[] pieces = split(coordRows[i], '\t');
    if (pieces.length == 2){
	coords[i][0] = int(pieces[0]);
	coords[i][1] = int(pieces[1]);
    }
  }
}



void draw(){
  //println(lines.length);
  for (int i=0; i<coords.length; i++){
	x1 = coords[i][0];//set any i+0 position to x = basically the i's in the first column (position[0]) define the x coordinate and the ones in second column (position[1]) define the y coordinate
	y1 = coords[i][1];
	
	if(i==0){//when we're in the first round, draw a point on the screen, and place the coords of the point into different variables (x2,y2) to be able to use them in drawing a line when i>0
	  point(x1,y1);
	  x2=x1;
	  y2=y1;
	  //keep the coords of the first point in separate variables to close the shape at the end
	  firstX=x1;
	  firstY=y1;     
	}
	
	//after the first point, draw the lines connecting the coordinates
	else{
	  //when i=1 draw a line between the first coordinate and the second coordinate, turn the second coordinate into the first one and so on.
	  line(x1,y1,x2,y2);
	  if(i==(coords.length-1)){//when we reach the last item in the coords array, draw a line between the last point and the very first point
	    line(x1,y1,firstX,firstY);
	  }
	  x2=x1;
	  y2=y1;
	  
	}//end else
	
	/*
	if(mousePressed){
	  if( (mouseX == ((i+5) && (i-5)) ) || (mouseY == ((i+5) && (i-5))) ){
	    i = (mouseX && mouseY);
	  }
	}
	*/
	 /*
	 if(mousePressed){
	 // if( (mouseX == (coords[0]+5)) || (mouseX == (coords[0]-5)) || (mouseY == (coords[1]+5)) || (mouseY == (coords[1]-5)) ){
	  if( (mouseX == (coords[0])) || (mouseX == (coords[0])) || (mouseY == (coords[1])) || (mouseY == (coords[1])) ){
	  coords[i][0] = mouseX;
	  coords[i][1] = mouseY;
	 // break;
	  }
	}
	  
    }//end for()*/
    
     //if the mouse is pressed and it is near the first point by ±5pixels, allow dragging the first point with the mouse by setting it's coordinates to mouseX mouseY.
    if(mousePressed){
	for(int j = 0; j<coords.length; j++){
	if( (mouseX==j+5) || (mouseX==j-5) || (mouseY==j+5) || (mouseY==j-5) ){    
	  firstX=mouseX;
	  firstY=mouseY;
    }
  }
}
  }
  }//draw()

/*
class Drag{    
}//end class Drag
*/
 

Thank you for your help,
Marianne

Yes I am

I didn't know the dragging was supposed to stop after you reach the threshold. I mean that's not what i understood from the assignment question. I thought you could drag it as much as you want and when you release the mouse, the new coords are stored in the file.

Thanks for the vertex advice, i'll try that.

How do you like the program so far? How are you doing on the rest of the assignments??

Not sure if that can be useful for you, but I made a Handle class some time ago. I posted it and a demo at PasteBin:

http://philho.pastebin.com/f16ac1b09 -- Handles (demo)
http://philho.pastebin.com/f19f2cace -- Handle (class)