Fix Rotate Push Pop camera distance, fix Loading Images scaling and loading state

Author: pepc84

assets/examples_js/Basics/transform/Rotate_Push_Pop/Rotate_Push_Pop.js

@@ -14,13 +14,16 @@ function draw() {
   directionalLight(255, 255, 255, 0, 0, -1);
   directionalLight(100, 100, 100, 0, 0, 1);
 
+  // Move camera closer — default WEBGL camera is too far
+  translate(0, 0, 150);
+
   for (let i = 0; i < num; i++) {
     let gray = map(i, 0, num - 1, 0, 255);
     push();
     fill(gray);
     rotateY(a + offset * i);
     rotateX(a / 2 + offset * i);
-    box(90);
+    box(150);
     pop();
   }
   a += 0.01;

assets/examples_js/Basics/web/Loading_Images/Loading_Images.js

@@ -6,14 +6,19 @@ function preload() {
 
 function setup() {
   createCanvas(640, 360);
-  noLoop();
 }
 
 function draw() {
   background(0);
-  if (img) {
+  if (img && img.width > 0) {
+    let h = img.height * (640 / img.width); // scale to fit width
     for (let i = 0; i < 5; i++) {
-      image(img, 0, img.height * i);
+      image(img, 0, h * i, 640, h);
     }
+  } else {
+    fill(255);
+    textAlign(CENTER);
+    textSize(14);
+    text('Loading...', width/2, height/2);
   }
 }

examples/loading-images.html

@@ -73,15 +73,20 @@ <h1>Loading Images</h1>
 
 function setup() {
   createCanvas(640, 360);
-  noLoop();
 }
 
 function draw() {
   background(0);
-  if (img) {
+  if (img && img.width > 0) {
+    let h = img.height * (640 / img.width); // scale to fit width
     for (let i = 0; i < 5; i++) {
-      image(img, 0, img.height * i);
+      image(img, 0, h * i, 640, h);
     }
+  } else {
+    fill(255);
+    textAlign(CENTER);
+    textSize(14);
+    text('Loading...', width/2, height/2);
   }
 }<\/script></body></html>`);doc.close();})();</script>
     <div class="code-block">

examples/rotate-push-pop.html

@@ -81,13 +81,16 @@ <h1>Rotate Push Pop</h1>
   directionalLight(255, 255, 255, 0, 0, -1);
   directionalLight(100, 100, 100, 0, 0, 1);
 
+  // Move camera closer — default WEBGL camera is too far
+  translate(0, 0, 150);
+
   for (let i = 0; i < num; i++) {
     let gray = map(i, 0, num - 1, 0, 255);
     push();
     fill(gray);
     rotateY(a + offset * i);
     rotateX(a / 2 + offset * i);
-    box(90);
+    box(150);
     pop();
   }
   a += 0.01;