通过线条和 p5.js 中的用户输入创建一个正方形

Question

我正在学习通过鼠标在 p5.js 中进行用户输入，我想通过 4 条线的方法通过 4 次不同的点击创建一个正方形，每条线点击 1 次，最后一次点击完成正方形。下面的代码适用于 2 行，但它们同时运行ning，我无法理解单独运行它们的 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 个点，您可以从最后一个点到当前鼠标位置画一条 "rubber" 线：

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>

通过线条和 p5.js 中的用户输入创建一个正方形

Creating a Square by lines and through user input in p5.js

javascript

processing

drawing

draw

p5.js