precision mediump float;

  uniform mat4 uModelViewMatrix;

  uniform mat4 uProjectionMatrix;

​

  in vec3 aPosition;

  in vec2 aOffset;

​

  void main(){

    vec4 positionVec4 = vec4(aPosition.xyz, 1.0);

    positionVec4.xy += aOffset;

    gl_Position = uProjectionMatrix * uModelViewMatrix * positionVec4;

  }

`;

​

const fragSrc = `#version 300 es

  precision mediump float;

  out vec4 outColor;

  void main(){

    outColor = vec4(0.0, 1.0, 1.0, 1.0);

  }

`;

​

function setup(){

  createCanvas(400, 400, WEBGL);

  vertexProperty = setAttribute;

  // Create and use the custom shader.

  const myShader = createShader(vertSrc, fragSrc);

  shader(myShader);

​

  describe('A wobbly, cyan circle on a gray background.');

}

​

let size = 100;

let detail = 10;

let noiseScale = 30;

​

function draw(){

  // Set the styles

  background(0, 100, 255);

  noStroke();

​

  // Draw the circle.

  beginShape();

  for (let i = 0; i < detail; i++){

    const x = size * cos(i/detail * TWO_PI);

    const y = size * sin(i/detail * TWO_PI);

​

    // Apply some noise to the coordinates.

    const xOff = noiseScale * noise(x + millis()*0.001) - noiseScale/2;

    const yOff = noiseScale * noise(y + millis()*0.001) - noiseScale/2;

​

    // Apply these noise values to the following vertex.

    vertexProperty('aOffset', [xOff, yOff]);

    vertex(x, y);

  }

  endShape(CLOSE);

}

​

​