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

所以，在用户创建了一个正方形之后，我想在这个大正方形中创建一个小正方形， 对于每一条线，我都在运行一个循环，循环从点0开始一直到点1，我现在面临的问题是，当循环创建了从点0的x到点1的x的平方时，我想在点0的y中+1并运行同一个循环，我不知道怎么做。可能是嵌套循环。 多谢各位

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

        }
       }


    }

函数设置（）{
createCanvas（400400）；
}
var-pts=[]；
var bts=[]；
函数mousePressed（）
{
如果（pts.length==4）{
临时秘书处=[]；
}
点推（[mouseX，mouseY]）
如果（bts.length==4）{
基站=[]；
}
基站推送（[mouseX，mouseY]）
}
函数draw（）{
背景（220）；
//在点之间画线
对于（变量i=0；i0）{
//从最后一点到鼠标绘制一条橡皮线
行（分[pts.length-1][0]，分[pts.length-1][1]，鼠标，鼠标）；
}
如果（pts.长度==4）
{文本（“第0点的值：”+pts[0][0]，255200）；
文本（“第1点的值：+pts[1][0]，255255）；
对于（var j=1；j我使用了一个嵌套的循环，并创建了另一个变量（y），该变量的值为点0，在父循环中，我在变量（y）内递增，在子循环中，我在为平方运行循环，谢谢


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

        }
       }


    }



函数设置（）{
createCanvas（400400）；
}
var-pts=[]；
var bts=[]；
函数mousePressed（）
{
如果（pts.length==4）{
临时秘书处=[]；
}
点推（[mouseX，mouseY]）
}
函数draw（）{
背景（220）；
//在点之间画线
对于（变量i=0；i0）{
//从最后一点到鼠标绘制一条橡皮线
行（分[pts.length-1][0]，分[pts.length-1][1]，鼠标，鼠标）；
}
设c=颜色（255，204，0）；
填充（c）；
如果（pts.长度==4）
{  
对于（var k=0；k定义一个矩形，只要画一条对角线就足够了。矩形的4个点可以通过对角线的2个点来计算：

//矩形点
设rpts=[pts[0]、[pts[1][0]、pts[0][1]、pts[1]、[pts[0][0]、pts[1][1]]
//画矩形
对于（变量i=0；i

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

设x0=min（分[0][0]，分[1][0]）；
设x1=max（pts[0][0]，pts[1][0]）；
设y0=min（pts[0][1]，pts[1][1]）；
设y1=max（分[0][1]，分[1][1]）
对于（变量x=x0；x

停止在
draw（）中连续执行代码的处理，并重新开始连续执行。

绘制内部三角形时调用
noLoop
，按下鼠标按钮时调用
loop（）

请参见示例：


函数设置（）{
createCanvas（400400）；
}
var-pts=[]；
var bts=[]；
函数mousePressed（）
{
如果（pts.length==2）{
临时秘书处=[]；
}
点推（[mouseX，mouseY]）
循环（）
}
函数draw（）{
背景（220）；
如果（pts.length==2）{
//矩形点
设rpts=[pts[0]、[pts[1][0]、pts[0][1]、pts[1]、[pts[0][0]、pts[1][1]]
//画矩形
对于（变量i=0；i0）{
//从最后一点到鼠标绘制一条橡皮线
行（分[pts.length-1][0]，分[pts.length-1][1]，鼠标，鼠标）；
}
设c=颜色（255，204，0）；
填充（c）；
如果（pts.length==2）{
设x0=min（pts[0][0]，pts[1][0]）；
设x1=max（pts[0][0]，pts[1][0]）；
设y0=min（pts[0][1]，pts[1][1]）；
设y1=max（分[0][1]，分[1][1]）
对于（变量x=x0；x

谢谢你的回答，我发现在创建内部方块时cpu被占用了，这就是我试图使用noLoop（）的原因，有没有办法停止这种利用。@SilentHG哦，我明白了。在这种情况下，
noLoop（）
是正确的选择。但是你必须添加到
鼠标按下的
。我在答案中改变了这一点。在完成我的项目之前，我还有一个步骤，我的最后一个步骤是在鼠标悬停在小方块上时更改它们的颜色（通过mousemove功能可以吗）或者我应该先创建一个大正方形，当鼠标悬停在里面时，它会在那个地方创建一个正方形，我正在尝试进行鼠标检测（类似的事情）。@silentg“当鼠标悬停在它们上面时”-在这种情况下，您必须连续重新绘制场景。这意味着您必须删除
noLoop
和
loop
。您必须测试
是否（mouseX>=x&&mosueX