final

var canvasWidth = 900;

var canvasHeight = 900;

​

var numRows = 3;

var numCols = 3;

var frameWidth = canvasWidth / numCols;

var frameHeight = canvasHeight / numRows;

var cornerRadius = 20;

​

var baseBranchLength = 40;

var angleVariation = 0.5;

var growthFactor = 0.75;

var minBranchLength = 1;

​

// Color palettes for branches and backgrounds

var colors = ['#FF6F61', '#6B5B95', '#88B04B', '#F7CAC9', '#92A8D1', '#955251'];

var bgColors = ['#FAF0E6', '#FBEDFD', '#E6E6FA', '#FFFACD', '#E0FFFF', '#EEFFD5'];

​

var currentFrame = 0;

​

function setup() {

  // Create the canvas and set background color

  createCanvas(canvasWidth, canvasHeight);

  background("#ffffff");

​

  noLoop();

​

  var button = createButton('Next Frame'); // Create a button to show the next frame

  button.position(0, 0); // Position the button on the canvas

  button.mousePressed(showNextFrame); // 

​

  var saveButton = createButton('Save Canvas');

  saveButton.position(100, 0); // Position the save button next to the "Next Frame" button

  saveButton.mousePressed(function() {

    saveCanvas('evolving.pattern', 'jpg'); // Save the canvas as a JPG file

  });

​

  drawFrame(currentFrame);

}

​

function drawFrame(frameValues) {

  // Calculate row and column index

  var row = floor(frameValues / numCols);

  var col = frameValues % numCols;

​

  // Calculate offset for each frame

  var xOffset = col * frameWidth;

  var yOffset = row * frameHeight;

​

  // Pick a random background color for the frame

  var bgColor = random(bgColors);

​

  noStroke();

  fill(bgColor);

​

  // Draw frame background with rounded corners

  rect(xOffset + 10, yOffset + 10, frameWidth - 20, frameHeight - 20, cornerRadius);

​

  push();

  translate(xOffset + frameWidth / 2, yOffset + frameHeight / 2);

​

  // Hexagonal pattern

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

    push();

    rotate((TWO_PI / 6) * i);

    drawBranch(baseBranchLength, frameValues + 1);

    pop();

  }

​

  pop();

}

​

function drawBranch(length, depth) {

  if (length < minBranchLength || depth <= 0) {

    return;

  }

​

  // Set random stroke weight and color

  strokeWeight(random(1, 3));

  var chosenColor = random(colors);

  stroke(chosenColor);

​

  // Draw the branch

  line(0, 0, 0, -length);

  translate(0, -length);

​

  // Add random variations to the branch angles

  var randomAngle1 = random(-angleVariation, angleVariation);

  var randomAngle2 = random(-angleVariation, angleVariation);

​

  // Draw branches recursively

  // Draw the left branch

  push();

  rotate(PI / 4 + randomAngle1);

  drawBranch(length * growthFactor, depth - 1);

  pop();

​

  // Draw the right branch

  push();

  rotate(-PI / 4 + randomAngle2);

  drawBranch(length * growthFactor, depth - 1);

  pop();

}

​

function showNextFrame() {

  if (currentFrame < numRows * numCols) {

    drawFrame(currentFrame);

    currentFrame++;

  }

}