dynamic update

let buf;

let displayShader;

​

const TEX_SIZE = 100;

const NUM = TEX_SIZE*TEX_SIZE;

​

const positions = new Float32Array(2*NUM);

​

const displayVS =

`#version 300 es

in vec2 aPosition;

void main(){

  gl_Position = vec4(aPosition, 0.0, 1.0);

  gl_PointSize = 4.0;

}

`;

​

const displayFS =

`#version 300 es

precision highp float;

out vec4 color;

void main(){

  color = vec4(0.3, 0.5, 0.7, 1.0);

}

`;

​

function setup() {

  createCanvas(800, 800, WEBGL);

  pixelDensity(1);

​

  const _gl = this._renderer;

  const gl = _gl.GL;

  buf = gl.createBuffer();

​

  for(let k=0; k<NUM; k++){

    const x = ((k%TEX_SIZE))/TEX_SIZE;

    const y = floor(k/TEX_SIZE)/TEX_SIZE;

    positions[2*k] = x*2-1;

    positions[2*k+1] = y*2-1;

  }

​

  gl.bindBuffer(gl.ARRAY_BUFFER, buf);

  gl.bufferData(gl.ARRAY_BUFFER, positions, gl.DYNAMIC_DRAW);

  gl.bindBuffer(gl.ARRAY_BUFFER, null);

​

  displayShader = createShader(displayVS, displayFS);

}

​

function draw() {

  background(0);

​

  const _gl = this._renderer;

  const gl = _gl.GL;

​

  dynamicUpdate();

​

  shader(displayShader);

​

  gl.bindBuffer(gl.ARRAY_BUFFER, buf);

  displayShader.enableAttrib(displayShader.attributes.aPosition, 2);

​

  _gl._setPointUniforms(displayShader);

​

  gl.enable(gl.BLEND);

  gl.blendFunc(gl.ONE, gl.ONE); 

  displayShader.bindTextures();

  gl.drawArrays(gl.POINTS, 0, TEX_SIZE*TEX_SIZE);

  displayShader.unbindShader();

  gl.disable(gl.BLEND);

  gl.flush();

  if(frameCount%10===0)console.log(frameRate());

}

​

function dynamicUpdate(){

​

  const _gl = this._renderer;

  const gl = _gl.GL;

​

  for(let k=0; k<NUM; k++){

    const x = ((k%TEX_SIZE))/TEX_SIZE;

    const y = floor(k/TEX_SIZE)/TEX_SIZE;

    const radius = 0.2*noise(0,0,k);

    const t = millis()/(500+1000*noise(k,k,k));

    positions[2*k] = (2*x-1) + radius*cos(noise(k,0)*100 + t);

    positions[2*k+1] = (2*y-1) + radius*sin(noise(0,k)*100 + t);

  }

  gl.bindBuffer(gl.ARRAY_BUFFER, buf);

  gl.bufferSubData(gl.ARRAY_BUFFER, 0, positions);

  gl.bindBuffer(gl.ARRAY_BUFFER, null);

}