// MINIMAL HONK

// Discord: https://discord.com/invite/hzsn3UHxbw

// Theme: Minimalism

​

const SHAPE_3_DIV = 2; // changes shape of 3rd pattern (>=1 recommended)

​

const FRAMES = 1500;

​

function setup() {

  createCanvas(400, 400);

  windowResized(); // use windowResized to setup canvas dimensions

​

  colorMode(RGB, 1);

}

​

function windowResized() {

  const size = min(windowWidth, windowHeight);

  resizeCanvas(size, size);

}

​

let stage = 0; // click mouse to switch stage

const stages = 3;

function mouseClicked() { 

  stage = (stage + 1) % stages;

}

​

let t;

function draw() {

  // stage = floor(millis() / 5000) % stages;

  const totalTime = FRAMES / (60 / 1000);

  t = fract(millis() / totalTime);

​

  background(0);

  strokeWeight(2);

  noFill();

​

  const dims = [

    15,

    25,

    9,

  ][stage];

  grid(0, 0, width, height, dims, dims, 0, 

    ({ left, top, right, bottom, w, h, centerX, centerY, i }) => {

      push();

      // COLOR GRADIENT

      stroke(lerpColor(

        color(1, 0.5, 0),

        color(0.5, 0, 1),

        (centerX + centerY) / (width + height)

      ));

​

​

      // CIRCULAR (LOOPING) NOISE + ROTATION

      let nX = left + cos(t * TAU);

      let nY = top  + sin(t * TAU);

      let rot = smoothstep(0.5, 0.55, noise(nX, nY)) * 0.25;

​

      translate(centerX, centerY);

      rotate(rot * TAU);

      translate(-centerX, -centerY);

​

      // SHAPE SELECTION

      let shape = [

        (centerX + centerY) / (width + height), // DIAGONAL

        1.5 * (createVector(width / 2 - centerX, height / 2 - centerY).mag() / width), // CIRCULAR

        (i % 2) / 2,

      ][stage];

      const shapeCount = [3, 3, 2][stage];

      let shapeIndex = min(floor(shape * shapeCount), shapeCount - 1)

        + [0, 0, 1][stage];

      switch(shapeIndex) {

        case 0:

          line(left, top + h / 2, left + w / 2, top + h);

          line(left + w / 2, top, left + w, top + h / 2);

          break;

        case 1:

          arc(left, top, w, h, 0 * TAU, 0.25 * TAU);

          arc(right, bottom, w, h, 0.5 * TAU, 0.75 * TAU);

          break;

​

        case 2:

          line(left, top + h / 2, left + w / SHAPE_3_DIV, bottom - w / SHAPE_3_DIV);

          line(left + w / SHAPE_3_DIV, bottom - w / SHAPE_3_DIV, left + w / 2, top + h);

​

          line(left + w / 2, top, right - w / SHAPE_3_DIV, top + h / SHAPE_3_DIV);

          line(right - w / SHAPE_3_DIV, top + h / SHAPE_3_DIV, right, top + h / 2);

          break;

      }

      pop();

    }

  );

}

​

function grid(x, y, width, height, rows, cols, padding, callback) {

  let i = 0;

​

  for (let _y = 0; _y < rows; _y++)

    for (let _x = 0; _x < cols; _x++) {

      let left = x + (_x / cols) * width + padding;

      let top = y + (_y / rows) * height + padding;

      let w = width / cols - padding * 2;

      let h = height / rows - padding * 2;

      let right = left + w;

      let bottom = top + h;

      let centerX = left + w / 2;

      let centerY = top + h / 2;

​

      callback({ left, top, right, bottom, w, h, centerX, centerY, i });

​

      i++;

    }

}

​

function smoothstep(edge0, edge1, x) {

  let t = constrain((x - edge0) / (edge1 - edge0), 0.0, 1.0);

  return t * t * (3.0 - 2.0 * t);

}

​