let startAngle = (180 / 13) * (5 / 2) - 90;

let openAngle = 180 / 13;

​

let lightGreen, middleGreen, brown, gold;

​

function setup() {

  createCanvas(500, 500);

​

  // Colors for the pine tree and fan

  lightGreen = color(118, 189, 84);

  middleGreen = color(84, 142, 75);

  brown = color(130, 83, 35);

  gold = color(255, 215, 0); 

}

​

function draw() {

  // change the number of fan leaves based on mouseX position

  let triangleNumber = map(mouseX, 50, 450, 1, 9, true);

​

  // map the triangleNumber to a background color from dark purple to light red

  let bgRed = map(triangleNumber, 1, 9, 100,275);

  background(bgRed, 20, 60);

​

  // draw multiple pine trees to fill the canvas

  for (let y = 0; y < height; y += 60) {

    for (let x = 0; x < width; x += 60) {

      let pineTree = new PineTree(x + 5, y - 20);

      pineTree.draw();

    }

  }

​

  // create the folding fan in the center

  let fan = new FoldingFan(width / 2, height / 2, triangleNumber);

  fan.draw();

}

​

// define the FoldingFan class

class FoldingFan {

  constructor(x, y, triangleNumber) {

    this.x = x;

    this.y = y;

    this.triangleNumber = triangleNumber;

  }

​

  draw() {

    push();

    translate(this.x, this.y);

​

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

      let angleOffset = i * radians(openAngle);

      push();

      rotate(angleOffset + radians(startAngle));

      this.drawFanLeaf();

      pop();

    }

    pop();

  }

​

  drawFanLeaf() {

    fill(gold); // Set fan color to gold

    let Bx = -radius * tan(radians(openAngle / 2));

    let By = -radius;

    let Cx = radius * tan(radians(openAngle / 2));

    let Cy = -radius;

​

    beginShape();

    vertex(0, 0);

    vertex(Bx, By);

    vertex(Cx, Cy);

    endShape(CLOSE);

  }

}

​

// define the PineTree class

class PineTree {

  constructor(x, y) {

    this.x = x;

    this.y = y;

  }

​

  draw() {

    //tree part one

    fill(lightGreen);

    // Branch 1

    triangle(

      this.x - 20,

      this.y + 40,

      this.x + 20,

      this.y + 40,

      this.x,

      this.y + 10

    );

    // branch 2

    fill(middleGreen);

    quad(

      this.x - 15,

      this.y + 40,

      this.x - 28,

      this.y + 60,

      this.x + 28,

      this.y + 60,

      this.x + 15,

      this.y + 40

    );

    // branch 3

    fill(lightGreen);

    quad(

      this.x - 20,

      this.y + 60,

      this.x - 30,

      this.y + 80,

      this.x + 30,

      this.y + 80,

      this.x + 20,

      this.y + 60

    );

    // trunk

    fill(brown);

    quad(

      this.x - 4,

      this.y + 80,

      this.x - 6,

      this.y + 95,

      this.x + 6,

      this.y + 95,

      this.x + 4,

      this.y + 80

    );

  }

}

​