let palette = ["#ff71ce", "#01cdfe", "#05ffa1", "#b967ff", "#fffb96"];

let bg;

let fg;

const Y_AXIS = 1;

const X_AXIS = 2;

​

let img;

​

function setup() {

  createCanvas(1000, 1000, WEBGL);

  img = createImage(width,height);

  hw = width / 2;

  hh = height / 2;

​

  let bgidx = int(random(palette.length));

  bg = palette[bgidx];

  palette.splice(bgidx, 1);

  let fgidx = int(random(palette.length));

  fg = palette[fgidx];

  palette.splice(fgidx, 1);

​

  noiseDetail(8, 0.75);

  gfx = createGraphics(width, height, WEBGL);

  // gfx.background(color(bg));

  // bg

  gfx.translate(-hw, -hh);

  setGradient(0,0,width,height,color(bg),color(random(palette)), Y_AXIS, gfx);

​

  // grid

  let cellsize = width * 0.01;

  let c = color(random(palette));

  c.setAlpha(180);

  gfx.stroke(c);

  for (let y = cellsize; y < height; y += cellsize) {

    gfx.line(0, y,width,y);

  }

  for (let x = cellsize; x < width; x += cellsize) {

    gfx.line(x,0,x,height);

  }

  // columns

  let nc = width/cellsize;

  for (let c = 0; c < nc; c++) {

    if (random() > 0.7) {

      let cells_high = int(random(2,nc));

      let x = c * cellsize;

      let y = height-cellsize;

      gfx.noStroke();

      gfx.fill(color(random(palette)));

      for (let r = 0; r < cells_high; r++) {

        // console.log(x,y,cellsize);

        gfx.push();

        gfx.translate(x,y);

        gfx.box(cellsize);

        // gfx.rect(x,y,cellsize,cellsize);

        gfx.pop();

        y -= cellsize;

      }

      gfx.push();

      let r = random(cellsize,cellsize*4);

      gfx.translate(x,y-(r*0.8));

      gfx.noFill();

      gfx.stroke(color(random(palette)));

      gfx.sphere(r);

      gfx.pop();

    }

  }

​

  // sphere

  gfx.push();

  gfx.translate(hw/2,hh/2);

  gfx.stroke(color(fg))

   c = color(random(palette));

  c.setAlpha(180);

  gfx.fill(c);

  //gfx.translate(hw,hh);

  gfx.sphere(hw / 4);

  gfx.pop();

  img.copy(gfx,0,0,-hw,-hh,0,0,width,height);

  image(img,-hw,-hh)

}

​

let step = 0;

function draw() {

  if (frameCount % 10 == 0) {

    tint(255,80)

  image(img, -hw+random(-20,20), -hh+random(-20,20));  

  }

}

​

function setGradient(x, y, w, h, c1, c2, axis, g) {

  g.noFill();

​

  if (axis === Y_AXIS) {

    // Top to bottom gradient

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

      let inter = map(i, y, y + h, 0, 1);

      let c = lerpColor(c1, c2, inter);

      g.stroke(c);

      g.line(x, i, x + w, i);

    }

  } else if (axis === X_AXIS) {

    // Left to right gradient

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

      let inter = map(i, x, x + w, 0, 1);

      let c = lerpColor(c1, c2, inter);

      g.stroke(c);

      g.line(i, y, i, y + h);

    }

  }

}