Square Frame String Art: Cartesian Grid Algorithms

Most digital string art generators are configured for circular boards because polar coordinates (where nails are spaced at equal angle increments around a center) make chord calculations symmetrical. However, winding thread art on a square frame offers a modern, structural look. To make this work, the software must translate its polar math into Cartesian coordinate grids.

1. Cartesian Nail Layout Equations

On a circular board, nail position is calculated using: x = center + R * cos(theta), y = center + R * sin(theta). On a square frame, we place nails at linear offsets along the perimeter. For a board of width W and height H, nails are indexed sequentially starting from the top-left corner, tracing the top, right, bottom, and left borders.

If we have 256 nails on a square board, we allocate 64 nails per side. The coordinates are calculated linearly along each border plane:

• Top Border (Nails 0-63): x = (i / 64) * W, y = 0
• Right Border (Nails 64-127): x = W, y = ((i - 64) / 64) * H
• Bottom Border (Nails 128-191): x = W - ((i - 128) / 64) * W, y = H
• Left Border (Nails 192-255): x = 0, y = H - ((i - 192) / 64) * H

2. Path Optimizations for Rectangular Boundaries

In circular layouts, every nail is equidistant from the center, meaning the available chord lengths are uniform. In square frames, the diagonal chords are much longer than the parallel vertical/horizontal chords.

Because diagonal lines cover more pixel distance, a basic greedy algorithm will favor diagonals because they naturally cross more dark pixels, leading to a distorted center highlight. Stringify corrects this by normalizing the score against the chord length, dividing the pixel density sum by the physical length of the line: Score_normalized = PixelSum / Distance.

3. Javascript Cartesian Nail Generator

Here is the math translated into a JavaScript function to generate Cartesian coordinate buffers for a square frame layout:

// Generate nail coordinates for a square board frame
function getSquareNailCoords(width, height, nailsPerSide) {
  const coords = [];
  const totalNails = nailsPerSide * 4;
  
  for (let i = 0; i < totalNails; i++) {
    let x, y;
    if (i < nailsPerSide) {
      // Top wall
      x = (i / nailsPerSide) * width;
      y = 0;
    } else if (i < nailsPerSide * 2) {
      // Right wall
      x = width;
      y = ((i - nailsPerSide) / nailsPerSide) * height;
    } else if (i < nailsPerSide * 3) {
      // Bottom wall
      x = width - ((i - nailsPerSide * 2) / nailsPerSide) * width;
      y = height;
    } else {
      // Left wall
      x = 0;
      y = height - ((i - nailsPerSide * 3) / nailsPerSide) * height;
    }
    coords.push({ x, y, index: i });
  }
  return coords;
}