Polygon Illusion

// Styled specifically after this piece:

// https://www.agefotostock.com/age/en/details-illustration/hexagon-gradation-optical-illusion-background/ESY-029915526

// Original Artist Credited: VectaRay

​

let points = 6;

let slider_A;

let slider_B;

let slider_C;

let slider_D;

let step = 0;

let step2 = 0;

​

function setup() {

  createCanvas(windowWidth, windowHeight);

  colorMode(HSB, 100);

  // Setup Sliders

  slider_A = createSlider(3, 20, 3);

  slider_A.position(5, 5);

  slider_A.style('width', '100px');

  slider_B = createSlider(1, 1000, 250);

  slider_B.position(5, 25);

  slider_B.style('width', '100px');

}

​

function draw() {

  // Fetch from sliders

  //print(slider_B.value());

  background("darkGray");

  translate(windowWidth/2, windowHeight/2);

  noFill();

  strokeWeight(7*cos(step)+13);

  for (i = 5; i < slider_B.value(); i+=5){

    push();

    if (i%10 == 0)  stroke("black");

    else            stroke("white");

    beginShape();

    for (let a = 0; a < TWO_PI; a += TWO_PI/slider_A.value()) {

      let sx = cos(a) * i;

      let sy = sin(a) * i;

      vertex(sx, sy);

    }

    endShape(CLOSE);

    pop();

    rotate(PI/(50*cos(step2)+50));

  }

  step += 0.2

  step2 += 0.01

}