@pixel-normal-edit/mcp 2.0.6 → 2.0.8

package/domains/art-tree/perspective_lessons.js

@@ -0,0 +1,138 @@
+const shapes = require('./shapes');
+const perspShapes = require('./perspective_shapes');
+
+/**
+ * Lesson: 1-Point Perspective
+ */
+function lesson1PointPerspective(canvasSize = 32, color = '#2196f3') {
+  const commands = [];
+  const horizonY = Math.floor(canvasSize * 0.4);
+  const vpX = Math.floor(canvasSize * 0.5);
+  const vpY = horizonY;
+
+  // Horizon & VP
+  commands.push(...perspShapes.drawHorizon(canvasSize, horizonY));
+  commands.push(...perspShapes.drawVP(vpX, vpY));
+
+  // Box below horizon (seeing top face)
+  const w = Math.floor(canvasSize * 0.2);
+  const h = Math.floor(canvasSize * 0.15);
+  commands.push(...perspShapes.draw1PointBox(vpX, vpY, Math.floor(canvasSize * 0.2), horizonY + Math.floor(canvasSize * 0.2), w, h, 0.4, color));
+  
+  // Box above horizon (seeing bottom face)
+  commands.push(...perspShapes.draw1PointBox(vpX, vpY, Math.floor(canvasSize * 0.6), horizonY - Math.floor(canvasSize * 0.3), w, h, 0.4, '#e91e63'));
+
+  return commands;
+}
+
+/**
+ * Lesson: 2-Point Perspective
+ */
+function lesson2PointPerspective(canvasSize = 32, color = '#4caf50') {
+  const commands = [];
+  const horizonY = Math.floor(canvasSize * 0.5);
+  const vp1X = Math.floor(canvasSize * 0.1);
+  const vp2X = Math.floor(canvasSize * 0.9);
+  
+  // Horizon & VPs
+  commands.push(...perspShapes.drawHorizon(canvasSize, horizonY));
+  commands.push(...perspShapes.drawVP(vp1X, horizonY));
+  commands.push(...perspShapes.drawVP(vp2X, horizonY));
+
+  // 2-Point Box straddling the horizon
+  const startX = Math.floor(canvasSize * 0.4);
+  const startY = Math.floor(canvasSize * 0.3);
+  const h = Math.floor(canvasSize * 0.4);
+  
+  commands.push(...perspShapes.draw2PointBox(vp1X, horizonY, vp2X, horizonY, startX, startY, h, 0.3, 0.4, color));
+
+  return commands;
+}
+
+/**
+ * Lesson: 3-Point Perspective (Bird's eye view)
+ */
+function lesson3PointPerspective(canvasSize = 32, color = '#ff9800') {
+  const commands = [];
+  const horizonY = Math.floor(canvasSize * 0.2);
+  const vp1X = Math.floor(canvasSize * 0.1);
+  const vp2X = Math.floor(canvasSize * 0.9);
+  const vp3X = Math.floor(canvasSize * 0.5);
+  const vp3Y = Math.floor(canvasSize * 1.5); // VP3 far below (Bird's eye)
+  
+  // Horizon & VPs
+  commands.push(...perspShapes.drawHorizon(canvasSize, horizonY));
+  commands.push(...perspShapes.drawVP(vp1X, horizonY));
+  commands.push(...perspShapes.drawVP(vp2X, horizonY));
+  // VP3 is usually off-canvas, but we draw a line to it to show direction
+  
+  // We approximate a 3-point box by drawing converging vertical lines to VP3
+  const topY = Math.floor(canvasSize * 0.4);
+  const h = Math.floor(canvasSize * 0.4);
+  
+  // Center edge converging to VP3
+  commands.push(shapes.drawLine(vp3X, topY, vp3X, topY+h, color)); // simplified
+  commands.push(shapes.drawLine(vp3X, topY+h, vp3X, vp3Y, '#e0e0e0')); // Guide to VP3
+  
+  // Left and Right top edges to VP1, VP2
+  commands.push(shapes.drawLine(vp3X, topY, vp1X, horizonY, '#e0e0e0'));
+  commands.push(shapes.drawLine(vp3X, topY, vp2X, horizonY, '#e0e0e0'));
+  
+  // Draw the rest of the box structure to simulate 3-point
+  const lX = vp3X - Math.floor(canvasSize * 0.15);
+  const rX = vp3X + Math.floor(canvasSize * 0.2);
+  // Vertical edges also converge to VP3 slightly (foreshortening)
+  commands.push(shapes.drawLine(lX, topY + Math.floor(canvasSize * 0.1), lX + 2, topY + h, color));
+  commands.push(shapes.drawLine(rX, topY + Math.floor(canvasSize * 0.15), rX - 3, topY + h - 5, color));
+
+  return commands;
+}
+
+/**
+ * Lesson: Foreshortening (Depth foreshortening)
+ * Drawing a cylinder pointing directly at the viewer
+ */
+function lessonForeshortening(canvasSize = 32, color = '#9c27b0') {
+  const commands = [];
+  const cx = Math.floor(canvasSize / 2);
+  const cy = Math.floor(canvasSize / 2);
+  
+  // Draw overlapping circles getting larger (coming towards viewer)
+  const numCircles = 5;
+  const maxR = Math.floor(canvasSize * 0.4);
+  const minR = Math.floor(canvasSize * 0.15);
+  
+  for(let i=0; i<numCircles; i++) {
+    const t = i / (numCircles - 1); // 0 to 1
+    // Radius grows exponentially to simulate perspective
+    const r = minR + (maxR - minR) * (t * t); 
+    // Y position shifts slightly to show overlap
+    const y = cy - Math.floor(canvasSize * 0.2) + Math.floor(canvasSize * 0.4 * t);
+    
+    // Draw the circle
+    commands.push(shapes.drawCircle(cx, y, Math.floor(r), color, false));
+  }
+  
+  // Draw bounding lines converging
+  commands.push(shapes.drawLine(cx - minR, cy - Math.floor(canvasSize * 0.2), cx - maxR, cy + Math.floor(canvasSize * 0.2), '#bdbdbd'));
+  commands.push(shapes.drawLine(cx + minR, cy - Math.floor(canvasSize * 0.2), cx + maxR, cy + Math.floor(canvasSize * 0.2), '#bdbdbd'));
+
+  return commands;
+}
+
+function getPerspectiveLessonCatalog() {
+  return [
+    { id: 'persp_1point', name: '1-Point Perspective', description: 'Horizon, 1 VP, Front vs Receding planes', fn: lesson1PointPerspective },
+    { id: 'persp_2point', name: '2-Point Perspective', description: 'Horizon, 2 VPs, Edges facing viewer', fn: lesson2PointPerspective },
+    { id: 'persp_3point', name: '3-Point Perspective', description: '3 VPs (Bird\'s eye view)', fn: lesson3PointPerspective },
+    { id: 'persp_foreshorten', name: 'Foreshortening', description: 'Cylinder pointing at viewer', fn: lessonForeshortening },
+  ];
+}
+
+module.exports = {
+  lesson1PointPerspective,
+  lesson2PointPerspective,
+  lesson3PointPerspective,
+  lessonForeshortening,
+  getPerspectiveLessonCatalog
+};

package/domains/art-tree/perspective_shapes.js

@@ -0,0 +1,96 @@
+const shapes = require('./shapes');
+
+function drawHorizon(canvasSize, yPos) {
+  const commands = [];
+  // Horizon line (Eye level)
+  commands.push(shapes.drawLine(0, yPos, canvasSize, yPos, '#9e9e9e'));
+  return commands;
+}
+
+function drawVP(x, y) {
+  // Red dot for vanishing point
+  return [shapes.drawCircle(x, y, 2, '#ff0000', true)];
+}
+
+function draw1PointBox(vpX, vpY, fX, fY, w, h, depthFactor, color) {
+  const commands = [];
+  // Front face (Front-facing plane)
+  commands.push(shapes.drawRectangle(fX, fY, w, h, color, false));
+  
+  // Orthogonal lines to VP (Depth lines)
+  const guideColor = '#e0e0e0';
+  commands.push(shapes.drawLine(fX, fY, vpX, vpY, guideColor));
+  commands.push(shapes.drawLine(fX+w, fY, vpX, vpY, guideColor));
+  commands.push(shapes.drawLine(fX, fY+h, vpX, vpY, guideColor));
+  commands.push(shapes.drawLine(fX+w, fY+h, vpX, vpY, guideColor));
+
+  // Back face (Receding plane calculation)
+  // Distance from front face to VP
+  const dTLx = vpX - fX;
+  const dTLy = vpY - fY;
+  
+  // Back face coordinates based on depth factor (0 to 1)
+  const bX = fX + Math.floor(dTLx * depthFactor);
+  const bY = fY + Math.floor(dTLy * depthFactor);
+  const bW = Math.floor(w * (1 - depthFactor));
+  const bH = Math.floor(h * (1 - depthFactor));
+  
+  commands.push(shapes.drawRectangle(bX, bY, bW, bH, color, false));
+  
+  // Connect corners
+  commands.push(shapes.drawLine(fX, fY, bX, bY, color));
+  commands.push(shapes.drawLine(fX+w, fY, bX+bW, bY, color));
+  commands.push(shapes.drawLine(fX, fY+h, bX, bY+bH, color));
+  commands.push(shapes.drawLine(fX+w, fY+h, bX+bW, bY+bH, color));
+
+  return commands;
+}
+
+function draw2PointBox(vp1X, vp1Y, vp2X, vp2Y, startX, startY, h, depth1, depth2, color) {
+  const commands = [];
+  const guideColor = '#e0e0e0';
+  
+  // Center vertical edge (faces viewer)
+  commands.push(shapes.drawLine(startX, startY, startX, startY + h, color));
+  
+  // Orthogonals to VP1 (Left)
+  commands.push(shapes.drawLine(startX, startY, vp1X, vp1Y, guideColor));
+  commands.push(shapes.drawLine(startX, startY + h, vp1X, vp1Y, guideColor));
+  
+  // Orthogonals to VP2 (Right)
+  commands.push(shapes.drawLine(startX, startY, vp2X, vp2Y, guideColor));
+  commands.push(shapes.drawLine(startX, startY + h, vp2X, vp2Y, guideColor));
+  
+  // Left vertical edge
+  const lX = startX + Math.floor((vp1X - startX) * depth1);
+  const lY1 = startY + Math.floor((vp1Y - startY) * depth1);
+  const lY2 = (startY + h) + Math.floor((vp1Y - (startY + h)) * depth1);
+  commands.push(shapes.drawLine(lX, lY1, lX, lY2, color));
+  commands.push(shapes.drawLine(startX, startY, lX, lY1, color));
+  commands.push(shapes.drawLine(startX, startY+h, lX, lY2, color));
+
+  // Right vertical edge
+  const rX = startX + Math.floor((vp2X - startX) * depth2);
+  const rY1 = startY + Math.floor((vp2Y - startY) * depth2);
+  const rY2 = (startY + h) + Math.floor((vp2Y - (startY + h)) * depth2);
+  commands.push(shapes.drawLine(rX, rY1, rX, rY2, color));
+  commands.push(shapes.drawLine(startX, startY, rX, rY1, color));
+  commands.push(shapes.drawLine(startX, startY+h, rX, rY2, color));
+
+  // Back vertical edge (intersection of lines from left/right edges to opposite VPs)
+  // For simplicity, we just draw the top and bottom back lines converging to VPs
+  commands.push(shapes.drawLine(lX, lY1, vp2X, vp2Y, guideColor));
+  commands.push(shapes.drawLine(rX, rY1, vp1X, vp1Y, guideColor));
+  
+  // Approximate intersection for top back corner
+  // (In a full implementation, we'd calculate line intersection, here we just show the structure)
+  
+  return commands;
+}
+
+module.exports = {
+  drawHorizon,
+  drawVP,
+  draw1PointBox,
+  draw2PointBox
+};

package/domains/art-tree/perspective_tools.js

@@ -0,0 +1,60 @@
+const { z } = require('zod');
+const { registerTool, sendCommand } = require('../../core/server');
+const perspLessons = require('./perspective_lessons');
+
+const hexColor = z.string().regex(/^#[0-9a-fA-F]{6}$/).describe('Hex color e.g. #ff0000');
+
+/**
+ * Register all perspective tools on the MCP server.
+ * @param {McpServer} server
+ */
+function register(server) {
+  registerTool(server, 'art_tree_lesson_persp_1point',
+    'Lesson: Perspective - 1-Point Perspective (Horizon, 1 VP, Front vs Receding)',
+    { canvasSize: z.number().int().min(16).max(64).default(32), color: hexColor.default('#2196f3') },
+    async (p) => {
+      const commands = perspLessons.lesson1PointPerspective(p.canvasSize, p.color);
+      await Promise.all(commands.map(cmd => sendCommand(cmd)));
+      return { content: [{ type: 'text', text: `✓ 1-Point Perspective lesson completed` }] };
+    });
+
+  registerTool(server, 'art_tree_lesson_persp_2point',
+    'Lesson: Perspective - 2-Point Perspective (Horizon, 2 VPs)',
+    { canvasSize: z.number().int().min(16).max(64).default(32), color: hexColor.default('#4caf50') },
+    async (p) => {
+      const commands = perspLessons.lesson2PointPerspective(p.canvasSize, p.color);
+      await Promise.all(commands.map(cmd => sendCommand(cmd)));
+      return { content: [{ type: 'text', text: `✓ 2-Point Perspective lesson completed` }] };
+    });
+
+  registerTool(server, 'art_tree_lesson_persp_3point',
+    'Lesson: Perspective - 3-Point Perspective (Bird\'s eye view)',
+    { canvasSize: z.number().int().min(16).max(64).default(32), color: hexColor.default('#ff9800') },
+    async (p) => {
+      const commands = perspLessons.lesson3PointPerspective(p.canvasSize, p.color);
+      await Promise.all(commands.map(cmd => sendCommand(cmd)));
+      return { content: [{ type: 'text', text: `✓ 3-Point Perspective lesson completed` }] };
+    });
+
+  registerTool(server, 'art_tree_lesson_persp_foreshorten',
+    'Lesson: Perspective - Foreshortening (Depth foreshortening)',
+    { canvasSize: z.number().int().min(16).max(64).default(32), color: hexColor.default('#9c27b0') },
+    async (p) => {
+      const commands = perspLessons.lessonForeshortening(p.canvasSize, p.color);
+      await Promise.all(commands.map(cmd => sendCommand(cmd)));
+      return { content: [{ type: 'text', text: `✓ Foreshortening lesson completed` }] };
+    });
+
+  registerTool(server, 'art_tree_lesson_persp_catalog',
+    'Get the catalog of all available Perspective lessons',
+    {},
+    () => {
+      const catalog = perspLessons.getPerspectiveLessonCatalog();
+      const text = catalog.map(l =>
+        `  • ${l.id}: ${l.name} — ${l.description}`
+      ).join('\n');
+      return { content: [{ type: 'text', text: `📚 Perspective Lessons:\n\n${text}` }] };
+    });
+}
+
+module.exports = { register };

package/domains/art-tree/shapes.js

@@ -182,9 +182,24 @@ function drawGrid(startX, startY, cols, rows, cellSize, color) {
   return commands;
 }
 
+/**
+ * Draw a continuous polyline from a list of points.
+ * @param {Array<{x: number, y: number}>} points - Array of vertices
+ * @param {string} color - Hex color
+ * @returns {Array<Object>} Array of Command payloads
+ */
+function drawPolyline(points, color) {
+  const commands = [];
+  for (let i = 0; i < points.length - 1; i++) {
+    commands.push(drawLine(points[i].x, points[i].y, points[i+1].x, points[i+1].y, color));
+  }
+  return commands;
+}
+
 module.exports = {
   PRIMITIVE_ACTIONS,
   drawLine,
+  drawPolyline,
   drawSquare,
   drawRectangle,
   drawCircle,

package/domains/art-tree/sky_lessons_1.js

@@ -0,0 +1,82 @@
+const skyShapes1 = require('./sky_shapes_1');
+
+/**
+ * Lesson 1: Sun Shapes (Hình dạng mặt trời)
+ * Compares Basic, Soft, and Rays
+ */
+function lessonSunShapes(canvasSize = 32) {
+  const commands = [];
+  const y = Math.floor(canvasSize / 2);
+  const r = Math.floor(canvasSize * 0.15);
+
+  // Left: Basic
+  commands.push(...skyShapes1.drawSunBasic(Math.floor(canvasSize * 0.2), y, r));
+  // Center: Soft
+  commands.push(...skyShapes1.drawSunSoft(Math.floor(canvasSize * 0.5), y, r));
+  // Right: Rays
+  commands.push(...skyShapes1.drawSunRays(Math.floor(canvasSize * 0.8), y, r));
+
+  return commands;
+}
+
+/**
+ * Lesson 2: Sunset Colors (Màu sắc buổi chiều)
+ * Shows the progression of colors from blue to yellow
+ */
+function lessonSunsetColors(canvasSize = 32) {
+  const commands = [];
+  
+  // The classic sunset gradient: Blue -> Purple -> Pink -> Orange -> Yellow (top to bottom)
+  const sunsetPalette = [
+    '#3f51b5', // Blue
+    '#9c27b0', // Purple
+    '#e91e63', // Pink
+    '#ff9800', // Orange
+    '#ffeb3b'  // Yellow
+  ];
+
+  commands.push(...skyShapes1.drawSkyGradient(0, 0, canvasSize, canvasSize, sunsetPalette));
+
+  return commands;
+}
+
+/**
+ * Lesson 3: Sunset Sky (Bầu trời hoàng hôn)
+ * Combines the gradient sky with a soft sun setting at the bottom
+ */
+function lessonSunsetSky(canvasSize = 32) {
+  const commands = [];
+  
+  // 1. Draw the Sky
+  const sunsetPalette = [
+    '#1a237e', // Dark Blue
+    '#512da8', // Deep Purple
+    '#c2185b', // Magenta
+    '#ff5722', // Deep Orange
+    '#ffb300'  // Amber
+  ];
+  commands.push(...skyShapes1.drawSkyGradient(0, 0, canvasSize, canvasSize, sunsetPalette));
+
+  // 2. Draw the Sun (Soft glowing sun near the bottom)
+  const cx = Math.floor(canvasSize / 2);
+  const cy = Math.floor(canvasSize * 0.8);
+  const r = Math.floor(canvasSize * 0.15);
+  commands.push(...skyShapes1.drawSunSoft(cx, cy, r));
+
+  return commands;
+}
+
+function getSkyLesson1Catalog() {
+  return [
+    { id: 'sky_sun_shapes', name: 'Sun Shapes', description: 'Basic vs Soft vs Rays', fn: lessonSunShapes },
+    { id: 'sky_sunset_colors', name: 'Sunset Colors', description: 'Gradient bands from Blue to Yellow', fn: lessonSunsetColors },
+    { id: 'sky_sunset_sky', name: 'Sunset Sky', description: 'Combining gradient sky with a soft sun', fn: lessonSunsetSky },
+  ];
+}
+
+module.exports = {
+  lessonSunShapes,
+  lessonSunsetColors,
+  lessonSunsetSky,
+  getSkyLesson1Catalog
+};

package/domains/art-tree/sky_shapes_1.js

@@ -0,0 +1,68 @@
+const shapes = require('./shapes');
+
+/**
+ * Draws a basic solid sun
+ */
+function drawSunBasic(cx, cy, r) {
+  return [shapes.drawCircle(cx, cy, r, '#ffeb3b', true)];
+}
+
+/**
+ * Draws a soft glowing sun using concentric circles with decreasing opacity
+ * Since we don't have true opacity in standard shapes yet, we use color stepping
+ * (white -> light yellow -> yellow -> orange)
+ */
+function drawSunSoft(cx, cy, r) {
+  const commands = [];
+  commands.push(shapes.drawCircle(cx, cy, Math.floor(r * 1.5), '#ffe082', true)); // Outer glow
+  commands.push(shapes.drawCircle(cx, cy, Math.floor(r * 1.2), '#ffeb3b', true)); // Mid glow
+  commands.push(shapes.drawCircle(cx, cy, Math.floor(r * 0.8), '#fff59d', true)); // Inner glow
+  commands.push(shapes.drawCircle(cx, cy, Math.floor(r * 0.4), '#ffffff', true)); // Core
+  return commands;
+}
+
+/**
+ * Draws a sun with distinct rays
+ */
+function drawSunRays(cx, cy, r) {
+  const commands = [];
+  const color = '#ffeb3b';
+  // Central body
+  commands.push(shapes.drawCircle(cx, cy, r, color, true));
+  
+  // Outer rays
+  const rayL = Math.floor(r * 2);
+  for (let i = 0; i < 12; i++) {
+    const a = (i / 12) * 2 * Math.PI;
+    const x1 = Math.round(cx + (r + 2) * Math.cos(a));
+    const y1 = Math.round(cy + (r + 2) * Math.sin(a));
+    const x2 = Math.round(cx + rayL * Math.cos(a));
+    const y2 = Math.round(cy + rayL * Math.sin(a));
+    commands.push(shapes.drawLine(x1, y1, x2, y2, color));
+  }
+  return commands;
+}
+
+/**
+ * Draws a simulated gradient sky using horizontal bands of color
+ * @param {Array<string>} colors - Array of hex colors from top to bottom
+ */
+function drawSkyGradient(x, y, w, h, colors) {
+  const commands = [];
+  const bandHeight = Math.ceil(h / colors.length);
+  
+  for (let i = 0; i < colors.length; i++) {
+    const bandY = y + i * bandHeight;
+    // To ensure we cover the total height, the last band fills the rest
+    const bh = (i === colors.length - 1) ? (y + h - bandY) : bandHeight;
+    commands.push(shapes.drawRectangle(x, bandY, w, bh, colors[i], true));
+  }
+  return commands;
+}
+
+module.exports = {
+  drawSunBasic,
+  drawSunSoft,
+  drawSunRays,
+  drawSkyGradient
+};

package/domains/art-tree/sky_tools.js

@@ -0,0 +1,51 @@
+const { z } = require('zod');
+const { registerTool, sendCommand } = require('../../core/server');
+const skyLessons1 = require('./sky_lessons_1');
+
+/**
+ * Register all sky and sun tools on the MCP server.
+ * @param {McpServer} server
+ */
+function register(server) {
+  // Phase 1 Tools
+  registerTool(server, 'art_tree_lesson_sky_sun_shapes',
+    'Lesson: Sun & Sky - Compare Basic, Soft, and Rays sun shapes',
+    { canvasSize: z.number().int().min(16).max(64).default(32) },
+    async (p) => {
+      const commands = skyLessons1.lessonSunShapes(p.canvasSize);
+      await Promise.all(commands.map(cmd => sendCommand(cmd)));
+      return { content: [{ type: 'text', text: `✓ Sun Shapes lesson completed` }] };
+    });
+
+  registerTool(server, 'art_tree_lesson_sky_sunset_colors',
+    'Lesson: Sun & Sky - Draw a sunset gradient (Blue to Yellow)',
+    { canvasSize: z.number().int().min(16).max(64).default(32) },
+    async (p) => {
+      const commands = skyLessons1.lessonSunsetColors(p.canvasSize);
+      await Promise.all(commands.map(cmd => sendCommand(cmd)));
+      return { content: [{ type: 'text', text: `✓ Sunset Colors lesson completed` }] };
+    });
+
+  registerTool(server, 'art_tree_lesson_sky_sunset_sky',
+    'Lesson: Sun & Sky - Combine gradient sky with a soft setting sun',
+    { canvasSize: z.number().int().min(16).max(64).default(32) },
+    async (p) => {
+      const commands = skyLessons1.lessonSunsetSky(p.canvasSize);
+      await Promise.all(commands.map(cmd => sendCommand(cmd)));
+      return { content: [{ type: 'text', text: `✓ Sunset Sky lesson completed` }] };
+    });
+
+  registerTool(server, 'art_tree_lesson_sky_catalog',
+    'Get the catalog of all available Sun & Sky lessons',
+    {},
+    () => {
+      const cat1 = skyLessons1.getSkyLesson1Catalog();
+      const catalog = [...cat1];
+      const text = catalog.map(l =>
+        `  • ${l.id}: ${l.name} — ${l.description}`
+      ).join('\n');
+      return { content: [{ type: 'text', text: `📚 Sun & Sky Lessons:\n\n${text}` }] };
+    });
+}
+
+module.exports = { register };

package/domains/art-tree/structure_lessons.js

@@ -0,0 +1,102 @@
+const shapes = require('./shapes');
+const structureShapes = require('./structure_shapes');
+const shapes3d = require('./3d_shapes');
+const ellipseShapes = require('./ellipse_shapes');
+
+/**
+ * Lesson: XYZ Axes (Vertical, Horizontal, Depth)
+ */
+function lessonXYZAxes(canvasSize = 32, color = '#2196f3') {
+  const commands = [];
+  const cx = Math.floor(canvasSize / 2);
+  const cy = Math.floor(canvasSize / 2);
+  const length = Math.floor(canvasSize * 0.4);
+
+  // Draw the axes
+  commands.push(...structureShapes.drawXYZAxes(cx, cy, length));
+  
+  // Draw a simple box aligned with these axes to show how objects follow them
+  const w = Math.floor(length * 0.5);
+  const h = Math.floor(length * 0.5);
+  const d = Math.floor(length * 0.5);
+  // Using a lighter color for the reference box
+  commands.push(...shapes3d.drawWireframeBox(cx + Math.floor(w/2), cy - Math.floor(h/2), w, h, d, '#e0e0e0'));
+
+  return commands;
+}
+
+/**
+ * Lesson: Complex Structure Analysis (e.g. A Bottle)
+ */
+function lessonComplexStructure(canvasSize = 32, color = '#9c27b0') {
+  const commands = [];
+  const cx = Math.floor(canvasSize / 2);
+  const cy = Math.floor(canvasSize / 2);
+  const totalHeight = Math.floor(canvasSize * 0.8);
+
+  // Draw bottle structure showing cross-sections and central axis
+  commands.push(...structureShapes.drawBottleAnatomy(cx, cy, totalHeight, color));
+
+  return commands;
+}
+
+/**
+ * Lesson: Axis Orientation (Object pointing along different axes)
+ */
+function lessonAxisOrientation(canvasSize = 32, color = '#00bcd4') {
+  const commands = [];
+  const r = Math.floor(canvasSize * 0.1);
+  const h = Math.floor(canvasSize * 0.25);
+  const midY = Math.floor(canvasSize / 2);
+
+  // 1. Standing Cylinder (Oriented along Y axis)
+  const q1 = Math.floor(canvasSize * 0.2);
+  // Draw vertical axis
+  commands.push(shapes.drawLine(q1, midY - h + 5, q1, midY + 5, '#4caf50'));
+  commands.push(shapes.drawEllipse(q1, midY, r, Math.floor(r * 0.3), color, false)); // Base
+  commands.push(shapes.drawEllipse(q1, midY - h, r, Math.floor(r * 0.3), color, false)); // Top
+  commands.push(shapes.drawLine(q1 - r, midY, q1 - r, midY - h, color));
+  commands.push(shapes.drawLine(q1 + r, midY, q1 + r, midY - h, color));
+
+  // 2. Lying Cylinder (Oriented along X axis)
+  const q2 = Math.floor(canvasSize * 0.5);
+  // Draw horizontal axis
+  commands.push(shapes.drawLine(q2 - 5, midY + h - r, q2 + h + 5, midY + h - r, '#f44336'));
+  commands.push(shapes.drawEllipse(q2, midY + h - r, Math.floor(r * 0.3), r, color, false)); // Left base
+  commands.push(shapes.drawEllipse(q2 + h, midY + h - r, Math.floor(r * 0.3), r, color, false)); // Right base
+  commands.push(shapes.drawLine(q2, midY + h - r - r, q2 + h, midY + h - r - r, color));
+  commands.push(shapes.drawLine(q2, midY + h - r + r, q2 + h, midY + h - r + r, color));
+
+  // 3. Tilted/Depth Cylinder (Oriented along an arbitrary angle / Z axis)
+  const q3 = Math.floor(canvasSize * 0.75);
+  const angle = Math.PI / 6; // 30 degrees tilt
+  // Draw tilted axis
+  const dx = Math.floor(h * Math.cos(angle));
+  const dy = Math.floor(h * Math.sin(angle));
+  commands.push(shapes.drawLine(q3 - dx/2 - 5, midY - dy/2 - 5, q3 + dx/2 + 5, midY + dy/2 + 5, '#2196f3'));
+  // Draw rotated ellipses for bases
+  commands.push(...ellipseShapes.drawRotatedEllipse(q3 - dx/2, midY - dy/2, Math.floor(r * 0.3), r, angle, color));
+  commands.push(...ellipseShapes.drawRotatedEllipse(q3 + dx/2, midY + dy/2, Math.floor(r * 0.3), r, angle, color));
+  // Tangent lines for tilted cylinder (approximate)
+  const tx = Math.floor(r * Math.sin(angle));
+  const ty = Math.floor(r * Math.cos(angle));
+  commands.push(shapes.drawLine(q3 - dx/2 - tx, midY - dy/2 + ty, q3 + dx/2 - tx, midY + dy/2 + ty, color));
+  commands.push(shapes.drawLine(q3 - dx/2 + tx, midY - dy/2 - ty, q3 + dx/2 + tx, midY + dy/2 - ty, color));
+
+  return commands;
+}
+
+function getStructureLessonCatalog() {
+  return [
+    { id: 'structure_xyz', name: 'XYZ Axes', description: 'Understanding 3D space directions (Vertical, Horizontal, Depth)', fn: lessonXYZAxes },
+    { id: 'structure_bottle', name: 'Complex Structure (Bottle)', description: 'Analyzing an object using a central axis and multiple cross-sections', fn: lessonComplexStructure },
+    { id: 'structure_orientation', name: 'Axis Orientation', description: 'Identifying which axis an object is oriented along', fn: lessonAxisOrientation },
+  ];
+}
+
+module.exports = {
+  lessonXYZAxes,
+  lessonComplexStructure,
+  lessonAxisOrientation,
+  getStructureLessonCatalog
+};