// Telaio a quattro licci. L'armatura decide quale filo passa sopra:
// cambiando la sequenza cambia il tessuto, esattamente come al telaio vero.

function tessuto(fili = 48, passate = 48, armatura = [0, 1, 2, 3], cell = 10) {
  const ordito = ["#2d2a32", "#6b4f3a", "#2d2a32", "#b8a58c"];
  const trama  = ["#d9cdb6", "#c2452d", "#d9cdb6", "#2f5d62"];
  let out = "";

  for (let y = 0; y < passate; y++) {
    const liccio = armatura[y % armatura.length];
    for (let x = 0; x < fili; x++) {
      // il filo dell'ordito sale se appartiene al liccio alzato in questa passata
      const sopra = (x % 4) === liccio;
      const colore = sopra ? ordito[x % 4] : trama[y % 4];
      out += `<rect x="${x * cell}" y="${y * cell}" width="${cell}" height="${cell}" fill="${colore}"/>`;
      // il piccolo rilievo che rende il tessuto leggibile come tessuto
      out += `<rect x="${x * cell}" y="${y * cell}" width="${cell}" height="${cell}"
               fill="${sopra ? '#fff' : '#000'}" opacity="0.07"/>`;
    }
  }
  return `<svg xmlns="http://www.w3.org/2000/svg" width="${fili * cell}" height="${passate * cell}">${out}</svg>`;
}

// tessuto(48, 48, [0,1,2,3])  -> saia regolare
// tessuto(48, 48, [0,2,1,3])  -> spina di pesce
// tessuto(48, 48, [0,0,2,2])  -> fascia doppia