• isabellerieken

Production: Laser Light Show

Updated: Jan 17

Original Editor: https://editor.p5js.org/izzy_rieken/sketches/2POEqq91O

New Editor: https://editor.p5js.org/izzy_rieken/sketches/K2L01Qmlq

New Present: https://editor.p5js.org/izzy_rieken/present/K2L01Qmlq


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

}