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