[1, 0, 1, 0, 1, 0, 1, 0, 1, 0],

  [0, 1, 0, 1, 0, 1, 0, 1, 0, 1],

  [1, 0, 1, 0, 1, 0, 1, 0, 1, 0],

  [0, 1, 0, 1, 0, 1, 0, 1, 0, 1],

  [1, 0, 1, 0, 1, 0, 1, 0, 1, 0],

  [0, 1, 0, 1, 0, 1, 0, 1, 0, 1],

  [1, 0, 1, 0, 1, 0, 1, 0, 1, 0],

  [0, 1, 0, 1, 0, 1, 0, 1, 0, 1],

  [1, 0, 1, 0, 1, 0, 1, 0, 1, 0],

  [0, 1, 0, 1, 0, 1, 0, 1, 0, 1]

];

​

let numThreads = 10; // Number of threads (10x10 grid)

let gridSize = 320; // Grid and woven pattern size (320x320)

let smallerGridSize = gridSize * 0.88; // Make the grid 5% smaller

let threadSpacing = gridSize / numThreads; // Space between threads (32x32 pixels per block)

let smallerThreadSpacing = smallerGridSize / numThreads; // Adjust the thread spacing for the smaller grid

let threadThickness = threadSpacing / 2; // Thickness of the threads (rectangle size)

let gapBetweenBlocks = threadSpacing / 2; // Gap between grid and woven block (half of a block, 16 pixels)

​

function setup() {

​

  createCanvas(656, 320); // Adjust the canvas size

  noLoop();

}

​

function draw() {

  background(255);

​

  // Draw the clickable pattern grid on the left, making it 5% smaller

  drawPatternGrid();

​

  // Draw the woven pattern on the right

  drawWovenPattern();

}

​

// Function to draw the clickable grid pattern (left)

function drawPatternGrid() {

  let offsetX = (gridSize - smallerGridSize) / 2; // Offset to center the smaller grid

​

  for (let y = 0; y < numThreads; y++) {

    for (let x = 0; x < numThreads; x++) {

      let patternValue = weavePattern[y][x];

      // Draw the smaller grid

      fill(255); // White background

      noStroke(); // No border

      rect(x * smallerThreadSpacing + offsetX, y * smallerThreadSpacing + offsetX, smallerThreadSpacing, smallerThreadSpacing);

​

      // Draw a black square in the middle if pattern value is 1

      if (patternValue === 1) {

        fill(0); // Black for 1

        rect(x * smallerThreadSpacing + offsetX, y * smallerThreadSpacing + offsetX, smallerThreadSpacing, smallerThreadSpacing);

      }

    }

  }

}

​

// Function to draw the woven pattern (right)

function drawWovenPattern() {

  let offsetX = gridSize + gapBetweenBlocks; // Add the gap between the grid and woven pattern

  for (let y = 0; y < numThreads; y++) {

    for (let x = 0; x < numThreads; x++) {

      // Get the pattern value (1 for over, 0 for under)

      let patternValue = weavePattern[y][x];

​

      // Determine what to draw first based on the pattern value

      if (patternValue === 1) {

        // Draw weft (horizontal) first, warp (vertical) on top

        drawWeft(x, y, threadSpacing, threadThickness, offsetX);

        drawWarp(x, y, threadSpacing, threadThickness, offsetX);

      } else {

        // Draw warp (vertical) first, weft (horizontal) on top

        drawWarp(x, y, threadSpacing, threadThickness, offsetX);

        drawWeft(x, y, threadSpacing, threadThickness, offsetX);

      }

    }

  }

}

​

// Function to draw the warp (vertical thread)

function drawWarp(x, y, threadSpacing, threadThickness, offsetX) {

  fill(0); // Black warp

  noStroke();

  rect(x * threadSpacing + threadSpacing / 2 - threadThickness / 2 + offsetX, y * threadSpacing, threadThickness, threadSpacing);

}

​

// Function to draw the weft (horizontal thread with only top and bottom black border)

function drawWeft(x, y, threadSpacing, threadThickness, offsetX) {

  fill(255); // White weft

  noStroke();

  rect(x * threadSpacing + offsetX, y * threadSpacing + threadSpacing / 2 - threadThickness / 2, threadSpacing, threadThickness);

​

  // Draw the black lines only on the top and bottom of the horizontal weft

  stroke(0); // Black border

  strokeWeight(2); // Thin border

  line(x * threadSpacing + offsetX, y * threadSpacing + threadSpacing / 2 - threadThickness / 2, x * threadSpacing + threadSpacing + offsetX, y * threadSpacing + threadSpacing / 2 - threadThickness / 2); // Top line

  line(x * threadSpacing + offsetX, y * threadSpacing + threadSpacing / 2 + threadThickness / 2, x * threadSpacing + threadSpacing + offsetX, y * threadSpacing + threadSpacing / 2 + threadThickness / 2); // Bottom line

}

​

// Function to handle mouse clicks and toggle the array value

function mousePressed() {

  let offsetX = (gridSize - smallerGridSize) / 2; // Adjust for the smaller grid's center

  let x = floor((mouseX - offsetX) / smallerThreadSpacing);

  let y = floor((mouseY - offsetX) / smallerThreadSpacing);

​

  // Check if the click is within the bounds of the smaller grid (left side)

  if (x >= 0 && x < numThreads && y >= 0 && y < numThreads) {

    // Flip the value in the weavePattern array

    weavePattern[y][x] = 1 - weavePattern[y][x]; // Flip 0 to 1 and 1 to 0

​

    // Redraw the grid and woven pattern after the change

    redraw();

  }

}

​

function mouseMoved() {

  let offsetX = (gridSize - smallerGridSize) / 2; // Adjust for the smaller grid's center

  let x = floor((mouseX - offsetX) / smallerThreadSpacing);

  let y = floor((mouseY - offsetX) / smallerThreadSpacing);

​

  // If the mouse is over the grid, show a hand cursor

  if (x >= 0 && x < numThreads && y >= 0 && y < numThreads) {

    cursor(HAND);

  } else {

    cursor(ARROW);

  }

}

​