Original Editor: https://editor.p5js.org/izzy_rieken/sketches/2POEqq91O
The Original Goal
I originally wanted the lines drawn from random point to random point on the edge to generate with each click of the mouse. However, on my first attempt, I could only get the lines to draw in completely random areas with random lengths. In other words they didn't reach from edge to edge.
Improvements
Within Class Line, I had already defined:
this.x = x;
this.y = y;
this.directionX = dx;
this.directionY = dy;
With these variables I could constrain the starting points of the lines to the x and y edges of the artboard. I started by defined the choice function to be random between 0 and 1, or otherwise choose whether the starting point would be on the x or the y edge. With the the choice function in the if statement:
// line starts on X axis
if (choice >= 0.5) {
startX = 0;
// the starting point is anywhere from point 0 to edge of canvas in the Y direction
startY = random (0,height);
startdx = 0;
// y direction is randomized
startdy = random (200);
}
// line starts on X axis
else {
// the starting point is anywhere from point 0 to edge of canvas in the X direction
startX = random (0,width);
startY = 0;
// x direction is randomized
startdx = random (50);
startdy = 0;
}
This if statement constrained the starting points, but I also wanted the end points to be constrained to the edges so that the lines drew all the way across the screens. So, I had to create two more variables (x1 and y1) to define the placements of the endpoints. I first defined the new variables alongside the original ones in mousepressed:
let startX = 0;
let startY = 0;
let startdx = 0;
let startdy = 0;
let startx1 = 0;
let starty1 = 0;
Then, in Class Line(), I added x1 and y1 to the constructor and changed the endpoints of the line from random(0,400) to this.x1 and this.y1.
class Line {
constructor(x,y,dx,dy,x1,y1) {
this.x = x;
this.y = y;
this.x1 = x1;
this.y1 = y1;
//this.c = c
this.directionX = dx;
this.directionY = dy;
}
display() {
randomColor = color(random(255), random(255), random(255));
stroke(color(randomColor));
line(this.x, this.y, this.x1, this.y1);
}