How to draw multiple, user defined lines?

iHatch

Hi all thanks for reading, so my problem is that I need to be able to draw lines at differing points defined by the user through a mouse click.

The first click will set the first X and Y coordinates and the second click will provide the second X and Y coordinate to generate a line.

Following this the program should be able to draw more lines with totally different coordinates every time.

This is what I've attempted so far but all it only seems to be able to use the first X and Y coordinates it is provided with whilst being able to change the second pair.

int lines = 0;
int x1, y1, x2, y2;
void setup() {
  size(500,600);
  background(0);

}

void draw() {
}
  void mousePressed() {
    stroke(255);
      if(x1 == 0 && y1 == 0) {
        x1 = mouseX;
        y1 = mouseY;
         return;
      }
      else{
        x2=mouseX;
        y2=mouseY;

      }
      {
        lines++;
        line(x1,y1,x2,y2);
      }
}

Any help is much appreciated and thank you for reading

GoToLoop

Is it something like this? http://studio.processingtogether.com/sp/pad/export/ro.9c9DCUznTwot6/latest

iHatch

Yes that's 90% of what I need. The only other thing I need it to do that yours doesn't is to keep every line it makes. So even as the second, third, fourth etc appear none of the lines drawn previously should disappear but still thank you so very much for the help that's quite a nice program you've put together.

GoToLoop

How about this 1 then? 8-X

/**
 * Trailing Deque (v3.53)
 * by  quarks (2013/Feb)
 * for rialobran
 * mod GoToLoop
 *
 * forum.processing.org/one/topic/drawing-a-trail-for-a-moving-object
 *
 * forum.processing.org/two/discussion/3864/
 * how-to-draw-multiple-user-defined-lines
 */

import java.util.Queue;
import java.util.ArrayDeque;

static final byte MAX_TRAIL_POINTS = 5;
static final Queue<PointXY> trails = new ArrayDeque(MAX_TRAIL_POINTS);

static final color BG  = 0350;
static final short FPS = 30;
static final String GFX = JAVA2D; // use JAVA2D or P2D

void setup() {
  size(800, 600, GFX);
  frameRate(FPS);
  smooth(4);
  noLoop();

  stroke(PointXY.FG);
  strokeWeight(PointXY.BOLD);
}

void mousePressed() {
  redraw();

  trails.add( trails.size() == MAX_TRAIL_POINTS
    ? trails.remove().setXY(mouseX, mouseY)
    : new PointXY(mouseX, mouseY) );
}

void draw() {
  background(BG);
  PointXY tt = trails.peek();
  for (PointXY t: trails)   tt = t.lineXY(tt);
}

final class PointXY {
  static final color FG = #0000FF;
  static final short BOLD = 3;

  int x, y;

  PointXY(int px, int py) {
    setXY(px, py);
  }

  PointXY setXY(int px, int py) {
    x = px;
    y = py;
    return this;
  }

  PointXY lineXY(PointXY other) {
    line(other.x, other.y, x, y);
    return this;
  }
}

GoToLoop

As a bonus, the same program above re-written in CoffeeScript! ;)

###
Trailing Deque (v3.54)
by:  quarks (2013/Feb)
for: rialobran
mod: GoToLoop

http://forum.processing.org/topic/drawing-a-trail-for-a-moving-object

http://forum.processing.org/two/discussion/3864/
how-to-draw-multiple-user-defined-lines
###


MAX_TRAIL_POINTS = 5; trails = []
BG = `0350`; FPS = 30
GFX = JAVA2D   # use JAVA2D or P2D

setup: ->

  size 600, 600, GFX; frameRate FPS; smooth 4; do noLoop
  stroke PointXY::FG; strokeWeight PointXY::BOLD


mousePressed: ->

  trails.push  if trails.length is MAX_TRAIL_POINTS
  then         trails.shift().setXY mouseX, mouseY
  else         new PointXY mouseX, mouseY

  do redraw


draw: ->

  background BG
  tt = trails[0]
  tt = t.lineXY tt  for t in trails
  return


class PointXY

  FG: 0xff0000FF; BOLD: 3

  constructor: (@x, @y) ->
  
  setXY:  (@x, @y) -> @
  lineXY: (other)  -> line other.x, other.y, @x, @y; @

iHatch

Using the first answer you provided I managed to manipulate the code into the version I need :)

This is what it looks like in Processing: boolean Active = true; void setup() { size(600,500); noLoop(); smooth(); background(0); stroke(255); strokeWeight(3);

    }

    void draw(){
      if (Active) {
          point(mouseX, mouseY);
          Active = false;
          return;
      }

      line(mouseX, mouseY, pmouseX, pmouseY);
      Active = true;
    }
      void mouseClicked() {
        redraw();
      }

GoToLoop

Oh, was my 1st example but w/o clearing the screen? #-o
Just commenting out background(BG); would be enough! :P

iHatch

Oh sorry I'm bad with this just started last week.

iHatch

Could I ask you one more thing and ask how to attach the function to a button?

By this I just mean, that the program will not start drawing lines until the button is clicked.

GoToLoop

You mean the mouse buttons or having a switch button on the screen?
If you wanna designate 1 mouse button w/ the task of allow/disallow drawings, take a look at mouseButton:

http://processing.org/reference/mouseButton.html

Declare a boolean to flag whether drawing is allowed. Use the separated mouse button to switch its state! *-:)

iHatch

I was talking about having a switch button on screen.

GoToLoop

That's a little more sophisticated. Take a look a these online examples below:

http://studio.processingtogether.com/sp/pad/export/ro.9ABG0RKl9D2Bx/latest
http://studio.processingtogether.com/sp/pad/export/ro.9eDRvB4LRmLrr/latest

Of course, for just 1 button, it's much easier than those 2 examples above.
Anyways, check for yourself how much you can understand those examples! 8-X

iHatch

Still struggling, could you take a look at this and explain how I get it to do what we talked about above after a mouse click(either button) is done inside the box labelled "Line" http://studio.sketchpad.cc/sp/pad/view/iW9NTv6GBM/latest

What I'm struggling to understand is why the program is attempting to draw a line before my mouse enters the "Line" area of the screen and why, regardless of what I do the program won't draw a line.

GoToLoop

Inside event callbacks like mousePressed(), keyReleased() and such, it's advisable to restrain on setting flag variables only.

I see that at the end of mousePressed() you attempt to draw. Even though it's perfectly possible, it's not the right place!
For example, I highly believe that inside events, mouseX & pmouseX got the same values, rendering the latter useless!

Another detail I've spotted is LinePressed is an int now.
Since it can only have 2 possible states, either draw point() or line(), it's more logical being a boolean instead iMO!