Hitomezashi_stitchPattern

[svan]

This Processing demo was inspired by the following video: https://www.youtube.com/watch?v=JbfhzlMk2eY . It uses two line grids, one for the horizontal stitches and one for the vertical stitches. XOffset is the distance that the first horizontal stitch in each row is offset and yOffset is the distance that the first vertical stitch in each column is offset; both are set based on respective array values. Note that the vertical stitch array (cols) is twice the size of the horizontal stitch array (rows) since there are two ends to each horizontal stitch. Conversely, the number of vertical stitches in each column is one half the number of rows since each vertical stitch connects two horizontal stitches and there is a skip between each two rows connected.

java version:

final int _horzRows = 17;
final int _horzCols = 17;
final int _vertRows = 8;
final int _vertCols = 34;

int rows[] = {1, 0, 1, 0, 0, 0, 1, 1, 0, 1, 0, 1, 1, 0, 0, 1, 0};
int cols[] = {1, 1, 0, 1, 1, 1, 0, 0, 1, 1, 1, 0, 1, 1, 1, 0, 1, 0, 0, 0, 1, 1, 0, 0, 1, 0, 0, 0, 1, 1, 1, 1, 0, 0};

int x = 0;
int y = 0;
int xOffset = 0;
int yOffset = 0;

void stitchGrid(int l, int t, int stitchLength) {
  // Horizontal stitches
  for (int j = 0; j < _horzCols; j++) {
    for (int k = 0; k < _horzRows; k++) {
      x = l + j*(stitchLength*2); // stitch + skip
      y = t + k*(stitchLength);
      if (rows[k] == 1) {
        xOffset = stitchLength;
      } else {
        xOffset = 0;
      }
      line(x+xOffset, y, x+xOffset + stitchLength, y);
    }
  }
  // Vertical stitches
  for (int m = 0; m < _vertCols; m++) {
    for (int n = 0; n < _vertRows; n++) {
      x = l + m*(stitchLength);
      y = t + n*(stitchLength*2); // stitch + skip
      if (cols[m] == 1) {
        yOffset = stitchLength;
      } else {
        yOffset = 0;
      }
      line(x, y+yOffset, x, y+yOffset + stitchLength);
    }
  }
}

void setup() { 
  size(920, 480);
  background(255);
  strokeWeight(2);
  stitchGrid(30, 40, 25);
}

void draw() {
}

p5.js version:

let _horzRows = 17;
let _horzCols = 17;
let _vertRows = 8;
let _vertCols = 34;

let rows = [1, 0, 1, 0, 0, 0, 1, 1, 0, 1, 0, 1, 1, 0, 0, 1, 0];
let cols = [1, 1, 0, 1, 1, 1, 0, 0, 1, 1, 1, 0, 1, 1, 1, 0, 1, 0, 0, 0, 1, 1, 0, 0, 1, 0, 0, 0, 1, 1, 1, 1, 0, 0];

var x = 0;
var y = 0;
var xOffset = 0;
var yOffset = 0;

function stitchGrid(l, t, stitchLength) {
  // Horizontal stitches
  for (let j = 0; j < _horzCols; j++) {
    for (let k = 0; k < _horzRows; k++) {
      x = l + j*(stitchLength*2); // stitch + skip
      y = t + k*(stitchLength);
      if (rows[k] == 1) {
        xOffset = stitchLength;
      } else {
        xOffset = 0;
      }
      line(x+xOffset, y, x+xOffset + stitchLength, y);
    }
  }
  // Vertical stitches
  for (let m = 0; m < _vertCols; m++) {
    for (let n = 0; n < _vertRows; n++) {
      x = l + m*(stitchLength);
      y = t + n*(stitchLength*2); // stitch + skip
      if (cols[m] == 1) {
        yOffset = stitchLength;
      } else {
        yOffset = 0;
      }
      line(x, y+yOffset, x, y+yOffset + stitchLength);
    }
  }
}

function setup() { 
  createCanvas(920, 480);
  background(255);
  strokeWeight(2);
  stitchGrid(30, 40, 25);
}

function draw() {
}

Output looks like this: