p5.js Web Editor

xxxxxxxxxx
const SEED = 0;
const CanvasSize = [400, 400];
​
function GridDefinition(nbRows, nbCols) {
  //let obj = {};
  this.NbRows = nbRows;
  this.NbCols = nbCols;
  this.CellWidth = CanvasSize[0] / nbCols;
  this.CellHeight = CanvasSize[1] / nbRows;
  this.GetCellOrigin = function (idRow, idCol) {
    return [
      (idCol * CanvasSize[0]) / this.NbCols,
      (idRow * CanvasSize[1]) / this.NbRows,
    ];
    //return [idRow * Ca, idCol]
  };
}
​
const DrawSettings = {
  Squigly: true,
};
​
const Drawer = {
  DrawSettings: DrawSettings,
  Grid: new GridDefinition(4, 2),
};
​
Drawer.IsDrawSquigly = function () {
  return this.DrawSettings.Squigly;
};
​
let GRID = Drawer.Grid;
​
function setup() {
  createCanvas(CanvasSize[0], CanvasSize[1]);
}
​
// PRIMITIVE LINES
Drawer.DrawHorizontalLine = function (cellPosX, cellPosY) {
  let cellOrigin = this.Grid.GetCellOrigin(cellPosX, cellPosY);
​
  if (this.IsDrawSquigly()) {
    beginShape();
    curveVertex(cellOrigin[0], cellOrigin[1] + this.Grid.CellHeight / 2);
    curveVertex(cellOrigin[0], cellOrigin[1] + this.Grid.CellHeight / 2);
​
    if (cellPosY % 2 == 0) {
      curveVertex(
        cellOrigin[0] + this.Grid.CellWidth / 2,
        cellOrigin[1] + (3 * this.Grid.CellHeight) / 8
      );
    } else {
      curveVertex(
        cellOrigin[0] + this.Grid.CellWidth / 2,
        cellOrigin[1] + (5 * this.Grid.CellHeight) / 8
      );
    }
    curveVertex(
      cellOrigin[0] + this.Grid.CellWidth,
      cellOrigin[1] + this.Grid.CellHeight / 2
    );
    curveVertex(
      cellOrigin[0] + this.Grid.CellWidth,
      cellOrigin[1] + this.Grid.CellHeight / 2
    );
    endShape();
  } else {
    line(
      cellOrigin[0],
      cellOrigin[1] + this.Grid.CellHeight / 2,
      cellOrigin[0] + this.Grid.CellWidth,
      cellOrigin[1] + this.Grid.CellHeight / 2
    );
  }
};
​
Drawer.DrawVerticalLine = function (cellPosX, cellPosY) {
  let cellOrigin = this.Grid.GetCellOrigin(cellPosX, cellPosY);
​
  if (this.IsDrawSquigly()) {
    beginShape();
    curveVertex(cellOrigin[0] + this.Grid.CellWidth / 2, cellOrigin[1]);
    curveVertex(cellOrigin[0] + this.Grid.CellWidth / 2, cellOrigin[1]);
​
    if (cellPosX % 2 == 0) {
      curveVertex(
        cellOrigin[0] + (3 * this.Grid.CellWidth) / 8,
        cellOrigin[1] + this.Grid.CellHeight / 2
      );
    } else {
      curveVertex(
        cellOrigin[0] + (5 * this.Grid.CellWidth) / 8,
        cellOrigin[1] + this.Grid.CellHeight / 2
      );
    }
    curveVertex(
      cellOrigin[0] + this.Grid.CellWidth / 2,
      cellOrigin[1] + this.Grid.CellHeight
    );
    curveVertex(
      cellOrigin[0] + this.Grid.CellWidth / 2,
      cellOrigin[1] + this.Grid.CellHeight
    );
    endShape();
  } else {
    line(
      cellOrigin[0] + this.Grid.CellWidth / 2,
      cellOrigin[1],
      cellOrigin[0] + this.Grid.CellWidth / 2,
      cellOrigin[1] + this.Grid.CellHeight
    );
  }
};
​
Drawer.DrawDiagonalLine = function (cellPosX, cellPosY, fromOrigin = true) {
  let cellOrigin = this.Grid.GetCellOrigin(cellPosX, cellPosY);
  if (fromOrigin) {
    line(
      cellOrigin[0],
      cellOrigin[1],
      cellOrigin[0] + this.Grid.CellWidth,
      cellOrigin[1] + this.Grid.CellHeight
    );
  } else {
    line(
      cellOrigin[0],
      cellOrigin[1] + this.Grid.CellHeight,
      cellOrigin[0] + this.Grid.CellWidth,
      cellOrigin[1]
    );
  }
};
​
Drawer.DrawLineHalfLength = function (cellPosX, cellPosY, rotation = 0) {
  let cellOrigin = this.Grid.GetCellOrigin(cellPosX, cellPosY);
  if (rotation == 0) {
    line(
      cellOrigin[0],
      cellOrigin[1] + this.Grid.CellHeight / 2,
      cellOrigin[0] + this.Grid.CellWidth / 2,
      cellOrigin[1] + this.Grid.CellHeight / 2
    );
  } else if (rotation == 1) {
    line(
      cellOrigin[0] + this.Grid.CellWidth / 2,
      cellOrigin[1] + this.Grid.CellHeight / 2,
      cellOrigin[0] + this.Grid.CellWidth / 2,
      cellOrigin[1]
    );
  } else if (rotation == 2) {
    line(
      cellOrigin[0] + this.Grid.CellWidth,
      cellOrigin[1] + this.Grid.CellHeight / 2,
      cellOrigin[0] + this.Grid.CellWidth / 2,
      cellOrigin[1] + this.Grid.CellHeight / 2
    );
  } else {
    line(
      cellOrigin[0] + this.Grid.CellWidth / 2,
      cellOrigin[1] + this.Grid.CellHeight / 2,
      cellOrigin[0] + this.Grid.CellWidth / 2,
      cellOrigin[1] + this.Grid.CellHeight
    );
  }
};
​
// COMPLEX
Drawer.DrawDiagonalLineSides = function (cellPosX, cellPosY, rotation = 0) {
  let cellOrigin = this.Grid.GetCellOrigin(cellPosX, cellPosY);
  if (rotation == 0) {
    line(
      cellOrigin[0],
      cellOrigin[1] + this.Grid.CellHeight / 2,
      cellOrigin[0] + this.Grid.CellWidth / 2,
      cellOrigin[1]
    );
  } else if (rotation == 1) {
    line(
      cellOrigin[0] + this.Grid.CellWidth / 2,
      cellOrigin[1],
      cellOrigin[0] + this.Grid.CellWidth,
      cellOrigin[1] + this.Grid.CellHeight / 2
    );
  } else if (rotation == 2) {
    line(
      cellOrigin[0] + this.Grid.CellWidth / 2,
      cellOrigin[1] + this.Grid.CellHeight,
      cellOrigin[0] + this.Grid.CellWidth,
      cellOrigin[1] + this.Grid.CellHeight / 2
    );
  } else {
    line(
      cellOrigin[0],
      cellOrigin[1] + this.Grid.CellHeight / 2,
      cellOrigin[0] + this.Grid.CellWidth / 2,
      cellOrigin[1] + this.Grid.CellHeight
    );
  }
};
​
Drawer.DrawCorner = function (cellPosX, cellPosY, rotation = 0) {
  if (this.IsDrawSquigly()) {
    let cellOrigin = this.Grid.GetCellOrigin(cellPosX, cellPosY);
    if (rotation == 0) {
      beginShape();
      curveVertex(cellOrigin[0], cellOrigin[1] + this.Grid.CellHeight / 2);
      curveVertex(cellOrigin[0], cellOrigin[1] + this.Grid.CellHeight / 2);
​
      curveVertex(
        cellOrigin[0] + (3 * this.Grid.CellWidth) / 16,
        cellOrigin[1] + (this.Grid.CellHeight * 4) / 8
      );
      curveVertex(
        cellOrigin[0] + (5 * this.Grid.CellWidth) / 16,
        cellOrigin[1] + (this.Grid.CellHeight * 3) / 8
      );
​
      curveVertex(cellOrigin[0] + this.Grid.CellWidth / 2, cellOrigin[1]);
      curveVertex(cellOrigin[0] + this.Grid.CellWidth / 2, cellOrigin[1]);
      endShape();
    } else if (rotation == 1) {
        beginShape();
        curveVertex(cellOrigin[0] + this.Grid.CellWidth, cellOrigin[1] + this.Grid.CellHeight / 2);
        curveVertex(cellOrigin[0] + this.Grid.CellWidth, cellOrigin[1] + this.Grid.CellHeight / 2);
  
        curveVertex(
          cellOrigin[0] + (9 * this.Grid.CellWidth) / 16,
          cellOrigin[1] + (this.Grid.CellHeight * 4) / 8
        );
        curveVertex(
          cellOrigin[0] + (7 * this.Grid.CellWidth) / 16,
          cellOrigin[1] + (this.Grid.CellHeight * 3) / 8
        );
  
        curveVertex(cellOrigin[0] + this.Grid.CellWidth / 2, cellOrigin[1]);
        curveVertex(cellOrigin[0] + this.Grid.CellWidth / 2, cellOrigin[1]);
        endShape();
    } else if (rotation == 2) {
        beginShape();
        curveVertex(cellOrigin[0] + this.Grid.CellWidth, cellOrigin[1] + this.Grid.CellHeight / 2);
        curveVertex(cellOrigin[0] + this.Grid.CellWidth, cellOrigin[1] + this.Grid.CellHeight / 2);
  
        curveVertex(
          cellOrigin[0] + (12 * this.Grid.CellWidth) / 16,
          cellOrigin[1] + (this.Grid.CellHeight * 3) / 8
        );
        curveVertex(
          cellOrigin[0] + (8 * this.Grid.CellWidth) / 16,
          cellOrigin[1] + (this.Grid.CellHeight * 6) / 8
        );
  
        curveVertex(cellOrigin[0] + this.Grid.CellWidth / 2, cellOrigin[1] + this.Grid.CellHeight);
        curveVertex(cellOrigin[0] + this.Grid.CellWidth / 2, cellOrigin[1] + this.Grid.CellHeight);
        endShape();
    } else {
      beginShape();
      curveVertex(cellOrigin[0], cellOrigin[1] + this.Grid.CellHeight / 2);
      curveVertex(cellOrigin[0], cellOrigin[1] + this.Grid.CellHeight / 2);
      curveVertex(
        cellOrigin[0] + (3 * this.Grid.CellWidth) / 16,
        cellOrigin[1] + (this.Grid.CellHeight * 5) / 8
      );
      curveVertex(
        cellOrigin[0] + (5 * this.Grid.CellWidth) / 16,
        cellOrigin[1] + (this.Grid.CellHeight * 6) / 8
      );
​
      curveVertex(
        cellOrigin[0] + this.Grid.CellWidth / 2,
        cellOrigin[1] + this.Grid.CellHeight
      );
      curveVertex(
        cellOrigin[0] + this.Grid.CellWidth / 2,
        cellOrigin[1] + this.Grid.CellHeight
      );
      endShape();
    }
  } else {
    if (rotation == 0) {
      this.DrawLineHalfLength(cellPosX, cellPosY, 0);
      this.DrawLineHalfLength(cellPosX, cellPosY, 1);
    } else if (rotation == 1) {
      this.DrawLineHalfLength(cellPosX, cellPosY, 2);
      this.DrawLineHalfLength(cellPosX, cellPosY, 1);
    } else if (rotation == 2) {
      this.DrawLineHalfLength(cellPosX, cellPosY, 2);
      this.DrawLineHalfLength(cellPosX, cellPosY, 3);
    } else {
      this.DrawLineHalfLength(cellPosX, cellPosY, 0);
      this.DrawLineHalfLength(cellPosX, cellPosY, 3);
    }
  }
};
​
Drawer.DrawCross = function (cellPosX, cellPosY) {
  this.DrawHorizontalLine(cellPosX, cellPosY);
  this.DrawVerticalLine(cellPosX, cellPosY);
};
​
Drawer.DrawT = function (cellPosX, cellPosY, rotation = 0) {
  if (rotation == 0) {
    this.DrawLineHalfLength(cellPosX, cellPosY, 0);
    this.DrawVerticalLine(cellPosX, cellPosY);
  } else if (rotation == 1) {
    this.DrawLineHalfLength(cellPosX, cellPosY, 1);
    this.DrawHorizontalLine(cellPosX, cellPosY);
  } else if (rotation == 2) {
    this.DrawLineHalfLength(cellPosX, cellPosY, 2);
    this.DrawVerticalLine(cellPosX, cellPosY);
  } else {
    this.DrawHorizontalLine(cellPosX, cellPosY);
    this.DrawLineHalfLength(cellPosX, cellPosY, 3);
  }
};
​
function draw() {
  background(220);
  color(0, 0, 0);
  strokeWeight(4);
​
  noLoop();
  noFill();
​
  Drawer.Grid = new GridDefinition(6, 6);
​
  /*
  Drawer.DrawHorizontalLine(0, 0);
  Drawer.DrawVerticalLine(0, 1);
  Drawer.DrawDiagonalLine(1, 0);
  Drawer.DrawDiagonalLine(1, 1, false);
  Drawer.DrawLineHalfLength(2, 0, 3);
  Drawer.DrawCorner(2, 1, 2);
  Drawer.DrawCross(3, 0);
  Drawer.DrawT(3, 1, 2);
    */
​
  Drawer.DrawCross(0, 0);
  Drawer.DrawCorner(0, 1, 3);
​
  Drawer.DrawVerticalLine(1, 0);
  Drawer.DrawCross(1, 1);
​
  Drawer.DrawT(2, 0, 1);
  Drawer.DrawCross(2, 1);
​
  Drawer.DrawT(3, 1, 1);
  //DrawCross(0, 0, GRID);
  //DrawCross(1, 0, GRID);
  //DrawCorner(2, 0, GRID, 3);
}
​
Cookies

Sketch Files

Console

Preview
