// WAVE-Y HONK

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

// Theme: Textile

​

const WAVE_SIZE = 0.05;

​

const WAVE_X = 1;

const WAVE_Y = 1;

​

const WAVE_RATE = 1 / 8;

const WAVE_X_RATE = 1 / 21; 

const WAVE_Y_RATE = 1 / 13;

​

const COLOR_RANGE_WAVE = 0.5;

const COLOR_RANGE_Y = 0.25;

​

function setup() {

  createCanvas(400, 400);

  windowResized();

  colorMode(RGB, 1);

}

​

function windowResized() {

  resizeCanvas(windowWidth, windowHeight);

}

​

let t;

function draw() {

  const size = min(width, height);

​

  t = millis() / 1000;

  background(0);

  stroke(1);

  strokeWeight(5);

  noFill();

​

  // zoom out

  translate(0.125 * width, 0.125 * height);

  scale(0.75, 0.75);

  // center

  translate(-(size - width) / 2, -(size - height) / 2);

​

  const w = 15;

  const h = 15;

  const stepX = 1 / (w - 1);

  const stepY = 1 / (h - 1);

​

  // vertical lines

  for (let x=0; x<w; x++) {    

    for (let y=0; y<h-1; y++) {

      let fx = x / (w - 1);

      let fy = y / (h - 1);

​

      let yMid = fy + stepY * 0.5;

      setStrokeColor(fx, yMid + wave(fx, yMid));

      let top = fy + wave(fx, fy);

      let bottom = fy + stepY + wave(fx, fy + stepY);          

      line(fx * size, top * size, fx * size, bottom * size);

    }

  }

  // horizontal waves

  for (let y=0; y<h; y++) {

    for (let x=0; x<w-1; x++) {

      let fx = x / (w - 1);

      let fy = y / (h - 1);

      let xMid = fx + stepX * 0.5;

      setStrokeColor(xMid, fy + wave(xMid, fy));

      let x1 = fx + stepX * -1;

      let x2 = fx + stepX * 0;

      let x3 = fx + stepX * 1;

      let x4 = fx + stepX * 2;

      curve(

        x1 * size, (fy + wave(x1, fy)) * size, 

        x2 * size, (fy + wave(x2, fy)) * size, 

        x3 * size, (fy + wave(x3, fy)) * size, 

        x4 * size, (fy + wave(x4, fy)) * size

      );

    }

  } 

}

​

function setStrokeColor(x, y) {

  const v = cosn(lerp(

    y * COLOR_RANGE_Y,

    (wave(x, y) / WAVE_SIZE) * COLOR_RANGE_WAVE,  

    pow(cosn(t * WAVE_RATE), 0.5)

  ));

  // heatmapGradient: https://www.shadertoy.com/view/4dsSzr 

  // thx frozax!

  let coef = pow(v, 1.5) * 1 + 0.2;

  let r = smoothstep(0, 0.35, v) + v * 0.5;

  let g = smoothstep(0.5, 1.0, v);

  let b = max(1 - v*1.7, v*7 - 6);

​

  stroke(

      constrain(r*coef, 0, 1),

      constrain(g*coef, 0, 1),

      constrain(b*coef, 0, 1)

  );

}

​

function wave(x, y) {

 return WAVE_SIZE * cos(TAU * (

     x * WAVE_X * cos(TAU * t * WAVE_X_RATE) +  

     y * WAVE_Y * cos(TAU * t * WAVE_Y_RATE) +

     t

  )) * cosn(t * WAVE_RATE);

}

​

function cosn(v) {

  return cos(v * TAU) / 2 + 0.5;

}

​

function smoothstep(edge0, edge1, x) {

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

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

}