sutcliffe pentagons

// example code adapted from listing 8.4 of Pearson (2011: 173-174)

// draw a pentagon using rotation

// adding midpoint marks

// adding extrusion from midpoint

// adding recursive structure

// adding children branch and complete the sutcliffe pentagons

// tweaking...

// schien@mail.ncku.edu.tw, Fall 2020

​

​

let pentagon;

let _strutFactor = 0.2;

let _maxLevels = 3;

let _strutNoise;

​

function setup() {

  createCanvas(600, 600);

  _strutNoise = random(10);

}

​

function draw() {

  background(255);

  _strutNoise += 0.01;

  _strutFactor = noise(_strutNoise)*3 - 1;

  pentagon = new FractalRoot(frameCount);

  pentagon.drawShape();

}

​

// ====== FractalRoot ======

class FractalRoot {

  constructor(startAngle) {

    this.pArray = [];

    let cx = width/2;

    let cy = height/2;

    for (let i=0; i<360; i+=72) {

      let x = cx+(280*cos(radians(startAngle+i)));

      let y = cy+(280*sin(radians(startAngle+i)));

      this.pArray.push(new PointObj(x, y));

    }

    this.rootBranch = new Branch(0, 0, this.pArray);

  }

​

  drawShape() {

    this.rootBranch.drawMe();

  }

}

​

// ====== PointObj ======

class PointObj {

  constructor(ex, ey) {

    this.x = ex;

    this.y = ey;

  }

}

​

// ====== Branch ======

class Branch {

  constructor(lev, n, points) {

    this.level = lev;

    this.num = n;

    this.outerPoints = points;

    this.midPoints = this.calcMidPoints();

    this.projPoints = this.calcProjPoints();

    this.myBranches = [];

    if (this.level < _maxLevels) {

      let child = new Branch(this.level+1, 0, this.projPoints);

      this.myBranches.push(child);

      for (let k=0; k<this.outerPoints.length; k++) {

        let nextk = (k+4)%this.outerPoints.length;

        let newPoints = new Array(this.outerPoints[k], this.midPoints[k], this.projPoints[k], this.projPoints[nextk], this.midPoints[nextk]);

        child = new Branch(this.level+1, k+1, newPoints);

        this.myBranches.push(child);

      }

    }

  }

​

  drawMe() {

    strokeWeight(5-this.level);

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

      let nexti = i+1;

      if (nexti === this.outerPoints.length) {

        nexti = 0;

      }

      line(this.outerPoints[i].x, this.outerPoints[i].y, this.outerPoints[nexti].x, this.outerPoints[nexti].y);

    }

    strokeWeight(0.5);

    fill(255, 150);

    for (let j=0; j<this.midPoints.length; j++) {

      //ellipse(this.midPoints[j].x, this.midPoints[j].y, 15, 15);

      //line(this.midPoints[j].x, this.midPoints[j].y, this.projPoints[j].x, this.projPoints[j].y);

      //ellipse(this.projPoints[j].x, this.projPoints[j].y, 15, 15);

    }

    for (let k=0; k<this.myBranches.length; k++) {

      this.myBranches[k].drawMe();

    }

  }

  calcMidPoint(end1, end2) {

    let mx = (end1.x + end2.x)/2;

    let my = (end1.y + end2.y)/2;

    let mp = new PointObj(mx, my);

    return mp;

  }

​

  calcMidPoints() {

    let mpArray = [];

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

      let nexti = i+1;

      if (nexti == this.outerPoints.length) {

        nexti = 0;

      }

      let thisMP = this.calcMidPoint(this.outerPoints[i], this.outerPoints[nexti]);

      mpArray.push(thisMP);

    }

    return mpArray;

  }

  calcProjPoint(mp, op) {

    let px = mp.x + ((op.x - mp.x) * _strutFactor);

    let py = mp.y + ((op.y - mp.y) * _strutFactor);

    let pp = new PointObj(px, py);

    return pp;

  }

​

  calcProjPoints() {

    let ppArray = [];

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

      let nexti = (i+3)%this.midPoints.length;

      let thisPP = this.calcProjPoint(this.midPoints[i], this.outerPoints[nexti]);

      ppArray.push(thisPP);

    }

    return ppArray;

  }

}