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 › Syntax Questions › Drawing continuous lines
‹ Previous Topic | Next Topic ›
Page Index Toggle Pages: 1
Drawing continuous lines (Read 571 times)
etienne2001
Drawing continuous lines
Jul 3rd, 2008, 11:33pm  
I just started to use processing and I want to draw a simple line using my mouse. My problem is that the line is deleted after one frame. Is there a way to save the line from each frame to get a continuous line. I think that I have to create a class to store the data, but I don't know how.
Thanks for your answer!
Back to top
 
 
antiplastik
Re: Drawing continuous lines
Reply #1 - Jul 4th, 2008, 12:14am  
you need to store the coordinates of the line, indeed. that means, 2 points. or 4 numbers (int). you can do that with a class too. example (click & drag) :

without any class :

Code:
int x1, y1, x2, y2;

void draw() {
  background(255);
  line(x1, y1, x2, y2);
}

void mouseDragged() {
  x2 = mouseX; y2 = mouseY;
}

void mousePressed() {
  x1 = mouseX; y1 = mouseY;
  x2 = mouseX; y2 = mouseY;
}


example with a Point class :

Code:
Point p1, p2;

class Point {
  int x, y;
  void setXY(int x, int y) {
    this.x = x; this.y = y;
  }
}

void setup() {
  p1 = new Point();
  p2 = new Point();
}

void draw() {
  background(255);
  line(p1.x, p1.y, p2.x, p2.y);
}

void mouseDragged() {
  p2.setXY(mouseX, mouseY);
}

void mousePressed() {
  p1.setXY(mouseX, mouseY);
  p1.setXY(mouseX, mouseY);
}


minimalist example with a Line class :

Code:
Line li;

class Line {
  Point p1, p2;
  Line() {
    p1 = new Point();
    p2 = new Point();
  }
  void display() {
    line(p1.x, p1.y, p2.x, p2.y);
  }
}

class Point {
  int x, y;
  void setXY(int x, int y) {
    this.x = x; this.y = y;
  }
}

void setup() {
  li = new Line();
}

void draw() {
  background(255);
  li.display();
}

void mouseDragged() {
  li.p2.setXY(mouseX, mouseY);
}

void mousePressed() {
  li.p1.setXY(mouseX, mouseY);
  li.p1.setXY(mouseX, mouseY);
}
Back to top
 
WWW  
PhiLho 
Re: Drawing continuous lines
Reply #2 - Jul 4th, 2008, 1:04pm  
Of course, the simplest way is to avoid erasing the previous drawings, like in examples > Topics > Drawing > ContinuousLines which puts the background() call to setup(), or use noLoop() and draw on mousePressed() calls.

But storing the successive actions offers more possibilities...
Back to top
 
WWW  
etienne2001
Re: Drawing continuous lines
Reply #3 - Jul 4th, 2008, 1:41pm  
Thanks for your answer. But how can I use this concept to draw multiple lines?
Back to top
 
 
jakub
Re: Drawing continuous lines
Reply #4 - Jul 4th, 2008, 2:44pm  
by multiple line, you mean several connected lines?
if yes, you can simple delete  background(...) statement from draw() in last antiplastik example

or if you want to draw several lines, at the same time the best solution is to create some kind of array, and keep line objects in it:

for example by little changing Antiplastik code:

int lineNumber = 6;

ArrayList lines;

class Line {
 Point p1, p2;
 int rand;
 Line() {
   p1 = new Point();
   p2 = new Point();
   rand = (int) random(0,5);
 }
 void display() {
   line(p1.x, p1.y, p2.x, p2.y);
 }
}

class Point {
 int x, y;
 void setXY(int x, int y) {
   this.x = x; this.y = y;
 }
}

void setup() {
 lines = new ArrayList();
 for(int i = 0; i < lineNumber;i++)
 lines.add(new Line());
}

void draw() {
 background(255);
 for(int i = 0; i < lineNumber;i++){
  Line li = (Line)lines.get(i);
  li.display();    
 }  
}

void mouseDragged() {
 for(int i = 0; i < lineNumber;i++){
  Line li = (Line)lines.get(i);
  li.p2.setXY(mouseX + li.rand, mouseY + li.rand);    
 }  
}

void mousePressed() {
 for(int i = 0; i < lineNumber;i++){
  Line li = (Line)lines.get(i);
  li.p1.setXY(mouseX + li.rand, mouseY + li.rand);    
 }  
}
Back to top
 
www.chamicewicz.com
WWW  
etienne2001
Re: Drawing continuous lines
Reply #5 - Jul 4th, 2008, 11:25pm  
Thanks, Jakub. But this is not exactly what I mean. I just want to use my mouse like a pen. All the lines don't have to be connected. I just want to see the line I draw when the mouse button is pressed.
Back to top
 
 
endasf
Re: Drawing continuous lines
Reply #6 - Jul 6th, 2008, 3:23am  
http://processing.org/learning/topics/continuouslines.html
Back to top
 
...endasf...
 
Page Index Toggle Pages: 1
‹ Previous Topic | Next Topic ›