在 p5.js 中通过行和用户输入创建 Square

Question

我正在 p5.js 中通过鼠标学习用户输入，我想通过 4 次不同的点击创建一个 4 行方格方法，每行点击 1 次，最后一次点击完成方格。下面的代码是 2 行，但它们都同时运行，我无法理解 if 命令分别运行它们。function setup() {    createCanvas(400, 400);    background(220);}function draw() {  }function mousePressed(){    line(width/20,height/40,mouseX,mouseY);    line(pmouseX,pmouseY,mouseX,mouseY);}<script src="https://cdnjs.cloudflare.com/ajax/libs/p5.js/0.9.0/p5.js"></script>

Answer 1

您必须将点存储到列表中。如果列表包含 4 个元素并且再次单击鼠标，则清除列表：

var pts = [];

function mousePressed()

{

    if (pts.length == 4) {

        pts = [];

    }

    pts.push([mouseX, mouseY])

}

连续做所有的绘图draw()。清除背景。在循环中绘制点之间的留置权。如果点数为 4，则从最后一个点到第一个点画一条线。

此外，如果列表中至少有 1 个点，您可以从最后一个点到当前鼠标位置绘制一条“橡皮”线：

function draw() {  

      background(220);

      // draw the lines between the points

      for (var i=0; i < pts.length-1; ++i) {

          line(pts[i][0], pts[i][1], pts[i+1][0], pts[i+1][1]);

      }

      var close = pts.length == 4;

      if (close) {

          // draw line from 1st point to at point

          line(pts[pts.length-1][0], pts[pts.length-1][1], pts[0][0], pts[0][1]); 

      }

      else if (pts.length > 0) {

          // draw a rubber line from last point to the mouse

          line(pts[pts.length-1][0], pts[pts.length-1][1], mouseX,mouseY); 

      }

}

看例子

function setup() {

  createCanvas(400, 400);

}

var pts = [];

function mousePressed()

{

    if (pts.length == 4) {

        pts = [];

    }

    pts.push([mouseX, mouseY])

}

function draw() {  

      background(220);

      // draw the lines between the points

      for (var i=0; i < pts.length-1; ++i) {

          line(pts[i][0], pts[i][1], pts[i+1][0], pts[i+1][1]);

      }

      var close = pts.length == 4;

      if (close) {

          // draw line from 1st point to at point

          line(pts[pts.length-1][0], pts[pts.length-1][1], pts[0][0], pts[0][1]); 

      }

      else if (pts.length > 0) {

          // draw a rubber line from last point to the mouse

          line(pts[pts.length-1][0], pts[pts.length-1][1], mouseX,mouseY); 

      }

}

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