Tartan Weaver

class ColorSection { 

  constructor (rgb, threadCount) {  

    this.rgb = rgb; 

    this.threadCount = threadCount; 

  }

  get rgbHex() {

    var r = int(red(this.rgb));

    var g = int(green(this.rgb));

    var b = int(blue(this.rgb));

    return r.toString(16)+g.toString(16)+b.toString(16);

  }

}

​

// Weave functions

​

function drawWarpAndWeftFull(offset, amount) {

  drawWarp(offset, offset+amount, 0, height, 0);

  drawWeft(0, width, offset, offset+amount, 2);

}

​

function drawWarpAndWeft(minX, maxX, minY, maxY) {

  drawWarp(minX, maxX, minY, maxY, 0);

  drawWeft(minY, maxY, minX, maxX, 2);

}

​

function drawWarp(minX, maxX, minY, maxY, offset) {

  drawLine(minX, maxX, minY, maxY, offset, 1, 2);

}

​

function drawWeft(minX, maxX, minY, maxY, offset) {

  drawLine(minX, maxX, minY, maxY, offset, 2, 1);

}

​

function drawLine(minX, maxX, minY, maxY, offset, rectW, rectH) {

  for(var x = minX; x < maxX; x++) {

    for(var y = minY; y < maxY; y++) {

      if ((y+x+offset)%4 == 0) {

        rect(x, y, rectW, rectH);

      }

    }        

  }

}

​

// Generate functions

​

function generateRandomColorSections() {

  colorSections = [];

  let numberOfSections = int(random(int(minStripesRange.value()), int(maxStripesRange.value())));

  for(var i = 0; i < numberOfSections; i++) {

    let threadCount = int(random(int(minThiccRange.value()), int(maxThiccRange.value())));

    let r = int(random(255));

    let g = int(random(255));

    let b = int(random(255));

    colorSections.push(new ColorSection(color(r, g, b), threadCount));

  }

  updateInputs();

  redraw();

}

​

function randomizeColors() {

  for(var i = 0; i < colorSections.length; i++) {

    var currentColorSection = colorSections[i];

    let r = int(random(255));

    let g = int(random(255));

    let b = int(random(255));

    currentColorSection.rgb = color(r, g, b);

  }

  updateColorsInput();

  redraw();

}

​

function randomizeStripeThiccness() {

  for(var i = 0; i < colorSections.length; i++) {

    var currentColorSection = colorSections[i];

    let threadCount = int(random(int(minThiccRange.value()), int(maxThiccRange.value())));

    currentColorSection.threadCount = threadCount;

  }

  updatePatternInput();

  redraw();

}

​

function randomizeStripes() {

  var colorMap = parseInputColors();

  colorSections = [];  

  let numberOfSections = int(random(int(minStripesRange.value()), int(maxStripesRange.value())));

  for(var i = 0; i < numberOfSections; i++) {

    let threadCount = int(random(int(minThiccRange.value()), int(maxThiccRange.value())));

    var rgb = colorMap[random(Object.keys(colorMap))];

    colorSections.push(new ColorSection(rgb, threadCount));

  }

  updatePatternInput();

  redraw();

}

​

function muteColors() {

  for(var i = 0; i < colorSections.length; i++) {

    var currentColorSection = colorSections[i];

    var rgb = currentColorSection.rgb;

    var hsbArray = p5.ColorConversion._rgbaToHSBA(rgb._array);

    push();

    colorMode(HSB, 1, 1, 1, 1);

    var hsbTemp = color(hsbArray);

    var h = hue(hsbTemp);

    var s = saturation(hsbTemp) * 0.75;

    var b = brightness(hsbTemp);

    var hsb = color(h, s, b);

    pop();

    currentColorSection.rgb = hsb;

  }

  updateColorsInput();

  redraw();

}

​

// Elements

var colorsInput;

var patternInput;

var minStripesRange;

var maxStripesRange;

var minThiccRange;

var maxThiccRange;

​

// State

var colorSections;

​

function setup() {

  createCanvas(1080/2, 1080/2);

  let div = createDiv();

  div.size(width, "auto");

  div.style("margin-top", "50px");

  div.style("margin-right", "50px");

  // Text

  createSpan('Colors:').parent(div);  

  let colors = "W=FFFFFF B=000000 R=FF0000 Y=FFFF00 G=234b1e";

  colorsInput = createInput(colors);

  colorsInput.parent(div);

  colorsInput.size(width);

  colorsInput.input(inputChanged);

  colorsInput.changed(inputChanged);

  let patternDiv = createDiv();

  let patternLabel = createSpan('Pattern:');

  patternLabel.parent(div);  

  let pattern = "Y3 W4 B33 G33 Y6 W4 R48 W4 Y6";

  patternInput = createInput(pattern);

  patternInput.parent(div);

  patternInput.size(width);

  patternInput.input(inputChanged);

  patternInput.changed(inputChanged);

  // Sliders

  createDiv('Min # of stripes:').parent(div);

  minStripesRange = createSlider(2, 40, 2);

  minStripesRange.parent(div);

  minStripesRange.size(width, 10);

  minStripesRange.changed(randomizeStripes);

  maxStripesRange = createSlider(2, 40, 8);

  createDiv('Max # of stripes:').parent(div);

  maxStripesRange.parent(div);

  maxStripesRange.size(width, 10);

  maxStripesRange.changed(randomizeStripes);

  minThiccRange = createSlider(1, 40, 1);

  createDiv('Min thiccness of stripes:').parent(div);

  minThiccRange.parent(div);

  minThiccRange.size(width, 10);

  minThiccRange.changed(randomizeStripeThiccness);

  maxThiccRange = createSlider(1, 40, 40);

  createDiv('Max thiccness of stripes:').parent(div);

  maxThiccRange.parent(div);

  maxThiccRange.size(width, 10);

  maxThiccRange.changed(randomizeStripeThiccness);

  // Buttons

​

  let buttonsDiv = createDiv(); 

  var generateRandomPatternAndColorsButton = createButton('Random pattern and colors');

  generateRandomPatternAndColorsButton.parent(div);

  generateRandomPatternAndColorsButton.size(width/5, "1em");

  generateRandomPatternAndColorsButton.mousePressed(generateRandomColorSections);

  var randomizeColorsButton = createButton('Randomize colors');

  randomizeColorsButton.parent(div);

  randomizeColorsButton.size(width/5, "1em");

  randomizeColorsButton.mousePressed(randomizeColors);

  var randomizeStripeThiccnessButton = createButton('Randomize thiccness');

  randomizeStripeThiccnessButton.parent(div);

  randomizeStripeThiccnessButton.size(width/5, "1em");

  randomizeStripeThiccnessButton.mousePressed(randomizeStripeThiccness);

  var randomizeStripesButton = createButton('Randomize stripes');

  randomizeStripesButton.parent(div);

  randomizeStripesButton.size(width/5, "1em");

  randomizeStripesButton.mousePressed(randomizeStripes);

  var muteColorsButton = createButton('Mute colors');

  muteColorsButton.parent(div);

  muteColorsButton.size(width/5, "1em");

  muteColorsButton.mousePressed(muteColors);

  noLoop();

  noStroke();

  inputChanged();

}

​

function draw() {

  background(255);

  if (!colorSections) {

    return;

  }

  var currentSectionIndex = 0;

  var currentSectionDirection = 1;

  var threadCount = 0;

  while(threadCount < width) {

    var currentColorSection = colorSections[currentSectionIndex];

    fill(currentColorSection.rgb);

    drawWarpAndWeftFull(threadCount, currentColorSection.threadCount);

    threadCount += currentColorSection.threadCount;

    if (currentSectionIndex + currentSectionDirection >= colorSections.length ||

        currentSectionIndex + currentSectionDirection <= -1) {

      currentSectionDirection *= -1;

    }

    else {

      currentSectionIndex += currentSectionDirection;

    }

  }

}

​

function parseColors(colors) {

  var colorMap = {};

  var colorStrArray = colors.split(" ");

  for (var i = 0; i < colorStrArray.length; i++) {

    var colorStr = colorStrArray[i];

    var symbol = colorStr.trim().charAt(0);

    var rgb = color("#"+colorStr.trim().substring(2));

    colorMap[symbol] = rgb;

  }

  return colorMap;

}

​

function parseInputColors() {

  return parseColors(colorsInput.value());

}

​

function inputChanged() {

  var colorMap = parseInputColors();

  let pattern = patternInput.value();

  colorSections = [];

  var colorSectionStrArray = pattern.split(" ");

  for (var i = 0; i < colorSectionStrArray.length; i++) {

    var colorSectionStr = colorSectionStrArray[i];

    var symbol = colorSectionStr.trim().charAt(0);

    var threadCount = int(colorSectionStr.trim().substring(1));

    var rgb = colorMap[symbol];

    colorSections.push(new ColorSection(rgb, threadCount));

  }

  redraw();

}

​

function updateInputs() {

  updateColorsInput();

  updatePatternInput();

}

​

function updateColorsInput() {

  var colorsStr = "";

  for(var i = 0; i < colorSections.length; i++) {

    var currentColorSection = colorSections[i];

    var symbol = char(65+i);

    colorsStr += symbol + "=" + currentColorSection.rgbHex + " ";

  }

  colorsInput.value(colorsStr);

}

​

function updatePatternInput() {

  var patternStr = "";

  for(var i = 0; i < colorSections.length; i++) {

    var currentColorSection = colorSections[i];

    var symbol = char(65+i);

    patternStr += symbol + currentColorSection.threadCount + " ";

  }

  patternInput.value(patternStr);

}