Added message support to triangle-art

Author: jonfroehlich

src/apps/makelogo/TriangleMorphTest/art_data/heart.json

@@ -1,5 +1,6 @@
 {
   "name": "Valentine Heart",
+  "message": "Happy Valentine's Day!",
   "numCols": 10,
   "numRows": 10,
   "directionPattern": "alternating",

src/apps/makelogo/TriangleMorphTest/art_data/jack-o-lantern.json

@@ -1,5 +1,6 @@
 {
   "name": "Jack-o-Lantern",
+  "message": "Happy Halloween!",
   "numCols": 10,
   "numRows": 9,
   "directionPattern": "alternating",

src/apps/makelogo/TriangleMorphTest/art_data/pumpkin.json

@@ -1,5 +1,6 @@
 {
   "name": "Pumpkin",
+  "message": "Happy Thanksgiving!",
   "numCols": 10,
   "numRows": 9,
   "directionPattern": "alternating",

src/apps/makelogo/TriangleMorphTest/art_data/santa.json

@@ -1,5 +1,6 @@
 {
   "name": "Santa",
+  "message": "Happy Holidays!",
   "numCols": 10,
   "numRows": 9,
 

src/apps/makelogo/TriangleMorphTest/art_data/shamrock.json

@@ -1,5 +1,6 @@
 {
   "name": "Shamrock",
+  "message": "Happy St. Patrick's Day!",
   "numCols": 10,
   "numRows": 9,
   "directionPattern": "alternating",

src/apps/makelogo/TriangleMorphTest/art_data/uw.json

@@ -1,5 +1,6 @@
 {
   "name": "UW Purple W",
+  "message": "Go Dawgs!",
   "numCols": 13,
   "numRows": 10,
   "directionPattern": "alternating",

src/apps/makelogo/TriangleMorphTest/sketch.js

@@ -6,6 +6,11 @@
  * 4. Morphs it into the Makeability Lab Logo
  */
 
+// In the future, we could consider:
+// 4th of July — star shape (5-pointed), red/white/blue
+// 🦃 Thanksgiving (Nov) — turkey? Might be tough at this resolution. A fall leaf could work better — maple leaf shape in red/orange/yellow
+// ⭐ New Year's — star or firework burst
+// 🌸 Spring/Cherry Blossom — simple flower shape, pink (could double for UW cherry blossom season)
 
 import { 
   MakeabilityLabLogo, Grid, Triangle, ORIGINAL_COLOR_ARRAY, 
@@ -28,6 +33,7 @@ let mouseX = 0;
 let makeLabLogoStatic = null;
 let currentTriangleArt = null; 
 let makeLabGrid = null;
+let currentLerpAmt = 0;
 
 // The Morph Data
 let animatedTriangles = []; 
@@ -108,6 +114,7 @@ function setupCanvas(artData) {
 
   makeLabLogoStatic = new MakeabilityLabLogo(logoX, logoY, TRIANGLE_SIZE);
   makeLabLogoStatic.visible = false;
+  makeLabLogoStatic.isLabelVisible = true;
 
   // Re-map the triangles for the new layout
   createAnimationMapping();
@@ -168,38 +175,47 @@ function createAnimationMapping() {
 function updateAnimation() {
   const smallBuffer = WIDTH_MARGIN_PCT * logicalWidth;
   const effectiveWidth = logicalWidth - 2 * smallBuffer;
-  
-  // Calculate morph progress (0.0 to 1.0) based on Mouse X
-  const lerpAmt = map(mouseX, smallBuffer, effectiveWidth, 0, 1, true);
+  currentLerpAmt = map(mouseX, smallBuffer, effectiveWidth, 0, 1, true);
 
   for (const tri of animatedTriangles) {
-    tri.x = lerp(tri._originState.x, tri._destState.x, lerpAmt);
-    tri.y = lerp(tri._originState.y, tri._destState.y, lerpAmt);
-    tri.fillColor = lerpColor(tri._originState.fill, tri._destState.fill, lerpAmt);
-    tri.strokeColor = lerpColor(tri._originState.stroke, tri._destState.stroke, lerpAmt);
+    tri.x = lerp(tri._originState.x, tri._destState.x, currentLerpAmt);
+    tri.y = lerp(tri._originState.y, tri._destState.y, currentLerpAmt);
+    tri.fillColor = lerpColor(tri._originState.fill, tri._destState.fill, currentLerpAmt);
+    tri.strokeColor = lerpColor(tri._originState.stroke, tri._destState.stroke, currentLerpAmt);
   }
 }
 
 function drawLoop() {
-  // Clear Screen
+  // Clear screen first
   ctx.fillStyle = 'rgb(250, 250, 250)';
   ctx.fillRect(0, 0, logicalWidth, logicalHeight);
 
-  updateAnimation();
+  updateAnimation(); // sets currentLerpAmt
 
   if (makeLabGrid && makeLabGrid.visible) makeLabGrid.draw(ctx);
-  
-  // Draw the animated morphing triangles
-  for (const tri of animatedTriangles) {
-    tri.draw(ctx);
-  }
 
-  // Draw Logo Overlay (Debugging: press 'h' to toggle)
+  for (const tri of animatedTriangles) tri.draw(ctx);
+
   if (makeLabLogoStatic && makeLabLogoStatic.visible) makeLabLogoStatic.draw(ctx);
 
+  // Labels: art message fades out, logo label fades in
+  if (currentTriangleArt?.message) currentTriangleArt.drawMessage(ctx, 1 - currentLerpAmt);
+  drawLogoLabel(ctx, currentLerpAmt);
+
   requestAnimationFrame(drawLoop);
 }
 
+const LABEL_APPEAR_THRESHOLD = 0.7;
+const LABEL_SLIDE_FRACTION = 0.4;
+
+function drawLogoLabel(ctx, lerpAmt) {
+  if (lerpAmt <= LABEL_APPEAR_THRESHOLD) return;
+  const progress = (lerpAmt - LABEL_APPEAR_THRESHOLD) / (1 - LABEL_APPEAR_THRESHOLD);
+  const eased = progress * progress * (3 - 2 * progress); // smoothstep
+  const slideOffset = makeLabLogoStatic.labelFontSize * LABEL_SLIDE_FRACTION * (1 - eased);
+  makeLabLogoStatic.drawLabel(ctx, { opacity: eased, yOffset: slideOffset });
+}
+
 // --- Inputs ---
 function onMouseMove(e) {
   const rect = canvas.getBoundingClientRect();

src/apps/makelogo/TriangleMorphTest/triangle-art.js

@@ -54,6 +54,14 @@ export class TriangleArt {
 
     /** @type {boolean} */
     this.visible = true;
+
+    this.showMessage = true;
+
+    /** @type {string} CSS color for the message text. Falls back to palette's first entry base, then black. */
+    this.messageColor = data.messageColor ?? TriangleArt._defaultMessageColor(data);
+
+    console.log("Initialized TriangleArt with name: ", this.name);
+    console.log("Message: ", this.message);
   }
 
   // -----------------------------------------------------------------------
@@ -87,6 +95,8 @@ export class TriangleArt {
   get numCols() { return this.data.numCols; }
   get width() { return this.numCols * this.triangleSize; }
   get height() { return this.numRows * this.triangleSize; }
+  get name() { return this.data.name ?? ''; }
+  get message() { return this.data.message ?? ''; }
 
   // -----------------------------------------------------------------------
   // Triangle access
@@ -152,13 +162,45 @@ export class TriangleArt {
    */
   draw(ctx) {
     if (!this.visible) return;
+
+    if (this.showMessage && this.message){
+      this.drawMessage(ctx);
+      console.log("Drawing message: ", this.message);
+    }else{
+      console.log("Message hidden or empty, skipping drawMessage.");
+    }
+
     for (const row of this.artArray) {
       for (const cell of row) {
         cell.draw(ctx);
       }
     }
   }
 
+  /**
+   * Draws the message string centered just above the artwork.
+   *
+   * @param {CanvasRenderingContext2D} ctx
+   * @param {number} [alpha=1] - Opacity 0–1, modulates messageColor.
+   * @param {number|null} [x=null] - Center x override; defaults to grid center.
+   * @param {number|null} [y=null] - Baseline y override; defaults to just above grid.
+   */
+  drawMessage(ctx, alpha = 1, x = null, y = null) {
+    if (!this.message) return;
+    const fontSize = Math.round(this.triangleSize * 0.7);
+    const cx = x ?? (this.x + this.width / 2);
+    const cy = y ?? (this.y - fontSize);
+
+    ctx.save();
+    ctx.globalAlpha = Math.max(0, Math.min(1, alpha));
+    ctx.font = `bold ${fontSize}px sans-serif`;
+    ctx.fillStyle = this.messageColor;
+    ctx.textAlign = 'center';
+    ctx.textBaseline = 'alphabetic';
+    ctx.fillText(this.message, cx, cy);
+    ctx.restore();
+  }
+
   // -----------------------------------------------------------------------
   // Static factory: load from URL
   // -----------------------------------------------------------------------
@@ -434,4 +476,14 @@ export class TriangleArt {
     }
     return random(jitter.brightness[0], jitter.brightness[1]);
   }
+
+  /**
+   * 
+   * @param {*} data 
+   * @returns 
+   */
+  static _defaultMessageColor(data) {
+    const keys = Object.keys(data.palette ?? {});
+    return keys.length > 0 ? data.palette[keys[0]].base : '#000000';
+  }
 }