CODEWITHSUNDEEP
javascriptprocessingp5.js
Emanuele Saladini
Emanuele Saladini

Reputation: 33

Drawing a smooth line in p5js

I have a function that I created which draws a line from the coordinates of its first argument to the coordinates of the second argument. The code runs the function using the mouse coordinates as the argument for the function. However, I am having an issue where moving the mouse cursor vertically will cause the line to be uneven.

let circles = [];

function setup() {
  createCanvas(600, 600);
}

function draw() {
  lineCreate([pmouseX,pmouseY],[mouseX,mouseY])
  
}

function lineCreate(point1, point2) {
  length = sqrt(pow(point2[0]-point1[0],2) + pow(point2[1]-point1[1],2))
  slope = (point2[1]-point1[1])/(point2[0]-point1[0])
  x = min(point1[0],point2[0])
  endX = max(point1[0],point2[0])
  for (let i = x; i < endX; i++) {
    pointSlope = slope*(i - point1[0]) + point1[1]
    circle(i,pointSlope,2,2)
  }
}

Upvotes: 2

Views: 953

Answers (1)

Rabbid76
Rabbid76

Reputation: 210946

You need to connect the dots with lines:

function setup() {
    createCanvas(600, 600);
    strokeWeight(4);
    noFill();
    rect(2, 2, 596, 596);
}

function draw() {
    line(pmouseX, pmouseY, mouseX,mouseY)
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/p5.js/1.4.0/p5.min.js"></script>

If you want to draw the line with individual points, you need to distinguish whether the distance between the points is larger along the x-axis or the y-axis:

function setup() {
    createCanvas(600, 600);
    strokeWeight(4);
    noFill();
    rect(2, 2, 596, 596);
    fill(0);
}

function draw() {
    lineCreate([pmouseX,pmouseY], [mouseX,mouseY])  
}

function lineCreate(point1, point2) {
    x0 = point1[0];
    x1 = point2[0];
    y0 = point1[1];
    y1 = point2[1];
    if (abs(x1 - x0) > abs(y1 - y0)) {
        if (x0 > x1) {
            let t = x0; x0 = x1; x1 = t;
            t = y0; y0 = y1; y1 = t;
        }
        for (let x = x0; x <= x1; x++) {
            let y = y0 + (y1-y0) * (x-x0) / (x1-x0);
            circle(x, y, 2);
        }
    } else {
        if (y0 > y1) {
            let t = x0; x0 = x1; x1 = t;
            t = y0; y0 = y1; y1 = t;
        }
        for (let y = y0; y <= y1; y++) {
            let x = x0 + (x1-x0) * (y-y0) / (y1-y0);
            circle(x, y, 2);
        }
    }
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/p5.js/1.4.0/p5.min.js"></script>

Upvotes: 2

Related Questions