Drawing straight lines like MS paint

Question

I am trying to draw straight lines (in processing 3.5.4) like it is done in MS Paint tool (select a point by clicking the left mouse button and drag the pointer before releasing it to get the straight line). I have tried using mousePressed() and mouseReleased() functions and it creates the straight line but it does not show the straight line in real-time when I drag it without releasing it, which is normal given I've not used draw() function in this case.

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

void mouseReleased() {
  line (x1, y1, mouseX, mouseY);
}

I have also tried to implement creating the line inside the draw() function so that I can get the real-time movement of the unreleased straight line but this also fails by drawing multiple straight lines.

void draw () {
  if(mousePressed) {
    line (x1, y1, mouseX, mouseY);
  }
}

I've marked (x1, y1) and (mouseX, mouseY) points as mouse's pressing and releasing points

And I am trying to achieve something like this (while dragging the mouse) on real-time.
I've marked the points for the understanding purpose

HINT: When you Draw, you need to erase the old line first and draw the next line. The easiest one is to use Exclusive OR to draw/erase until the mouseUp when you draw solid line. you must also draw/erase in the same order to make sure the draw is exactly over the old. when erasing. — Phillip Williams, Jan 28 '20 at 04:03
Thanks, but if I perform the draw-erase operation, it'll also erase anything under the dragging area of the mouse pointer (i.e if there's already something drawn under the straight line that I'm going to draw) which is not desirable. — Protik, Jan 28 '20 at 04:15
@Alvee: that's why you draw in XOR mode: it won't be quite as pretty while you drag, but you don't need to save what's already under it because drawing the same thing twice with XOR mode has the same effect as not drawing it at all. — Joachim Sauer, Jan 28 '20 at 13:42
@JoachimSauer I don't quite understand the XOR mode, I suppose it is not the simple draw-erase thing. Google showed me something which is of processing 1.x. Would you please explain it? (any links if possible) — Protik, Jan 28 '20 at 14:10
See related question with answer about XOR mode https://stackoverflow.com/questions/30661685/drawing-a-line-with-java-swing-draws-multiple-lines/30662014#30662014 — Phillip Williams, Jan 28 '20 at 16:03

Rabbid76 · Accepted Answer · 2020-01-28T13:39:33.973

If a line is not finished, then you have to draw a line from the start point to the current mouse position (mouseX, mouseY) in draw().

Use an ArrayList of PVector objects to store the points:

ArrayList<PVector> points = new ArrayList<PVector>();

Every time when the mouse button ius clicked, then add a point to the list:

void mousePressed() {

    points.add(new PVector(mouseX, mouseY));
}

Draw the lines between the points in a loop. If the number of points in the list is odd, then draw a line from the last point to the current mouse position:

for (int i = 0; i < points.size(); i += 2) {

    PVector p1 = points.get(i);
    boolean even = i+1 < points.size();
    PVector p2 = even ? points.get(i+1) : new PVector(mouseX, mouseY);

    line(p1.x, p1.y, p2.x, p2.y);
}

See the example:

ArrayList<PVector> points = new ArrayList<PVector>();

void setup() {

    size(500 , 500);
}

void mousePressed() {

    points.add(new PVector(mouseX, mouseY));
}

void draw() {

    background(0);
    stroke(255);

    for (int i = 0; i < points.size(); i += 2) {

        PVector p1 = points.get(i);
        boolean even = i+1 < points.size();
        PVector p2 = even ? points.get(i+1) : new PVector(mouseX, mouseY);

        line(p1.x, p1.y, p2.x, p2.y);
    }
}

If you want to start drawing a line, when the mouse is clicked, and finish it when the mouse is released, then you have to add the 2nd point on mouseReleased:

ArrayList<PVector> points = new ArrayList<PVector>();

void setup() {

    size(500 , 500);
}

void mousePressed() {

    points.add(new PVector(mouseX, mouseY));
}

void mouseReleased() {

    points.add(new PVector(mouseX, mouseY));
}

void draw() {

    background(0);
    stroke(255);

    for (int i = 0; i < points.size(); i += 2) {

        PVector p1 = points.get(i);
        boolean even = i+1 < points.size();
        PVector p2 = even ? points.get(i+1) : new PVector(mouseX, mouseY);

        line(p1.x, p1.y, p2.x, p2.y);
    }
}

Thanks but here the straight line is drawn with two mouse clicks, The one which I am trying to draw is with one click like the one in the MS Paint tool or this- [link](https://jspaint.app). When you release your mouse, this should be the end-point of the straight-line. — Protik, Jan 28 '20 at 13:33
Oh silly me. Thanks for your answer, the obvious logic missed my beginner eyes :) — Protik, Jan 28 '20 at 14:04

Drawing straight lines like MS paint

1 Answers1