Rects Loop 2D SVG

let w = 50;

let h = 50;

let g = 75;

​

function setup() {

  // Add custom library in the sidebar

  // https://unpkg.com/p5.js-svg@1.1.1

  createCanvas(559, 397, SVG); // A6 148x105mm

  background(255);

  rectMode(CENTER);

  // only one frame drawing (no repeating loop)

  noLoop();

}

​

function draw() {

  //background(255);

  clear(); // transparent background -> no background rectangle in svg

​

  //g = map (mouseX, 0, width, 25, 200);

​

  translate(50, 50);

  for (let y = 0; y < 5; y++) { // 8 rows

    for (let x = 0; x < 7; x++) { // 11 columns

      push();

      let a = map(x, 0, 11, 0, PI); // calculate angle

      translate(x * g, y * g); // translate by xy position plus gridsize g

      rotate(a);

      rect(0, 0, w, h); // set rect with width height

      pop();

    }

  }

​

  // save at the end of drawing the frame (only with noLoop)

  //save("mySVG.svg");

}

​

// save after pressing the mouse

function mousePressed() {

  save("mySVG.svg");

}