Add Photoshop-composited canyon-backdrop.png asset + two dancing bear cubs beside the conductor bear (bob/rock, beat-reactive)

b8b147f3cf16b2a696db6112b42f40a32b4df5f8 · 2026-09-01 18:32:28 -0700 · Steve Abrams

Files touched

A assets/canyon-backdrop.png
M index.html

Diff

commit b8b147f3cf16b2a696db6112b42f40a32b4df5f8
Author: Steve Abrams <steve@designerwallcoverings.com>
Date:   Tue Sep 1 18:32:28 2026 -0700

    Add Photoshop-composited canyon-backdrop.png asset + two dancing bear cubs beside the conductor bear (bob/rock, beat-reactive)
---
 assets/canyon-backdrop.png | Bin 0 -> 115130 bytes
 index.html                 |  27 +++++++++++++++++++++++++++
 2 files changed, 27 insertions(+)

diff --git a/assets/canyon-backdrop.png b/assets/canyon-backdrop.png
new file mode 100644
index 0000000..cb860a1
Binary files /dev/null and b/assets/canyon-backdrop.png differ
diff --git a/index.html b/index.html
index 4dea9ef..ee50823 100644
--- a/index.html
+++ b/index.html
@@ -763,6 +763,7 @@ function drawAnimals(){
   heron(W*0.40, baseY-4, 1*scaleA, t, accent);
   rabbit(W*0.63, baseY-4, 1*scaleA, t, accent);
   bearAndFireflies(W*0.85, baseY-2, 1.1*scaleA, t, accent);
+  drawBearCubs(W*0.85, baseY-2, t, scaleA);
 
   ctx.restore();
 }
@@ -867,6 +868,32 @@ function bearAndFireflies(x,y,s,t,accent){
   }
 }
 
+// two bear cubs dancing beside the conductor — bob + rock, bouncing harder on the beat when reactive
+function bearCub(x,y,s,t,ph){
+  const beat=(S.pulse||0), amp=(S.amp||0);
+  const bounce=Math.abs(Math.sin(t*2.4+ph))*(4+beat*11+amp*6);
+  const rock=Math.sin(t*2.4+ph)*0.2;
+  ctx.save(); ctx.translate(x,y-bounce); ctx.rotate(rock); ctx.scale(s,s);
+  ctx.fillStyle='rgba(24,7,11,0.96)';
+  ctx.beginPath(); ctx.ellipse(0,-8,7,9,0,0,7); ctx.fill();        // body
+  ctx.beginPath(); ctx.arc(0,-20,6,0,7); ctx.fill();               // head
+  ctx.beginPath(); ctx.arc(-5,-25,2.5,0,7); ctx.fill();            // ears
+  ctx.beginPath(); ctx.arc(5,-25,2.5,0,7); ctx.fill();
+  ctx.strokeStyle='rgba(24,7,11,0.96)'; ctx.lineWidth=3; ctx.lineCap='round';
+  const sw=Math.sin(t*4.8+ph)*3;                                   // arms wave in the dance
+  ctx.beginPath();
+  ctx.moveTo(-5,-11); ctx.lineTo(-10+sw,-17);
+  ctx.moveTo(5,-11);  ctx.lineTo(10+sw,-17);
+  ctx.moveTo(-3,0); ctx.lineTo(-3,4);
+  ctx.moveTo(3,0);  ctx.lineTo(3,4);
+  ctx.stroke();
+  ctx.restore();
+}
+function drawBearCubs(bx,by,t,scaleA){
+  bearCub(bx-46, by, 1.0*scaleA, t, 0.0);
+  bearCub(bx+42, by, 0.9*scaleA, t, 1.7);
+}
+
 // ---------- River foreground with parallax reflections ----------
 function drawRiver(){
   const W=S.W,H=S.H;

← 6f9809b Sync objects to the music: beat detection drives pulsating l · back to Scarlet Riverboat Masquerade · Keep animals/cubs grounded (lower hop/bounce); add pterodact 1043c03 →