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

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/p5#1.3.1/lib/p5.js"></script>