SHUTTLE !

// For curation "Streaming Backgrounds" by Raphaël de Courville

​

// modify this to change speed, (0 => 0.1) <--> (slow => fast)

let v = 0.001;

​

let theShader;

let WebGL;

let Canvas;

let img;

let delta = 0;

let random_seed;

​

function preload(){

  theShader = new p5.Shader(this.renderer, vert, frag);

}

​

function setup() {

  //createCanvas(1024, 576);

  createCanvas(windowWidth, windowHeight);

  pixelDensity(1);

  WebGL = createGraphics(width, height, WEBGL);

  Canvas = createGraphics(width, height);

  random_seed = random(0, 30);

  Canvas.background(0);

  let step = 0;

  for (let y = 2.5; y < height; y += 5) {

    for (let x = 2.5; x < width; x += 5) {

      Canvas.noStroke();

      Canvas.rectMode(CENTER);

      if (random(0,1) < 0.01) { Canvas.fill(255, 0, 0); }

      else { Canvas.fill( random(255) ); }

      Canvas.rect(x, y, Canvas.noise(step)*5);

      step += 0.08;

    }

  }

}

​

function draw() {

  delta += v;

  WebGL.shader(theShader);

  initUniforms();

  WebGL.rect(0, 0, width, height);

  image(WebGL, 0, 0);

​

}

​

function initUniforms() {

  theShader.setUniform('iResolution', [width, height]);

  theShader.setUniform('iPixelDensity', pixelDensity());

  theShader.setUniform('iCanvas', Canvas);

  theShader.setUniform('iImage', img);

  theShader.setUniform('iMouse', [mouseX, mouseY]);

  theShader.setUniform('iTime', frameCount);

  theShader.setUniform('iDelta', delta);

  theShader.setUniform('iRandomSeed', random_seed);

}