Javascript p5 无法在两点之间画线

Question

In javascript, using p5, I want to draw a line between two points, set by the mouse. I'm using an array to store the mouse positions, then draw the line. However, I get a weird output when I log the array in the console.

What would the " empty x 2 " mean? This is my code:

function mouseClicked(){
pointSize = slider.value();
stroke(color_picker.value());
strokeWeight(pointSize);
point(mouseX, mouseY);

if(selection === "line"){
   line_points.push(mouseX, mouseY);
   console.log(line_points);
   console.log(line_points.length);

    if(line_points.length = 4){
        line(line_points[0],line_points[1],line_points[2],line_points[3]);
        line_points = [];
    }
  }
}

Answer 1

The main issue in the code is the conditional

 if(line_points.length = 4)

should be

if(line_points.length ==== 4)

as we want to compare length to 4. The original code sets the length of the array to 4 which leaves the array with some empty positions, thus producing the empty slots message when the array is output to the console.

 function setup(){ const cnv = createCanvas(200, 200); } var line_points = []; function draw(){ } function mouseClicked(){ stroke(0); point(mouseX, mouseY); line_points.push(mouseX, mouseY); console.log(line_points); console.log(line_points.length); if(line_points.length === 4){ line(line_points[0],line_points[1],line_points[2],line_points[3]); line_points = []; } }

 <script src="https://cdnjs.cloudflare.com/ajax/libs/p5.js/0.8.0/p5.min.js"></script>