Star

let center;

​

let stars;

let n = 26;

let dR, r, r0, rMax, deltaAlpha;

function setup() {

  createCanvas(400,600);

  colorMode(HSB, 360, 100, 100,100); 

  center = createVector(0.5*width,0.5*height,0.0);

  deltaAlpha = 0.05;

  r0 = 30; // initial radius of smallest star

  dR = 33; // radius increment

  rMax = r0 + dR*n; // radius of largest star

  r = rMax;

  stars = new Array(n);

  let transparency = 100;

  let colorArray = [color(212,81,61,transparency),

                    color(357,83,55,transparency),

                    color(232,45,19,transparency),

                    color(21,67,49,transparency),

                    color(357,84,55,transparency),

                    color(215,57,27,transparency),

                    color(11,83,59,transparency),

                    color(213,73,42,transparency),

                    color(357,68,41,transparency),

                    color(21,23,47,transparency),

                    color(2,74,39,transparency),

                    color(359,71,58,transparency),

                    color(21,67,66,transparency),

                    ];

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

     r -= dR;

    let starColor = colorArray[(n-i-1)%13];

    stars[i] = new Star(starColor, color(360,0,100,0),center,r); 

    stars[i].alpha = PI*0.1+ i*deltaAlpha;

  }

}

​

​

function draw() {

  background(0,0,100);

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

    stars[i].evolve(); // they get bigger! and rotate!

    stars[i].display();

  }

  if (stars[0].outerRadius > rMax) {

      stars[0].outerRadius = 0;

      stars[0].innerRadius = 0;

      stars[0].alpha = stars[n-1].alpha - deltaAlpha;

      // we'ver made the biggest star into the smallest star.

      // now we need to move it to the end of the array so that its drawn on top;

      let reorderdStars = new Array(n);

      for(let i=0; i<n-1; i++) {

        reorderdStars[i] = stars[i+1];

      }

      reorderdStars[n-1] =  stars[0];

      stars = reorderdStars;

  }

}

class Star {

  constructor(c, strokecolor,  centerPoint, radius) {

    this.numberOfPoints = 5;

    this.outerRadius = radius;

    this.ratio = 1 / sqrt(5);

    this.innerRadius = radius * this.ratio;

    this.fillColor = c;

    this.strokeColor = strokecolor;

    this.center = centerPoint;

    this.theta = PI / this.numberOfPoints;

    this.alpha = this.theta * 0.5;

  }

  evolve() {

    this.outerRadius += 0.5 ;

    this.innerRadius = this.outerRadius * this.ratio;

    this.alpha += 0.01;

    let h = hue(this.fillColor);

    h = (h + 2) % 360;

    this.fillColor = color(h, saturation(this.fillColor), brightness(this.fillColor));

  }

  display() {

    fill(this.fillColor);

    stroke(this.fillColor);

    push();

      translate(this.center.x, this.center.y);

      rotate(this.alpha);

      beginShape(TRIANGLE_FAN);

        vertex(0, 0);

        for(let i=0; i<2 * this.numberOfPoints; i = i + 2) {

          vertex(this.innerRadius * cos(i * this.theta)     , this.innerRadius * sin(i * this.theta));

          vertex(this.outerRadius * cos((i + 1) * this.theta) , this.outerRadius * sin((i + 1) * this.theta));

        }

        vertex(this.innerRadius, 0);

        vertex(0, 0);

      endShape();

    pop();

  }

}

​