Branching

// Hello Raphaël,

//

// first of all, the interesting thing about this script is that it renders the shader with full pixel density,

// i.e. the screen dimensions are multiplied by the 'devicePixelRatio' factor.

// You still need to call the 'pixelDensity(1)' function (it's a hack, tbh).

// 

// The shader itself represents branches without branching. There are no conditionals. Or maybe there are?

// Ok, the function 'abs(x)' can be rewritten as max(x,-x) and max(a,b) can be rewritten as if (a > b) return a; else return b;

// So there you have it - branching. But not explicitly. ;-)

​

let theShader, dpr = window.devicePixelRatio, ww = window.innerWidth*dpr, wh = window.innerHeight*dpr;

const canvasStyle = 'width:100%;height:auto;touch-action:none;object-fit:contain;'

​

p5.RendererGL.prototype._initContext = function() {

  try { this.drawingContext = this.canvas.getContext('webgl2', this._pInst._glAttributes) ||

      this.canvas.getContext('experimental-webgl', this._pInst._glAttributes);

    if (this.drawingContext === null) { throw new Error('Error creating webgl context');

    } else { const gl = this.drawingContext; gl.enable(gl.DEPTH_TEST); gl.depthFunc(gl.LEQUAL);

      gl.viewport(0, 0, ww, wh);

      this._viewport = this.drawingContext.getParameter(this.drawingContext.VIEWPORT);

    } } catch (er) { throw er; }

};

​

function windowResized() {

  ww = window.innerWidth*dpr; wh = window.innerHeight*dpr;

  resizeCanvas(ww, wh);

  const canvas = document.querySelector('canvas');

  canvas.style = canvasStyle;

}

​

function preload(){

  theShader = loadShader('vert.glsl', 'frag.glsl');

}

​

function setup() {

  // disables scaling for retina screens which can create inconsistent scaling between displays

  pixelDensity(1);

  createCanvas(ww, wh, WEBGL);

  const canvas = document.querySelector('canvas');

  canvas.style = canvasStyle;

}

​

function draw() {

  // shader() sets the active shader with our shader

  shader(theShader);

​

  // here we're using setUniform() to send our uniform values to the shader

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

  theShader.setUniform("u_time", millis() / 1000.0);

​

  // rect gives us some geometry on the screen

  rect(0,0,width,height);

}

​