Misc WebGL Example Fixes

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/00_geometries.js

@@ -1,61 +1,74 @@
 /*
  * @name Geometries
- * @arialabel Six 3D shapes in neon gradient rotating on a white background. Shapes include cube, cylinder, ring, pyramid, sphere, and a plane.
- * @description There are six 3D primitives in p5 now.
+ * @arialabel Seven 3D shapes in neon gradient rotating on a white background. Shapes include cube, cylinder, ring, pyramid, sphere, plane, and ellipsoid.
+ * @description There are seven 3D primitives in p5 now.
  */
+
 function setup() {
   createCanvas(710, 400, WEBGL);
+
+  describe(
+    'a 3d example containing seven primitive objects, a plane, box, cylinder, cone, torus, sphere, and ellipsoid.'
+  );
 }
 
 function draw() {
   background(250);
 
-  translate(-240, -100, 0);
   normalMaterial();
   push();
+  translate(-240, -100, 0);
   rotateZ(frameCount * 0.01);
   rotateX(frameCount * 0.01);
   rotateY(frameCount * 0.01);
   plane(70);
   pop();
 
-  translate(240, 0, 0);
   push();
+  translate(0, -100, 0);
   rotateZ(frameCount * 0.01);
   rotateX(frameCount * 0.01);
   rotateY(frameCount * 0.01);
   box(70, 70, 70);
   pop();
 
-  translate(240, 0, 0);
   push();
+  translate(240, -100, 0);
   rotateZ(frameCount * 0.01);
   rotateX(frameCount * 0.01);
   rotateY(frameCount * 0.01);
   cylinder(70, 70);
   pop();
 
-  translate(-240 * 2, 200, 0);
   push();
+  translate(-250, 100, 0);
+  rotateZ(frameCount * 0.01);
+  rotateX(frameCount * 0.01);
+  rotateY(frameCount * 0.01);
+  cone(50, 70);
+  pop();
+
+  push();
+  translate(-75, 100, 0);  
   rotateZ(frameCount * 0.01);
   rotateX(frameCount * 0.01);
   rotateY(frameCount * 0.01);
-  cone(70, 70);
+  torus(50, 20);
   pop();
 
-  translate(240, 0, 0);
   push();
+  translate(100, 100, 0);
   rotateZ(frameCount * 0.01);
   rotateX(frameCount * 0.01);
   rotateY(frameCount * 0.01);
-  torus(70, 20);
+  sphere(50);
   pop();
 
-  translate(240, 0, 0);
   push();
+  translate(275, 100, 0);
   rotateZ(frameCount * 0.01);
   rotateX(frameCount * 0.01);
   rotateY(frameCount * 0.01);
-  sphere(70);
+  ellipsoid(30, 40, 40);
   pop();
 }

src/data/examples/en/20_3D/02_multiple_lights.js

@@ -5,6 +5,10 @@
  */
 function setup() {
   createCanvas(710, 400, WEBGL);
+
+  describe(
+    'a 3d example containing a spinning box and a sphere, each lit with a number of different lights, including ambient (gray), directional (red), spotlight (green), and point (blue).'
+  );
 }
 
 function draw() {
@@ -13,8 +17,13 @@ function draw() {
   let locX = mouseX - height / 2;
   let locY = mouseY - width / 2;
 
+  // ambient light is gray
   ambientLight(50);
+  // directional light is red
   directionalLight(255, 0, 0, 0.25, 0.25, 0);
+  // spotlight is green
+  spotLight(0, 255, 0, 150, 0, 250, 0, 0, -1);
+  // point light is blue
   pointLight(0, 0, 255, locX, locY, 250);
 
   push();
@@ -27,5 +36,5 @@ function draw() {
 
   translate(width / 4, 0, 0);
   ambientMaterial(250);
-  sphere(120, 64);
+  sphere(120, 24);
 }

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

@@ -17,15 +17,18 @@
    // 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('resolution', [width * displayDensity(), height * displayDensity()]);
    theShader.setUniform('mouse', map(mouseX, 0, width, 0, 7));
    theShader.setUniform('time', frameCount * 0.01);