shufflin'

// #WCCChallenge, good vibrations theme

// started with vaporwave on the brain and wanting to just play around with math

// ended up with these cute lil buddies

// https://twitter.com/metanivek

// https://www.instagram.com/metanivek/

let colors, buddies;

let tempo = 1;

const alpha = 1;

const n = 24;

let xInc, yInc;

​

function assembleBuddies() {

  xInc = round(width / n);

  yInc = round(height / n);

​

  const size = xInc * 0.5;

  const depth = 2 * (width / 1024);

  const w = size;

  const h = size * 4 / 3;

  const r = size / 4;

  buddies = [];

  for (let i = 0; i < colors.length; i++) {

    const c = colors[i];

    const b = createGraphics(w + depth * 2, h + depth * 2);

​

    b.fill(c);

    b.stroke(color(hue(c), 100, 25, alpha));

    b.strokeWeight(depth);

    b.rect(depth, depth, w, h, r);

    b.strokeWeight(depth / 2);

    b.rect(depth / 2, depth / 2, w, h, r);

    for (var l = 0.33; l <= 0.66; l += 0.33) {

      b.strokeWeight(depth);

      const lx = l * w;

      const yoff = h * 0.3;

      b.line(lx, yoff, lx, yoff + h * 0.1);

    }

    const m = h * 0.2;

    b.line(m * 1.5, h - m, w - m * 1.5, h - m);

    buddies.push(b);

  }

}

​

function setup() {

  createCanvas(windowWidth, windowHeight);

  frameRate(30);

  colorMode(HSB, 360, 100, 100);

  colors = [color(321, 56, 100, alpha),

    color(192, 100, 100, alpha),

    color(157, 98, 100, alpha),

    color(272, 60, 100, alpha),

    color(58, 41, 100, alpha),

  ];

  assembleBuddies();

}

​

function draw() {

  background(0, 0, 98);

  noStroke();

​

  const t = radians(frameCount);

  const noize = noise(t * 0.5);

​

  const dotSize = map(noize, 0, 1, 2, 8);

  for (let x = 0; x <= width + xInc; x += xInc) {

    for (let y = 0; y <= height + yInc; y += yInc) {

      fill(colors[int(x ^ y) % colors.length]);

      ellipse(x, y, dotSize, dotSize);

    }

  }

​

  // just messing with math

  const f = (v, n) => {

    if (n <= 0) return v;

    v = (sin(v) * cos(v) * cos(v));

    return f(v, --n);

  }

​

  translate(0, height / 2);

  for (let i = 0; i < 2; i++) {

    for (let x = xInc; x <= width - xInc; x += xInc) {

      for (let y = 0; y <= height + yInc; y += yInc) {

        const d = dist(x, y, width / 2, height / 2);

        if ((d > width * 0.2 && d < width * 0.3)) {

          const buddy = buddies[int(d) % buddies.length];

          // magic numbers!

          const px = x + (f(cos(t) + x * d * y * d, 5) * xInc);

          const yFactor = map(noize, 0, 1, 1, 4);

          const py = y * f(sin(tempo * (t * (i + 1)) + 10 * d / width), 20) * yFactor;

          image(buddy, px, py);

        }

      }

    }

​

  }

}

​

function windowResized() {

  resizeCanvas(windowWidth, windowHeight);

  assembleBuddies();

}

mousePressed = () => tempo = (tempo + 1) % 10 + 1;