fixed issue where example graphic was positioned in the corner of the sketch. also added describe() and a small amount of text.

Author: aceslowman

src/data/examples/assets/uniforms.frag

@@ -54,7 +54,7 @@ vec4 poly(float x, float y, float size, float sides, float rotation, vec3 col){
 
 void main() {
 
-    vec2 center = resolution * 1.0; // draw the shape at the center of the screen
+    vec2 center = resolution * 0.5; // draw the shape at the center of the screen
     float size = resolution.y * 0.5; // make the shape a quarter of the screen height
     float sides = mod(floor(mouse), 7.0) + 3.0; // slowly increase the sides, when it reaches 10 sides, go back down to 3
     float rotation = time; // rotation is in radians, but for time it doesnt really matter

src/data/examples/en/20_3D/10_passing_shader_uniforms.js

@@ -17,13 +17,16 @@
    // shaders require WEBGL mode to work
    createCanvas(710, 400, WEBGL);
    noStroke();
+
+   describe('a 2d example containing a sage green polygon, rotating in the middle of the sketch. As the mouse moves horizontally, the number of sides for the polygon change.')
  }
 
  function draw() {
    // shader() sets the active shader with our shader
    shader(theShader);
 
    // lets send the resolution, mouse, and time to our shader
+   // the mouse x position will change the number of sides
    // before sending mouse + time we modify the data so it's more easily usable by the shader
    theShader.setUniform('resolution', [width, height]);
    theShader.setUniform('mouse', map(mouseX, 0, width, 0, 7));