Duplicate square / angular spiral with nested for loops in p5.js?

Question

I am trying to make a grid out of angular spirals. The spiral itself is composed of single lines within a for loop. When I duplicate and shift (translate) the origin of the spiral along one axis (x OR y) it works. But shifting along both (x AND y), in order to make it a grid, it does not work out without decomposing the spiral.

I would really appreciate if anyone could help me with my coding puzzle. By the way I'm very open-minded for any tips and help improving my code writing skills. There surely is a lot of redundancy and long-winded expressions in there... This is my code so far:

function drawSpiral() {
  let count = 8;
  let stepX = 8;
  let stepY = 8;
  let tileSize = 100;
  let pixelX = tileSize;
  let pixelY = tileSize;
  for (let j = 0; j < 5; j++) {
    let x1 = 0;
    let y1 = 0;
    let x2 = 0;
    let y2 = 0;
    let x3 = 0;
    let y3 = 0;
    let x4 = 0;
    let y4 = 0;
    for (let i = 0; i < count; i++) {
      x1 += stepX;
      x2 -= stepX;
      x3 -= stepX;
      x4 += stepX;
      y1 += stepY;
      y2 += stepY;
      y3 -= stepY;
      y4 -= stepY;
      push();
      translate(pixelX, pixelY);
      line(x1, y1, x2 - stepX, y2)
      line(x2 - stepX, y2, x3 - stepX, y3 - stepY);
      line(x3 - stepX, y3 - stepY, x4 + stepX, y4 - stepY);
      line(x4 + stepX, y4 - stepY, x1 + stepX, y1 + stepY);
      pop();
      
    }
    pixelX += tileSize * 2; //shifting either along x-axis
  }
}

What a beauty, huh? Yeah you're guessing right – I'm new to the coding business ;)

Answer 1

If you're trying to make a grid of spirals it looks like you just need to use a pair of for loops where you currently have for (let j = 0; j < 5; j++) {. Pretty much any time you want to create a grid you're going to want a pair of nested for loops.

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

function draw() {
  background(100);
  drawSpiral();
}

function drawSpiral() {
  let count = 8;
  let stepX = 8;
  let stepY = 8;
  let tileSize = 100;
  let pixelX = tileSize;
  let pixelY = tileSize;
  // Make a 5x5 grid of spirals
  for (let row = 0; row < 5; row++) {
    for (let col = 0; col < 5; col++) {
      let x1 = 0;
      let y1 = 0;
      let x2 = 0;
      let y2 = 0;
      let x3 = 0;
      let y3 = 0;
      let x4 = 0;
      let y4 = 0;
      for (let i = 0; i < count; i++) {
        x1 += stepX;
        x2 -= stepX;
        x3 -= stepX;
        x4 += stepX;
        y1 += stepY;
        y2 += stepY;
        y3 -= stepY;
        y4 -= stepY;
        push();
        translate(pixelX, pixelY);
        line(x1, y1, x2 - stepX, y2)
        line(x2 - stepX, y2, x3 - stepX, y3 - stepY);
        line(x3 - stepX, y3 - stepY, x4 + stepX, y4 - stepY);
        line(x4 + stepX, y4 - stepY, x1 + stepX, y1 + stepY);
        pop();

      }
      // Sift right for each col
      pixelX += tileSize * 2;
    }
    // Shift down for each row
    pixelY += tileSize * 2;
    // And reset the horizontal position at the end of each row
    pixelX = tileSize;
  }
}

<script src="https://cdn.jsdelivr.net/npm/[email protected]/lib/p5.js"></script>