Question

因此，在用户创建一个正方形之后，我想在那个大正方形内创建一个小正方形，对于每一行，我正在运行一个循环，其中循环从点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])
    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）内递增，在子循环中，我正在运行平方运算，谢谢。


        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停止继续执行draw()中的代码的处理，而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中的点创建正方形

2 个答案: