Fix Loading Images example with local asset, fix Rotate Push Pop lighting

pepc84 · pepc84 · commit f09741b4e0d5 · 2026-06-14T19:39:50.000-07:00
diff --git a/assets/data/processing-web.png b/assets/data/processing-web.png
diff --git a/assets/examples_js/Basics/transform/Rotate_Push_Pop/Rotate_Push_Pop.js b/assets/examples_js/Basics/transform/Rotate_Push_Pop/Rotate_Push_Pop.js
@@ -1,17 +1,23 @@
 let a = 0;
-let offset = PI / 24.0;
+let offset;
 let num = 12;
 
 function setup() {
   createCanvas(640, 360, WEBGL);
   noStroke();
+  offset = PI / 24.0;
 }
 
 function draw() {
   background(0, 0, 26);
+  ambientLight(150);
+  directionalLight(255, 255, 255, 0, 0, -1);
+  directionalLight(100, 100, 100, 0, 0, 1);
+
   for (let i = 0; i < num; i++) {
+    let gray = map(i, 0, num - 1, 0, 255);
     push();
-    normalMaterial();
+    fill(gray);
     rotateY(a + offset * i);
     rotateX(a / 2 + offset * i);
     box(90);
diff --git a/assets/examples_js/Basics/web/Loading_Images/Loading_Images.js b/assets/examples_js/Basics/web/Loading_Images/Loading_Images.js
@@ -1,16 +1,16 @@
 let img;
 
+function preload() {
+  img = loadImage('https://processing-cpp.github.io/assets/data/processing-web.png');
+}
+
 function setup() {
   createCanvas(640, 360);
-
-  img = loadImage("https://processing.org/img/processing-web.png");
-
   noLoop();
 }
 
 function draw() {
   background(0);
-
   if (img) {
     for (let i = 0; i < 5; i++) {
       image(img, 0, img.height * i);
diff --git a/examples/loading-images.html b/examples/loading-images.html
@@ -67,17 +67,17 @@ <h1>Loading Images</h1>
     <div class="preview-wrap"><iframe id="sketch-frame" width="640" height="360"></iframe></div>
 <script>(function(){const iframe=document.getElementById('sketch-frame');const doc=iframe.contentDocument||iframe.contentWindow.document;doc.open();doc.write(`<!DOCTYPE html><html><head><style>*{margin:0;padding:0;}body{overflow:hidden;}</style><script src="https://cdnjs.cloudflare.com/ajax/libs/p5.js/1.9.0/p5.min.js"><\/script></head><body><script>let img;
 
+function preload() {
+  img = loadImage("https://processing-cpp.github.io/assets/data/https://processing-cpp.github.io/assets/data/processing-web.png");
+}
+
 function setup() {
   createCanvas(640, 360);
-
-  img = loadImage("https://processing-cpp.github.io/assets/data/https://processing.org/img/processing-web.png");
-
   noLoop();
 }
 
 function draw() {
   background(0);
-
   if (img) {
     for (let i = 0; i < 5; i++) {
       image(img, 0, img.height * i);
diff --git a/examples/rotate-push-pop.html b/examples/rotate-push-pop.html
@@ -66,19 +66,25 @@
     <h1>Rotate Push Pop</h1>
     <div class="preview-wrap"><iframe id="sketch-frame" width="640" height="360"></iframe></div>
 <script>(function(){const iframe=document.getElementById('sketch-frame');const doc=iframe.contentDocument||iframe.contentWindow.document;doc.open();doc.write(`<!DOCTYPE html><html><head><style>*{margin:0;padding:0;}body{overflow:hidden;}</style><script src="https://cdnjs.cloudflare.com/ajax/libs/p5.js/1.9.0/p5.min.js"><\/script></head><body><script>let a = 0;
-let offset = PI / 24.0;
+let offset;
 let num = 12;
 
 function setup() {
   createCanvas(640, 360, WEBGL);
   noStroke();
+  offset = PI / 24.0;
 }
 
 function draw() {
   background(0, 0, 26);
+  ambientLight(150);
+  directionalLight(255, 255, 255, 0, 0, -1);
+  directionalLight(100, 100, 100, 0, 0, 1);
+
   for (let i = 0; i < num; i++) {
+    let gray = map(i, 0, num - 1, 0, 255);
     push();
-    normalMaterial();
+    fill(gray);
     rotateY(a + offset * i);
     rotateX(a / 2 + offset * i);
     box(90);
