A: 3, B: 11, Pen: 1,

  star: false,

  rollers: false,

  inner: false,

  outer: true,

  points: true,

  trail: 0,

  pause: true

}

​

let alpha_level = (n)=> 5*n*n - 70*n + 255;

​

let consts = {

  point_map: [],

  frame: 0,

  size: 400,

  level: alpha_level(controls.trail),

  ai: undefined,

  si: undefined,

  ri: undefined

}; consts.center    = consts.size/2;

   consts.zoom      = 0.45 * consts.size;

   consts.maxframes = consts.size;

​

function setup() {

  frameRate(60);

  createCanvas(consts.size, consts.size).parent("animation");

  background(240);

  draw_inputs();

  consts.ai = createGraphics(consts.size, consts.size);

  consts.si = createGraphics(consts.size, consts.size);

  consts.ri = createGraphics(consts.size, consts.size);

  consts.point_map = animation_map(controls.A, controls.B, -1, 

                     controls.Pen, consts.maxframes, consts.zoom);

  draw_star();

}

​

function draw_rollers(current) {

  consts.ri.clear().circle(consts.center, consts.center, 2*consts.zoom);

  consts.ri.fill(0, 10);

  for(let circ of current) {

    consts.ri.noStroke();

    consts.ri.circle(consts.center + circ.x, consts.center + circ.y, 

                    2 * circ.r);

  }

  image(consts.ri, 0, 0);

}

​

function draw_animation(current) {

  consts.ai.clear() .noFill() .strokeWeight(1);

  consts.ai.stroke('orangered');

  if(controls.inner) {

    for(let circ of current) {

      consts.ai.beginShape();

      for(let p of circ.pts) 

        consts.ai.vertex(consts.center + p.x, consts.center + p.y);

      consts.ai.endShape(CLOSE);

    }

  }

  if(controls.outer) {

    for(let i in current[0].pts) {

      consts.ai.beginShape();

      for(let c of current)  

        consts.ai.vertex(consts.center + c.pts[i].x, consts.center + c.pts[i].y);

      consts.ai.endShape(CLOSE);

    }

  }

  if(controls.points) {

    consts.ai.strokeWeight(4);

    for(let circ of current) {

      for(let p of circ.pts) consts.ai.point(consts.center + p.x, consts.center + p.y);

    }

  }

  image(consts.ai, 0, 0);

}

​

function draw_star() {

  if(controls.A < 1 || controls.A >= controls.B) return;

  consts.si.clear() .noFill() .stroke(100, 100, 255) .strokeWeight(0.2);  

  for(let path in consts.point_map[0][0].pts) {

    consts.si.beginShape();

    for(let p of consts.point_map)

      consts.si.vertex(consts.center + p[0].pts[path].x, 

                       consts.center + p[0].pts[path].y );

    consts.si.endShape(CLOSE);

  }

}

​

function draw() {

  background(255, consts.level);

  let current = consts.point_map[consts.frame];

  if(current) {

    if(controls.star)       image(consts.si, 0, 0);

    draw_animation(current);

    if(controls.rollers) draw_rollers(current);

    if(!controls.pause)

      consts.frame = (consts.frame + 1) % consts.maxframes;

  }  

}

​

​

​

​

​

​