200322

let sh;

let url = "https://coolors.co/app/f7e6e1-ad9ba6-9a95a0-e4e2e1-616572";

let cols;

let graphics;

​

function setup() {

  createCanvas(windowWidth, windowHeight, WEBGL);

  //shader

  sh = createShader(vert,frag);

  this.shader(sh);

  sh.setUniform("u_resolution", [width,height]);

  sh.setUniform("u_lightDir", [0,1,-0.5]);

  //setting

  noStroke();

  pixelDensity(2);

  cols = createCols(url);

  //bgnoise

  graphics = createGraphics(width, height);

  graphics.colorMode(HSB, 360, 100, 100, 100);

  drawNoiseBackground(15, graphics);

  imageMode(CENTER);

}

​

function draw() {

  background(cols[1]);

  setCol(sh,"u_col",cols[0]);

  let step = width/50;

  for(let x = -width/2; x < width/2; x += step)

  {

    let angle = x/step/10 + frameCount/50;

    let size = height/3;

    push();

    translate(x,sin(angle)*100,0);

    rotateX(angle);

    box(step*0.8,size,size);

    pop();

  }

  image(graphics, 0, 0);

​

}

​

​

function setCol(shader,uniformName,colStr)

{

  let col = color(colStr);

  let colArray = col._array;

  colArray.pop();

  shader.setUniform(uniformName,colArray);

}

​

function createCols(_url) {

  let slash_index = _url.lastIndexOf('/');

  let pallate_str = _url.slice(slash_index + 1);

  let arr = pallate_str.split('-');

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

    arr[i] = '#' + arr[i];

  }

  return arr;

}

​

​

function drawNoiseBackground(_n, _graphics) {

  let c = color(0, 0, 100, 5);

  for (let i = 0; i < width * height * _n/100; i++) {

    let x = random(1) * width;

    let y = random(1) * height;

    let w = random(1, 3);

    let h = random(1, 3);

    _graphics.noStroke();

    _graphics.fill(c);

    _graphics.ellipse(x, y, w, h);

  }

}

​

​