CODEWITHSUNDEEP
javaprocessing
Protik
Protik

Reputation: 53

Drawing straight lines like MS paint

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

Upvotes: 1

Views: 1247

Answers (1)

Rabbid76
Rabbid76

Reputation: 210880

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);
    }
}

Upvotes: 2

Related Questions