let cellSize = 100;

let patterns = [];

let colors;

let currentCol = 0;

let currentRow = 0;

​

function setup() {

  createCanvas(800, 800, 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(0);

    } 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 = int(random(patterns.length));

  // Choose random orientation

  let orientation = int(random(3));

​

  if (patterns[patternIndex]) {  // Ensure the pattern exists

    push();

​

    // Translate to the center of the grid cell and rotate

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

    if (orientation == 0) {

      rotate(HALF_PI);

    } else if (orientation == 1) {

      rotate(PI);

    } else {

      rotate(QUARTER_PI);

    }

​

    // Draw the pattern, centered at (0, 0) relative to the 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

  }

}

​

​

​

function initializePatterns() {

  patterns = [

    drawGeometricTriangles, drawSineWaves, drawNestedTriangles, 

    drawSymbols, drawZebraPrint, drawDiamondsInDiamond, drawCurves

  ];

}

​

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

  ];

}

​

​

// Geometric Triangles

function drawGeometricTriangles(x, y, size) {

  let numTriangles = 5;

  let colorPick = random(colors);

  stroke(colorPick);

  noFill();

  let triangleSize = size;

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

    triangle(-triangleSize / 2, triangleSize / 2, triangleSize / 2, triangleSize / 2, 0, -triangleSize / 2);

    triangleSize *= 0.7;

  }

}

​

// Harmonic Motion Style Sine Waves

function drawSineWaves(x, y, size) {

  let waveHeight = size / 4;

  let frequency = 0.2;

  strokeWeight(2);

  noFill();

  beginShape();

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

    let xOffset = i;

    let yOffset = sin(i * frequency) * waveHeight;

    vertex(xOffset - size / 2, yOffset);

  }

  endShape();

}

​

// Nested Triangles

function drawNestedTriangles(x, y, size) {

  let triangleSize = size;

  noFill();

  stroke(random(colors));

  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;

  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) {

  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);

  }

}

​

// Diamonds within Diamonds

function drawDiamondsInDiamond(x, y, size) {

  let dSize = size;

  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();

  strokeWeight(2);

  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 keyIsPressed() {

  if (key =='s'){

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

}

}

​

​