let squares;

let colors;

let o;

let gfx;

​

function setup() {

  createCanvas(1000, 1000);

  pixelDensity(1);

  gfx = createCanvas(width,height);

  background(40);

​

  o = width * 0.1;

​

  let miradors = [

    color("#020202"),

    color("#ff6936"),

    color("#fddc3f"),

    color("#0075ca"),

    color("#03bb70"),

  ];

  //https://www.colourlovers.com/palette/4849017/1

  let muted = [

    color("#769174"),

    color("#E0E1E5"),

    color("#A4BEDB"),

    color("#676F75"),

    color("#D49266"),

  ];

  let powerpuff = [

    color("#201010"),

    color("#5dece1"),

    color("#ea50c4"),

    color("#47e752"),

    color("#130d0d"),

  ];

​

  let butterfly = [

    color("#191e36"),

    color("#f40104"),

    color("#f6c0b3"),

    color("#99673a"),

    color("#f0f1f4"),

  ];

​

  let cc239 = [

    color("#e0eff0"),

    color("#e3dd34"),

    color("#78496b"),

    color("#f0527f"),

    color("#a7e0e2"),

  ];

  let monochrome_palette = [

    color(random(0, 255)),

    color(random(0, 255)),

    color(random(0, 255)),

    color(random(0, 255)),

    color(random(0, 255)),

    color(random(0, 255)),

    color(random(0, 255)),

    color(random(0, 255)),

    color(random(0, 255)),

    color(random(0, 255)),

  ];

  colors = random([

    miradors,

    muted,

    powerpuff,

    butterfly,

    cc239,

    monochrome_palette,

  ]);

​

  squares = [];

  let timer_off = 5;

  let t = 5;

  for (let w = off; w < width; w += off) {

    squares.push({

      rotate: random([true, false]),

      r: 0,

      w: w,

      colorIndex: 0,

      orig_timer: t,

      timer: t,

      square: true,

    });

    t += timer_off;

  }

​

  fill_colors = [color(0, 255, 0, 40), color(0, 0, 0, 40)];

  frameRate(60);

  // super glitch if we do this

  gfx.fill(color(20));

  // gfx.noStroke();

  gfx.rect(0, 0, width, o);

  gfx.rect(0, 0, o, height);

  gfx.rect(width - o, 0, o, height);

  gfx.rect(0, height - o, width, o);

}

​

let wipe_y = 0;

let wipe_spd = 5;

let fill_colors;

let fill_color_index = 0;

function draw() {

  noFill();

  translate(width / 2, height / 2);

​

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

    let s = squares[i];

    stroke(colors[s.colorIndex]);

    if (s.square) {

      if (s.rotate) {

        rotate(s.r);

        s.r++;

      }

      square(-s.w / 2, -s.w / 2, s.w);

    } else circle(0, 0, s.w);

​

    s.timer--;

    if (s.timer <= 0) {

      s.timer = s.orig_timer;

      s.colorIndex++;

      if (s.colorIndex > colors.length - 1) {

        s.colorIndex = 0;

        s.square = !s.square;

      }

    }

  }

​

  push();

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

  fill(fill_colors[fill_color_index]);

  noStroke();

  rect(0, wipe_y, width, 20);

  wipe_y += wipe_spd;

  if (wipe_y > height) {

    wipe_y = 0;

    fill_color_index++;

    if (fill_color_index > fill_colors.length - 1) fill_color_index = 0;

  }

    // super glitch if we do this

  // image(gfx,0,0);

  // background(220);

  fill(color(20));

  noStroke();

  rect(0, 0, width, o);

  rect(0, 0, o, height);

  rect(width - o, 0, o, height);

  rect(0, height - o, width, o);

​

  pop();

​

​

}

​

function drawShadow(b, g) {

  if (g == null) {

    if (b == 0) {

      drawingContext.shadowOffsetX = 0;

      drawingContext.shadowOffsetY = 0;

      drawingContext.shadowBlur = 0;

      drawingContext.shadowColor = color(0); //"black";

    } else {

      let off = 3;

      let off2 = 0;

      let col = 0;

      if (!window.$fxhashFeatures["Jittery"]) {

        off = getRandomFloat(-1, 1);

        off2 = getRandomFloat(-1, 1);

        // col = getRandomInt(0,50);

      }

      drawingContext.shadowOffsetX = off;

      drawingContext.shadowOffsetY = off;

      drawingContext.shadowBlur = b + off2;

      drawingContext.shadowColor = color(col); //"black";

    }

  } else {

    if (b == 0) {

      g.drawingContext.shadowOffsetX = 0;

      g.drawingContext.shadowOffsetY = 0;

      g.drawingContext.shadowBlur = 0;

      g.drawingContext.shadowColor = color(0); //"black";

    } else {

      g.drawingContext.shadowOffsetX = 3;

      g.drawingContext.shadowOffsetY = 3;

      g.drawingContext.shadowBlur = b;

      g.drawingContext.shadowColor = color(0); //"black";

    }

  }

}

​