let patterns = [];

let colors;

let currentCol = 0;

let currentRow = 0;

​

function setup() {

  createCanvas(600, 600, SVG); // Enable SVG output

  cols = width / cellSize;

  rows = height / cellSize;

  initializePatterns();

  initializeColors();

  frameRate(10);

  noLoop();

}

​

function draw() {

  if (frameCount == 1 || (currentCol === 0 && currentRow === 0)) {

    let colorModeChoice = int(random(3));

    if (colorModeChoice == 0) {

      background(255);

      stroke(1);

    } else if (colorModeChoice == 1) {

      background(0);

      stroke(255);

    } else {

      background(50, 25, 0); // Dark brown background

      stroke(255, 165, 0); // Orange lines

    }

  }

​

  // Calculate position in the grid

  let x = currentCol * cellSize;

  let y = currentRow * cellSize;

​

  // Randomly pick a pattern for the current cell

  let patternIndex = (currentCol + currentRow * cols) % patterns.length; // Ensure uniform distribution of patterns

​

  if (currentRow % 3 === 0) {

    // Apply zigzag pattern to every fourth row

    drawZigZagPattern(x + cellSize / 2, y + cellSize / 2, cellSize); // Centered in the cell

  } else if (patterns[patternIndex]) {

    // Ensure the random pattern exists

    push();

    translate(x + cellSize / 2, y + cellSize / 2); // Move to the center of the current cell

    patterns[patternIndex](0, 0, cellSize); // Center at the origin (relative to the cell)

    pop();

  }

​

  // Move to the next cell

  currentCol++;

  if (currentCol >= cols) {

    currentCol = 0;

    currentRow++;

  }

​

  if (currentRow >= rows) {

    noLoop(); // Stop the loop when all rows are drawn

  }

}

​

​

function initializePatterns() {

  patterns = [

    drawThickVerticalLines,

    drawNestedTriangles,

    drawSymbols,

    drawZebraPrint,

    drawDiamondsInDiamond,

    drawCurves,

    drawThickHorizontalLines,

    drawSquareSpiral,

    drawSpiralTriangles,

    thinLines,

    verticalLines,

    drawXWithDots

  ];

}

​

function initializeColors() {

  colors = [

    color(255, 132, 0), // Vibrant Orange

    color(230, 115, 0), // Darker Orange

    color(191, 87, 0), // Earthy Brownish Orange

    color(140, 70, 20), // Dark Brown

    color(87, 53, 19), // Rich Brown

    color(255, 183, 77), // Light Golden Orange

  ];

}

​

function drawSpiralTriangles(x, y, size) {

  strokeWeight(2);

  stroke(random(colors));

  noFill();

​

  // Adjust the initial size to ensure the triangle fits inside the cell

  let adjustedSize = size * 0.9; // Reduce size slightly for padding

​

  // Draw the recursive triangles centered in the cell

  recursiveTriangle(

    x - adjustedSize / 2,

    y - adjustedSize / 2,

    adjustedSize,

    5

  );

}

​

function recursiveTriangle(x, y, size, depth) {

  if (depth == 0) return;

​

  // Draw the outer triangle

  let half = size / 2;

  triangle(x, y, x + size, y, x + half, y + size);

​

  // Recursively draw smaller triangles inside

  recursiveTriangle(x, y, size / 2, depth - 1); // Top-left

  recursiveTriangle(x + half / 2, y + size / 2, size / 2, depth - 1); // Center

  recursiveTriangle(x + half, y, size / 2, depth - 1); // Top-right

}

​

function drawZigZagPattern(x, y, size) {

  stroke(random(colors));

  strokeWeight(3);

  noFill();

​

  let amplitude = size / 4;

  let frequency = size / 5;

​

  // Draw zigzag shape and add dots

  beginShape();

  for (let i = 0; i <= size; i += frequency) {

    let yOffset = (i / frequency) % 2 == 0 ? -amplitude : amplitude; // Create zigzag pattern

    let currentX = x - size / 2 + i; // Current X position

    let currentY = y + yOffset; // Current Y position

    vertex(currentX, currentY);

​

    // Calculate the vertices of the triangle

    if (i > 0) {

      // The triangle's vertices are:

      // Previous vertex

      let previousY = y + ((i / frequency) % 2 == 0 ? amplitude : -amplitude);

      let triangleVertices = [

        createVector(currentX, currentY), // Current peak

        createVector(currentX - frequency / 2, previousY), // Left point

        createVector(currentX + frequency / 2, previousY), // Right point

      ];

​

      // Calculate the centroid of the triangle

      let centroidX =

        (triangleVertices[0].x +

          triangleVertices[1].x +

          triangleVertices[2].x) /

        3;

      let centroidY =

        (triangleVertices[0].y +

          triangleVertices[1].y +

          triangleVertices[2].y) /

        3;

​

      // Draw a dot at the centroid

      strokeWeight(5); // Set stroke weight for dots

      point(centroidX, centroidY); // Draw the dot

    }

  }

  endShape();

}

​

function drawXWithDots(x, y, size) {

  noFill();

​

  // Set stroke properties for the "X"

  strokeWeight(3);

  stroke(random(colors));

​

  // Draw the two diagonal lines to form the "X"

  line(x - size / 2, y - size / 2, x + size / 2, y + size / 2); // Line from top-left to bottom-right

  line(x - size / 2, y + size / 2, x + size / 2, y - size / 2); // Line from bottom-left to top-right

​

  // Set fill for the dots

  stroke(random(colors));

  let dotSize = 10; // Size of the dots

​

  // Calculate positions for the dots in each triangle formed by the "X"

  // Top-left triangle

  ellipse(x - size / 4, y - size / 4, dotSize, dotSize);

  // Top-right triangle

  ellipse(x + size / 4, y - size / 4, dotSize, dotSize);

  // Bottom-left triangle

  ellipse(x - size / 4, y + size / 4, dotSize, dotSize);

  // Bottom-right triangle

  ellipse(x + size / 4, y + size / 4, dotSize, dotSize);

}

​

​

//thin lines

function verticalLines(x, y, size) {

  stroke(random(colors));

  strokeWeight(2);

  let gap = size / 5;

  for (let i = 0; i < 6; i++) {

    line(-size / 2 + gap * i, -size / 2, -size / 2 + gap * i, size / 2);

  }

}

​

// Thick Vertical Lines

function drawThickVerticalLines(x, y, size) {

  stroke(random(colors));

  strokeWeight(10); // Thick line weight

  let gap = size / 5; // 5 lines with gaps

  for (let i = 0; i < 6; i++) {

    line(-size / 2 + gap * i, -size / 2, -size / 2 + gap * i, size / 2);

  }

}

​

// Thick Horizontal Lines

function drawThickHorizontalLines(x, y, size) {

  stroke(random(colors));

  strokeWeight(10); // Thick line weight

  let gap = size / 6; // 5 lines with gaps

  for (let i = 0; i < 6; i++) {

    line(

      -size / 2,

      -size / 2 + gap * (i + 1),

      size / 2,

      -size / 2 + gap * (i + 1)

    );

  }

}

​

// Thin Horizontal Lines

function thinLines(x, y, size) {

  stroke(random(colors));

  strokeWeight(2); // Thick line weight

  let gap = size / 6; // 5 lines with gaps

  for (let i = 0; i < 6; i++) {

    line(

      -size / 2,

      -size / 2 + gap * (i + 1),

      size / 2,

      -size / 2 + gap * (i + 1)

    );

  }

}

​

// Nested Triangles

function drawNestedTriangles(x, y, size) {

  let triangleSize = size;

  noFill();

  stroke(random(colors));

  strokeWeight(2);

  for (let i = 0; i < 4; i++) {

    triangle(

      -triangleSize / 2,

      triangleSize / 2,

      triangleSize / 2,

      triangleSize / 2,

      0,

      -triangleSize / 2

    );

    triangleSize *= 0.7;

  }

}

​

// West African Symbols/Geometric Shapes

function drawSymbols(x, y, size) {

  noFill();

  let symbolSize = size * 0.6;

  strokeWeight(2);

  stroke(random(colors));

​

  // Circle with horizontal/vertical line cross

  ellipse(0, 0, symbolSize, symbolSize);

  line(-symbolSize / 2, 0, symbolSize / 2, 0);

  line(0, -symbolSize / 2, 0, symbolSize / 2);

​

  // Small triangles within

  for (let i = 0; i < 3; i++) {

    let triSize = symbolSize * (0.3 - i * 0.1);

    triangle(

      0,

      -triSize / 2,

      triSize / 2,

      triSize / 2,

      -triSize / 2,

      triSize / 2

    );

  }

}

​

// Zebra Print

function drawZebraPrint(x, y, size) {

  strokeWeight(2);

  let stripes = 10;

  for (let i = 0; i < stripes; i++) {

    let step = i * (size / stripes);

    line(-size / 2 + step, -size / 2, size / 2 - step, size / 2);

    line(size / 2 - step, -size / 2, -size / 2 + step, size / 2);

  }

}

​

function drawSquareSpiral(x, y, size) {

  stroke(random(colors));

  strokeWeight(4); // Set the stroke weight for the spiral

  noFill(); // No fill for the square spiral

​

  let step = size / 10; // Define the step size for each movement inward

  let currentSize = size; // Start with the full square size

​

  let startX = -currentSize / 2; // Initial X position (top-left corner)

  let startY = -currentSize / 2; // Initial Y position (top-left corner)

​

  beginShape(); // Start drawing the shape

​

  // Draw the spiral by progressively making the square smaller and moving inward

  while (currentSize > step) {

    // Top edge

    vertex(startX, startY);

    vertex(startX + currentSize, startY);

​

    // Right edge

    vertex(startX + currentSize, startY + currentSize);

​

    // Bottom edge

    vertex(startX, startY + currentSize);

​

    // Move inward for the next iteration

    currentSize -= step * 2;

    startX += step;

    startY += step;

  }

​

  endShape();

}

​

// Diamonds within Diamonds

function drawDiamondsInDiamond(x, y, size) {

  let dSize = size;

  strokeWeight(2);

  noFill();

  for (let i = 0; i < 5; i++) {

    beginShape();

    vertex(0, -dSize / 2);

    vertex(dSize / 2, 0);

    vertex(0, dSize / 2);

    vertex(-dSize / 2, 0);

    endShape(CLOSE);

    dSize *= 0.7;

  }

}

​

// Bezier Curves

function drawCurves(x, y, size) {

  noFill();

  stroke(random(colors));

  strokeWeight(3);

  for (let i = 0; i < 6; i++) {

    bezier(

      -size / 2,

      -size / 2,

      random(-size, size),

      random(-size, size),

      random(-size, size),

      random(-size, size),

      size / 2,

      size / 2

    );

  }

}

​

// Reset and redraw the sketch with new randomized patterns when mouse is pressed

function mousePressed() {

  currentCol = 0; // Reset the column and row counters

  currentRow = 0;

​

  // Shuffle the pattern array and pick new random colors

  patterns = shuffle(patterns);

  initializeColors();

  loop(); // Restart the draw looP

}

​

function keyPressed() {

  save("test.svg"); // Save the canvas as an SVG when any key is pressed

}