Flower Petal with Bullet Points Template

mySketch
class FlowerPetal
class CircleBullet
xxxxxxxxxx
 
/*
Flower petals sway in the background while circle bullet points are introduced with left mouse click.
​
Sketch idea by: Terry Chun
Coding by: Terry Chun
​
'bulletCounter' is increased to count how many bullet points to display. 
Currently left click with mouse increases this value, but other interactions can be used
*/
​
let bulletCounter = 0;
let textArray = [];
​
let flowerPetal = [];
let circleBullet = [];
​
function setup() {
  createCanvas(1280, 720);
  
  //define flowerPetal objects
  for (let i = 0; i < 4; i++){
    flowerPetal[i] = new FlowerPetal(1300, 700, 600, -PI/2 + (i * PI/8), "blue");
  }
  for (let i = 4; i < 8; i++){
    flowerPetal[i] = new FlowerPetal(1300, 700, 500, -PI/2.2 + ((i - 4) * PI/8), "red");
  }
  for (let i = 8; i < 12; i++){
    flowerPetal[i] = new FlowerPetal(1300, 700, 450, -PI/2.2 + ((i - 8) * PI/8), "red");
  }
}
​
function draw() { 
  background(255);
  
  for (let i = 0; i < flowerPetal.length; i++){
    flowerPetal[i].display();
    flowerPetal[i].sway();
  }
  
  for(let i = 0; i < circleBullet.length; i++){
    circleBullet[i].spin();
  }
  
  noStroke();
  textSize(40);
  for(let i = 0; i < textArray.length; i++){  
    text(textArray[i], 150, 110 + 100 * i);
  }
  
  //Change the bullet texts to display here
  if(textArray.length < bulletCounter){
    if(bulletCounter == 1){
      append(textArray, "first bullet point");
      append(circleBullet, new CircleBullet(100, 100, 40));
    } else if(bulletCounter == 2){
      append(textArray, "second bullet point");
      append(circleBullet, new CircleBullet(100, 200, 40));
    } else if(bulletCounter == 3){
      append(textArray, "third bullet point");
      append(circleBullet, new CircleBullet(100, 300, 40));
    }
  }
}
​
function mouseClicked(){
  bulletCounter += 1;
}
​