230616a

let palette = [

  "#FF5F5F",

  "#F8907C",

  "#FFC2A7",

  "#FFEC57",

  "#9EF2BB",

  "#6CBAF4",

  "#4AD0E8",

];

let target;

​

let freq = 300;

let R, s;

let hexagons;

let global_n = 0;

​

function setup() {

  createCanvas(windowWidth, windowHeight);

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

  angleMode(DEGREES);

  textAlign(CENTER, CENTER);

  R = min(width, height) / int(random(5, 15));

  s = sqrt((3 * sq(R)) / 4);

  hexagons = [];

  for (let y = -s; y < height + s; y += 2 * s) {

    for (let x = -s; x < width + R; x += 3 * R) {

      hexagons.push(new Hexagon(x, y, R));

      hexagons.push(new Hexagon(x + 1.5 * R, y + s, R));

    }

  }

}

​

function draw() {

  background(0, 0, 95);

  randomSeed(230617 + frameCount / freq);

​

  if (frameCount % freq == 0) {

    global_n += int(random(1, 7));

    R = min(width, height) / int(random(5, 15));

    s = sqrt((3 * sq(R)) / 4);

    hexagons = [];

​

    for (let y = -s; y < height + s; y += 2 * s) {

      for (let x = -s; x < width + R; x += 3 * R) {

        hexagons.push(new Hexagon(x, y, R));

        hexagons.push(new Hexagon(x + 1.5 * R, y + s, R));

      }

    }

  }

​

  let offset = width / 10;

​

  for (let h of hexagons) {

    h.render();

  }

  // noLoop();

}

​

class Hexagon {

  constructor(x, y, r) {

    this.x = x;

    this.y = y;

    this.r = r;

    this.t;

    this.colors = [

      shuffle(palette.concat()),

      shuffle(palette.concat()),

      shuffle(palette.concat()),

    ];

    this.limit = [

      int(random(2, this.colors[0].length)),

      int(random(2, this.colors[1].length)),

      int(random(2, this.colors[2].length)),

    ];

    this.dir = random() > 0.5 ? -1 : 1;

  }

​

  draw(x, y, r) {

    push();

    translate(x, y);

    rotate((int(random(6)) * 360) / 6 + this.t * 60 * this.dir);

    noStroke();

    stroke(0, 0, 0);

    fill(0, 0, 100);

    scale(this.t);

    push();

    let n = 0;

    for (let angle = 0; angle < 360; angle += 360 / 3) {

      push();

      fill(0, 0, 100);

      stroke(0, 0, 0);

      let m = 0;

      let sclStep = 1 / int(random(2, 8));

      for (let scl = 1; scl > 0; scl -= sclStep) {

        fill(this.colors[n][m++ % this.limit[n]]);

        arc(

          cos(angle + 60) * r,

          sin(angle + 60) * r,

          r * scl * sqrt(3),

          r * scl * sqrt(3),

          angle + 180 + this.t * 360,

          angle + 300 + this.t * 360,

          PIE

        );

      }

      n++;

      pop();

    }

    pop();

    pop();

  }

  render() {

    this.t = this.getTime(global_n % 7);

    this.t *= 0.5;

    this.t += (1 / freq) * (frameCount % freq) * 3;

    this.t = this.t % 3;

    this.t = constrain(abs(this.t - 1.5), 0, 1);

    this.t = sq(this.t);

    this.t = easeInOutCirc(1 - this.t);

​

    this.draw(this.x, this.y, this.r);

  }

  getTime(num) {

    let n;

    switch (num) {

      case 0:

        n =

          dist(this.x, this.y, width / 2, height / 2) /

          sqrt(sq(width) + sq(height));

        break;

      case 1:

        n = this.x / width;

        break;

      case 2:

        n = 1 - this.x / width;

        break;

      case 3:

        n = 1 - this.y / height;

        break;

      case 4:

        n = this.y / height;

        break;

      case 5:

        n = (this.x + this.y * width * 2) / (width * height);

        break;

      case 6:

        n = dist(mouseX, mouseY, this.x, this.y) / sqrt(sq(width) + sq(height));

        break;

    }

    return n;

  }

​

  get distanceToMouse() {

    return dist(mouseX, mouseY, this.x, this.y);

  }

}

​

function easeInOutCirc(x) {

  return x < 0.5

    ? (1 - Math.sqrt(1 - Math.pow(2 * x, 2))) / 2

    : (Math.sqrt(1 - Math.pow(-2 * x + 2, 2)) + 1) / 2;

}

​

function easeInOutElastic(x) {

  const c5 = (2 * Math.PI) / 4.5;

​

  return x === 0

    ? 0

    : x === 1

    ? 1

    : x < 0.5

    ? -(Math.pow(2, 20 * x - 10) * Math.sin((20 * x - 11.125) * c5)) / 2

    : (Math.pow(2, -20 * x + 10) * Math.sin((20 * x - 11.125) * c5)) / 2 + 1;

}

​

function windowResized() {

  resizeCanvas(windowWidth, windowHeight);

}

​