class MyRectangle {

  constructor(x, y, w, h, depth) {

    this.x = x;

    this.y = y;

    this.w = w;

    this.h = h;

    this.depth = depth;

​

    // Children array

    this.children = [];

​

    // We’ll store info to subdivide *dynamically* (not just once).

    // We'll pick a random direction: vertical or horizontal

    this.splitVertically = random() < 0.5;

​

    // We'll decide how many children to create

    this.numChildren = floor(random(2, 4));

​

    // Store arrays for base fraction, amplitude, phase of each partition

    // so that each partition can move over time.

    this.fractionsBase = [];

    this.fractionsAmp = [];

    this.fractionsPhase = [];

​

    // If we still have depth to go, initialize subdiv parameters

    if (this.depth > 0) {

      // The "base" fraction array should sum to 1.0

      // (We’ll partition the dimension from 0..1, then scale to actual w/h)

      let baseParts = randomPartition(1, this.numChildren);

​

      for (let i = 0; i < this.numChildren; i++) {

        // Store the base fraction

        this.fractionsBase[i] = baseParts[i];

        // Store a small random amplitude

        // (Keeping amplitude smaller than base fraction helps avoid negatives)

        this.fractionsAmp[i] = random(this.fractionsBase[i] * 0.5);

        // Random phase for each partition

        this.fractionsPhase[i] = random(TWO_PI);

      }

​

      // Create children objects right now (their bounding boxes get updated later)

      for (let i = 0; i < this.numChildren; i++) {

        // For now, just create them with the full parent's bounding box,

        // We will fix their bounding boxes inside update(t).

        let childRect = new MyRectangle(

          this.x,

          this.y,

          this.w,

          this.h,

          this.depth - 1

        );

        this.children.push(childRect);

      }

    }

  }

​

  // Recompute child bounding boxes based on a time parameter t

  update(t) {

    // If this rectangle can have children...

    if (this.children.length > 0) {

      // 1) Compute the dynamic fractions for each child

      //    fraction_i = base + amplitude * sin(t + phase)

      let rawFractions = [];

      for (let i = 0; i < this.numChildren; i++) {

        let frac =

          this.fractionsBase[i] + this.fractionsAmp[i] * sin(t + this.fractionsPhase[i]);

        // Make sure it doesn't go below 0

        if (frac < 0) frac = 0.001;

        rawFractions[i] = frac;

      }

​

      // 2) Normalize so all fractions sum to 1

      let sumFractions = rawFractions.reduce((acc, val) => acc + val, 0);

      if (sumFractions < 0.0001) sumFractions = 0.0001; // avoid division by zero

      for (let i = 0; i < this.numChildren; i++) {

        rawFractions[i] /= sumFractions;

      }

​

      // 3) Assign bounding boxes to each child

      if (this.splitVertically) {

        // Subdivide the width

        let currentX = this.x;

        for (let i = 0; i < this.numChildren; i++) {

          let childW = this.w * rawFractions[i];

          let child = this.children[i];

          child.x = currentX;

          child.y = this.y;

          child.w = childW;

          child.h = this.h;

​

          // Update child recursively

          child.update(t);

​

          currentX += childW;

        }

      } else {

        // Subdivide the height

        let currentY = this.y;

        for (let i = 0; i < this.numChildren; i++) {

          let childH = this.h * rawFractions[i];

          let child = this.children[i];

          child.x = this.x;

          child.y = currentY;

          child.w = this.w;

          child.h = childH;

​

          // Update child recursively

          child.update(t);

​

          currentY += childH;

        }

      }

    }

  }

​

  // Draw this rectangle (only if it has no children) or draw children

  display() {

    if (this.children.length > 0) {

      // Display children

      for (let child of this.children) {

        child.display();

      }

    } else {

      // Leaf rectangle: draw it

      stroke(0);

      noFill();

      rect(this.x, this.y, this.w, this.h);

    }

  }

}

​

// Helper function: random partition of `1` into `count` parts

// e.g. randomPartition(1, 3) => [0.3, 0.2, 0.5], sums to 1

function randomPartition(total, count) {

  let vals = [];

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

    vals[i] = random(0.3, 0.7);

  }

  let sumVal = vals.reduce((a, b) => a + b, 0);

  // Normalize to sum to 'total' (which is 1 in our usage)

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

    vals[i] = (vals[i] / sumVal) * total;

  }

  return vals;

}

​

// ---- p5.js Setup and Draw ----

let topRectangle;

​

function setup() {

  createCanvas(600, 400);

​

  // Create top rectangle that spans entire canvas

  topRectangle = new MyRectangle(0, 0, width, height, 5);

}

​

function draw() {

  background(255);

​

  // Let time be a function of the frameCount

  let t = frameCount * 0.03;

​

  // Update the top-level rectangle (this cascades down the hierarchy)

  topRectangle.update(t);

​

  // Display everything

  topRectangle.display();

}

​