通过存储在数组中的点创建正方形，p5.js

Question

所以，在用户创建了一个正方形之后，我想在那个大正方形中创建小正方形，对于每一行，我都在运行设置一个循环，其中循环从点 0 开始一直持续到点 1，我现在面临的问题是，当循环从点 0 的 x 到点 x 创建正方形时第 1 点，我想在第 0 点的 y 和运行相同的循环中 +1，我对如何做到这一点感到困惑。可能嵌套 for 循环。谢谢。

function setup() {
  createCanvas(400, 400);
}

var pts = [];
var bts = [];
function mousePressed()
{
    if (pts.length == 4) {
        pts = [];
    }
    pts.push([mouseX, mouseY])
    if (bts.length == 4) {
        bts = [];
    }
    bts.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 (pts.length == 4) {
          // 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); 
      }

  if (pts.length==4)

  {  text("value of point 0 : "+pts[0][0],255,200);
    text("value of point 1 : "+pts[1][0],255,255);

      for (var j =1 ; j<=(pts[1][0]-pts[0][0]);j++)
           { 
      square((pts[0][0]+j), pts[0][1],1);


    }
   }
}

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

Answer 1

我使用了一个嵌套循环，并创建了另一个变量 (y)，它的 y 值为点 0，在父循环中，我在变量 (y) 中递增，在子循环中，我是运行 square 的循环，谢谢。


        function setup() {
      createCanvas(400, 400);
    }

    var pts = [];
    var bts = [];
    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 (pts.length == 4) {
              // 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); 
          }
      let c = color(255, 204, 0);
      fill(c);
      if (pts.length==4)

      {  
        for (var k = 0; k<=pts[3][1]-pts[0][1];k+=5)
             {
               if (k==pts[3][1]-pts[0][1])
               {
                 noLoop()
               }
             var y = pts[0][1]+k;
          for (var j =1 ; j<=(pts[1][0]-pts[0][0]);j+=5)
               { 

          square((pts[0][0]+j), y,4);
               }

        }
       }


    }

我觉得还有更有效的方法，如果知道请回答。

Answer 2

要定义一个矩形，画一条对角线就可以了。矩形的4个点，可以用对角线的2个点计算：

// rectangle points
let rpts = [pts[0], [pts[1][0], pts[0][1]], pts[1], [pts[0][0], pts[1][1]]]
// draw rectangle
for (var i=0; i < rpts.length; ++i) {
    line(rpts[i][0], rpts[i][1], rpts[(i+1) % rpts.length][0], rpts[(i+1) % rpts.length][1]);
}

必须在 2 个嵌套循环中绘制内部矩形。但是你必须计算最小和最大坐标。注意可能第一个点在右下角，第二个点在左上角：

let x0 = min(pts[0][0], pts[1][0]);
let x1 = max(pts[0][0], pts[1][0]);
let y0 = min(pts[0][1], pts[1][1]);
let y1 = max(pts[0][1], pts[1][1])  
for (var x = x0; x < x1; x += 5) {
    for (var y = y0; y < y1; y +=5) {
        square(x, y, 4);
    }
}

noLoop stops Processing from continuously executing the code within draw() and loop()重新开始连续执行。
绘制内部三角形时调用 noLoop，按下鼠标按钮时调用 loop()。

看例子：

function setup() {
    createCanvas(400, 400);
}

var pts = [];
var bts = [];
function mousePressed()
{
    if (pts.length == 2) {
        pts = [];
    }
    pts.push([mouseX, mouseY])
    loop()
}

function draw() {  
    background(220);

    if (pts.length == 2) {
        // rectangle points
        let rpts = [pts[0], [pts[1][0], pts[0][1]], pts[1], [pts[0][0], pts[1][1]]]
        // draw rectangle
        for (var i=0; i < rpts.length; ++i) {
            line(rpts[i][0], rpts[i][1], rpts[(i+1) % rpts.length][0], rpts[(i+1) % rpts.length][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); 
    }
      
    let c = color(255, 204, 0);
    fill(c);
    if (pts.length==2) { 
        let x0 = min(pts[0][0], pts[1][0]);
        let x1 = max(pts[0][0], pts[1][0]);
        let y0 = min(pts[0][1], pts[1][1]);
        let y1 = max(pts[0][1], pts[1][1])  
        for (var x = x0; x < x1; x += 5) {
            for (var y = y0; y < y1; y +=5) {
                square(x, y, 4);
            }
        }
        noLoop()
    }
}

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

通过存储在数组中的点创建正方形，p5.js

creating squares through points stored in an array, p5.js

javascript

processing

for-loop

p5.js