【p5.js】noise

sketch.js

let noise;

function preload() {
  noise = loadShader('shader.vert', 'shader.frag');
}

function setup() {
  createCanvas(400, 400, WEBGL);
  noStroke();
  frameRate(30)
  createLoop(1, {gif: {render: false, download: true, fileName: 'noise.gif'}});
}

function draw() {
  shader(noise);
  noise.setUniform('resolution', [width, height]);
  let t = frameCount / 60;
  noise.setUniform('u_noise', random(t));
  quad(-1, -1, -1, 1, 1, 1, 1, -1);
  resetShader();
}

shader.vert

precision highp float;

attribute vec3 aPosition;

void main() {
  vec4 positionVec4 = vec4(aPosition, 1.0);

  gl_Position = positionVec4;
}

shader.frag

precision highp float;

varying vec2 vTexCoord;

uniform vec2 resolution;
uniform float u_noise;

float random(vec2 uv) {
  return fract(sin(dot(uv.xy, vec2(12.9898,78.233)))* 43758.5453);
}

void main() {
  vec2 uv = floor(gl_FragCoord.xy / (resolution * 2.0 / 200.0));
  float rnd = random(uv*u_noise);  

  gl_FragColor = vec4(vec3(rnd), 1.0);
}