CODEWITHSUNDEEP
javascriptfor-loopprocessingp5.js
SilentHG
SilentHG

Reputation: 109

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

So, after the user has created a square, i want to create small squares within that big square, for every line, i am running a loop where loop starts at point 0 and goes till point 1 , The problem i am facing right now is that, when the loop has created square from x of point 0 to x of point 1, i want to +1 in y of point 0 and run the same loop, i am confused on how to do that. maybe nested for loop. Thank you.

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>

Upvotes: 1

Views: 769

Answers (2)

Rabbid76
Rabbid76

Reputation: 210889

To define a rectangle, it is sufficient to draw a diagonal line. The 4 points of the rectangle, can be calculated by the 2 points of the diagonale:

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

The inner rectangles have to be draw in 2 nested loops. But you've to calculate the minimum and maximum coordinates. Note possibly the first point is somewhere at the bottom right and the 2nd point is at the top left:

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() restart the continuously executing.
Call noLoop when the inner triangles are draw and call loop() when a mouse button is pressed.

See the example:

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>

Upvotes: 1

SilentHG
SilentHG

Reputation: 109

i used a nested loop, and created another variable (y) which had value of y of point 0 and in parent loop i was increment-ing inside the variable (y) and in child loop i was running the loop for square, Thank you.


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

        }
       }


    }

I think there are more efficient methods, please answer, if you know.

Upvotes: 1

Related Questions