@pixel-normal-edit/mcp 2.0.6 → 2.0.8

package/domains/art-tree/analysis_shapes.js

@@ -0,0 +1,146 @@
+const shapes = require('./shapes');
+const lightShapes = require('./light_shapes');
+
+// Master function to draw the Teapot at a specific analytical step
+function drawTeapotAnalysis(cx, cy, scale, step, color = '#2196f3') {
+  const commands = [];
+  const r = Math.floor(scale * 0.3); // Main body radius
+  
+  // Base outlines for the Teapot used across multiple steps
+  const drawBaseOutline = (c) => {
+    // Body (Sphere)
+    commands.push(shapes.drawCircle(cx, cy, r, c, false));
+    // Base/Foot
+    commands.push(shapes.drawLine(cx - Math.floor(r*0.6), cy + r, cx + Math.floor(r*0.6), cy + r, c));
+    commands.push(shapes.drawLine(cx - Math.floor(r*0.6), cy + r, cx - Math.floor(r*0.7), cy + r + 5, c));
+    commands.push(shapes.drawLine(cx + Math.floor(r*0.6), cy + r, cx + Math.floor(r*0.7), cy + r + 5, c));
+    commands.push(shapes.drawLine(cx - Math.floor(r*0.7), cy + r + 5, cx + Math.floor(r*0.7), cy + r + 5, c));
+    // Lid
+    commands.push(shapes.drawLine(cx - Math.floor(r*0.6), cy - r, cx + Math.floor(r*0.6), cy - r, c));
+    commands.push(shapes.drawEllipse(cx, cy - r - 5, Math.floor(r*0.6), Math.floor(r*0.2), c, false));
+    commands.push(shapes.drawCircle(cx, cy - r - 15, Math.floor(r*0.15), c, false)); // Knob
+    // Spout (Left)
+    commands.push(shapes.drawLine(cx - r, cy, cx - Math.floor(r*1.8), cy - Math.floor(r*0.8), c));
+    commands.push(shapes.drawLine(cx - Math.floor(r*0.8), cy + Math.floor(r*0.4), cx - Math.floor(r*1.5), cy - Math.floor(r*0.6), c));
+    commands.push(shapes.drawLine(cx - Math.floor(r*1.8), cy - Math.floor(r*0.8), cx - Math.floor(r*1.5), cy - Math.floor(r*0.6), c));
+    // Handle (Right)
+    const handlePts1 = [], handlePts2 = [];
+    for(let i=0; i<=10; i++) {
+      const a = -Math.PI/2 + (i/10)*Math.PI; // -90 to 90
+      handlePts1.push({x: Math.round(cx + r + Math.floor(r*0.8)*Math.cos(a)), y: Math.round(cy - Math.floor(r*0.2) + Math.floor(r*0.6)*Math.sin(a))});
+      handlePts2.push({x: Math.round(cx + r + Math.floor(r*0.5)*Math.cos(a)), y: Math.round(cy - Math.floor(r*0.2) + Math.floor(r*0.6)*Math.sin(a))});
+    }
+    commands.push(shapes.drawPolyline(handlePts1, c));
+    commands.push(shapes.drawPolyline(handlePts2, c));
+  };
+
+  switch (step) {
+    case 1: // Silhouette (Flat black)
+      // Since we can't easily union-fill all paths, we simulate it by drawing the base thick
+      // For this, we just draw the outline in solid black with no inner details
+      drawBaseOutline('#000000');
+      break;
+    
+    case 2: // Proportions (Bounding box)
+      drawBaseOutline('#e0e0e0');
+      // Bounding box
+      const minX = cx - Math.floor(r*1.8) - 10;
+      const maxX = cx + Math.floor(r*1.8) + 10;
+      const minY = cy - r - 30;
+      const maxY = cy + r + 15;
+      commands.push(shapes.drawRectangle(minX, minY, maxX - minX, maxY - minY, color, false));
+      // Center lines of bounding box
+      commands.push(shapes.drawLine(cx, minY, cx, maxY, '#ff9800'));
+      commands.push(shapes.drawLine(minX, cy, maxX, cy, '#ff9800'));
+      break;
+
+    case 3: // Axis (X, Y, Z structural lines)
+      drawBaseOutline('#e0e0e0');
+      // Y axis
+      commands.push(shapes.drawLine(cx, cy - r - 40, cx, cy + r + 40, '#f44336'));
+      // X axis
+      commands.push(shapes.drawLine(cx - r - 40, cy, cx + r + 40, cy, '#4caf50'));
+      // Z axis (depth, diagonal)
+      commands.push(shapes.drawLine(cx - Math.floor(r*0.5), cy + Math.floor(r*0.5), cx + Math.floor(r*0.5), cy - Math.floor(r*0.5), '#2196f3'));
+      break;
+
+    case 4: // Main Masses (Primitives)
+      drawBaseOutline('#e0e0e0');
+      // Highlight the sphere
+      commands.push(shapes.drawCircle(cx, cy, r, '#e91e63', false));
+      // Highlight the spout cylinder/cone
+      commands.push(shapes.drawLine(cx - r, cy, cx - Math.floor(r*1.8), cy - Math.floor(r*0.8), '#00bcd4'));
+      commands.push(shapes.drawLine(cx - Math.floor(r*0.8), cy + Math.floor(r*0.4), cx - Math.floor(r*1.5), cy - Math.floor(r*0.6), '#00bcd4'));
+      break;
+
+    case 5: // Cross-sections
+      drawBaseOutline('#e0e0e0');
+      // Slicing ellipses on the body
+      commands.push(shapes.drawEllipse(cx, cy, r, Math.floor(r*0.3), '#9c27b0', false));
+      commands.push(shapes.drawEllipse(cx, cy - Math.floor(r*0.5), Math.floor(r*0.86), Math.floor(r*0.25), '#9c27b0', false));
+      commands.push(shapes.drawEllipse(cx, cy + Math.floor(r*0.5), Math.floor(r*0.86), Math.floor(r*0.25), '#9c27b0', false));
+      break;
+
+    case 6: // Transformations (Bend, Taper)
+      drawBaseOutline('#e0e0e0');
+      // Highlight bending spout
+      commands.push(shapes.drawEllipse(cx - Math.floor(r*1.4), cy - Math.floor(r*0.4), Math.floor(r*0.4), Math.floor(r*0.2), '#ff9800', false));
+      // Tapering lid
+      commands.push(shapes.drawLine(cx - Math.floor(r*0.6), cy - r, cx, cy - r - 15, '#ff9800'));
+      commands.push(shapes.drawLine(cx + Math.floor(r*0.6), cy - r, cx, cy - r - 15, '#ff9800'));
+      break;
+
+    case 7: // Secondary parts
+      drawBaseOutline('#e0e0e0');
+      // Boldly highlight spout and handle
+      commands.push(shapes.drawLine(cx - r, cy, cx - Math.floor(r*1.8), cy - Math.floor(r*0.8), '#ff5722'));
+      commands.push(shapes.drawLine(cx - Math.floor(r*0.8), cy + Math.floor(r*0.4), cx - Math.floor(r*1.5), cy - Math.floor(r*0.6), '#ff5722'));
+      const hPts = [];
+      for(let i=0; i<=10; i++) {
+        const a = -Math.PI/2 + (i/10)*Math.PI;
+        hPts.push({x: Math.round(cx + r + Math.floor(r*0.8)*Math.cos(a)), y: Math.round(cy - Math.floor(r*0.2) + Math.floor(r*0.6)*Math.sin(a))});
+      }
+      commands.push(shapes.drawPolyline(hPts, '#3f51b5'));
+      break;
+
+    case 8: // Surfaces (Convex, Concave)
+      drawBaseOutline('#e0e0e0');
+      // Convex body
+      commands.push(shapes.drawCircle(cx, cy, r, '#8bc34a', false));
+      // Concave inner handle space
+      commands.push(shapes.drawEllipse(cx + r + Math.floor(r*0.2), cy - Math.floor(r*0.2), Math.floor(r*0.3), Math.floor(r*0.5), '#00bcd4', false));
+      break;
+
+    case 9: // Perspective
+      drawBaseOutline(color);
+      // Horizon line above
+      const horizonY = cy - r - 50;
+      const vpX = cx + Math.floor(r*2);
+      commands.push(shapes.drawLine(0, horizonY, scale*2, horizonY, '#9e9e9e'));
+      commands.push(shapes.drawCircle(vpX, horizonY, 3, '#ff0000', true));
+      // Orthogonals from top and bottom to VP
+      commands.push(shapes.drawLine(cx, cy - r, vpX, horizonY, '#bdbdbd'));
+      commands.push(shapes.drawLine(cx, cy + r, vpX, horizonY, '#bdbdbd'));
+      break;
+
+    case 10: // Lighting
+      // Re-use shaded sphere for the main body
+      commands.push(...lightShapes.drawShadedSphere(cx, cy, r, -Math.PI*0.75));
+      // We skip the detailed spout/handle shading to stay within line limits, 
+      // but draw them solidly over the sphere to complete the form
+      const c = '#546e7a';
+      commands.push(shapes.drawLine(cx - r, cy, cx - Math.floor(r*1.8), cy - Math.floor(r*0.8), c));
+      commands.push(shapes.drawLine(cx - Math.floor(r*0.8), cy + Math.floor(r*0.4), cx - Math.floor(r*1.5), cy - Math.floor(r*0.6), c));
+      break;
+
+    default:
+      drawBaseOutline(color);
+      break;
+  }
+
+  return commands;
+}
+
+module.exports = {
+  drawTeapotAnalysis
+};

package/domains/art-tree/analysis_tools.js

@@ -0,0 +1,49 @@
+const { z } = require('zod');
+const { registerTool, sendCommand } = require('../../core/server');
+const analysisLessons = require('./analysis_lessons');
+
+const hexColor = z.string().regex(/^#[0-9a-fA-F]{6}$/).describe('Hex color e.g. #ff0000');
+
+/**
+ * Register all analysis tools on the MCP server.
+ * @param {McpServer} server
+ */
+function register(server) {
+  registerTool(server, 'art_tree_lesson_analysis_step',
+    'Lesson: Capstone - 10-Step Object Analysis of a Teapot. Pass step (1 to 10).',
+    { 
+      canvasSize: z.number().int().min(16).max(64).default(32),
+      step: z.number().int().min(1).max(10).describe('The analysis step to view (1=Silhouette, 2=Proportions, ..., 10=Lighting)'),
+      color: hexColor.default('#2196f3')
+    },
+    async (p) => {
+      const commands = analysisLessons.lessonObjectAnalysis(p.canvasSize, p.step, p.color);
+      await Promise.all(commands.map(cmd => sendCommand(cmd)));
+      const steps = [
+        "1. Silhouette (Hình bao ngoài)",
+        "2. Proportions (Tỉ lệ)",
+        "3. Axis (Trục)",
+        "4. Main masses (Khối lớn)",
+        "5. Cross-sections (Mặt cắt)",
+        "6. Transformations (Biến dạng)",
+        "7. Secondary parts (Các bộ phận phụ)",
+        "8. Surfaces (Bề mặt)",
+        "9. Perspective (Phối cảnh)",
+        "10. Lighting (Ánh sáng)"
+      ];
+      return { content: [{ type: 'text', text: `✓ Step ${p.step} Analysis completed: ${steps[p.step - 1]}` }] };
+    });
+
+  registerTool(server, 'art_tree_lesson_analysis_catalog',
+    'Get the catalog of all available Analysis lessons',
+    {},
+    () => {
+      const catalog = analysisLessons.getAnalysisLessonCatalog();
+      const text = catalog.map(l =>
+        `  • ${l.id}: ${l.name} — ${l.description}`
+      ).join('\n');
+      return { content: [{ type: 'text', text: `📚 Analysis Lessons:\n\n${text}` }] };
+    });
+}
+
+module.exports = { register };

package/domains/art-tree/cross_section_lessons.js

@@ -0,0 +1,65 @@
+const csShapes = require('./cross_section_shapes');
+
+/**
+ * Lesson: Bottle Sections (Base, Body, Shoulder, Neck, Mouth)
+ */
+function lessonBottleSections(canvasSize = 32, color = '#2196f3') {
+  const cx = Math.floor(canvasSize / 2);
+  const totalH = Math.floor(canvasSize * 0.8);
+  const topY = Math.floor(canvasSize * 0.1);
+  const bottomY = topY + totalH;
+
+  const sections = [
+    { y: topY, r: Math.floor(canvasSize * 0.08) },                        // Mouth (slightly open)
+    { y: topY + Math.floor(totalH * 0.1), r: Math.floor(canvasSize * 0.06) }, // Neck (narrow)
+    { y: topY + Math.floor(totalH * 0.3), r: Math.floor(canvasSize * 0.2) },  // Shoulder (shrinking to body)
+    { y: topY + Math.floor(totalH * 0.6), r: Math.floor(canvasSize * 0.25) }, // Body (wide)
+    { y: bottomY, r: Math.floor(canvasSize * 0.25) }                      // Base (wide)
+  ];
+
+  return csShapes.drawLoftedForm(cx, topY, bottomY, sections, color, true);
+}
+
+/**
+ * Lesson: Glass Sections (Base, Mid, Mouth)
+ */
+function lessonGlassSections(canvasSize = 32, color = '#9c27b0') {
+  const cx = Math.floor(canvasSize / 2);
+  const totalH = Math.floor(canvasSize * 0.6);
+  const topY = Math.floor(canvasSize * 0.2);
+  const bottomY = topY + totalH;
+
+  const sections = [
+    { y: topY, r: Math.floor(canvasSize * 0.3) },                         // Mouth (wide)
+    { y: topY + Math.floor(totalH * 0.5), r: Math.floor(canvasSize * 0.2) },  // Mid body (widening)
+    { y: bottomY, r: Math.floor(canvasSize * 0.15) }                      // Base (small)
+  ];
+
+  return csShapes.drawLoftedForm(cx, topY, bottomY, sections, color, true);
+}
+
+/**
+ * Lesson: Head Sections (Cranium, Face, Jaw)
+ */
+function lessonHeadSections(canvasSize = 32, color = '#ff9800') {
+  const cx = Math.floor(canvasSize / 2);
+  const cy = Math.floor(canvasSize / 2);
+  const height = Math.floor(canvasSize * 0.8);
+
+  return csShapes.drawHeadStructure(cx, cy, height, color);
+}
+
+function getCrossSectionLessonCatalog() {
+  return [
+    { id: 'cs_bottle', name: 'Bottle Cross-sections', description: 'Base, body, shoulder, neck, mouth', fn: lessonBottleSections },
+    { id: 'cs_glass', name: 'Glass Cross-sections', description: 'Base, body, mouth', fn: lessonGlassSections },
+    { id: 'cs_head', name: 'Head Cross-sections', description: 'Cranium, face, jaw', fn: lessonHeadSections },
+  ];
+}
+
+module.exports = {
+  lessonBottleSections,
+  lessonGlassSections,
+  lessonHeadSections,
+  getCrossSectionLessonCatalog
+};

package/domains/art-tree/cross_section_shapes.js

@@ -0,0 +1,84 @@
+const shapes = require('./shapes');
+const ellipseShapes = require('./ellipse_shapes');
+
+/**
+ * Draw a lofted 3D form by providing a central axis and cross-sections.
+ * @param {number} cx Center X
+ * @param {number} topY Top Y of the axis
+ * @param {number} bottomY Bottom Y of the axis
+ * @param {Array<{y: number, r: number}>} sections Slices sorted from top to bottom (or bottom to top)
+ * @param {string} color 
+ * @param {boolean} drawAxis Whether to draw the central vertical axis
+ */
+function drawLoftedForm(cx, topY, bottomY, sections, color, drawAxis = true) {
+  const commands = [];
+  
+  if (drawAxis) {
+    commands.push(shapes.drawLine(cx, topY - 5, cx, bottomY + 5, '#bdbdbd'));
+  }
+
+  // Sort sections by y to ensure we can connect them properly
+  const sorted = [...sections].sort((a, b) => a.y - b.y);
+
+  // Draw ellipses and connect edges
+  for (let i = 0; i < sorted.length; i++) {
+    const sec = sorted[i];
+    const ry = Math.max(2, Math.floor(sec.r * 0.3)); // perspective foreshortening
+    
+    // Draw cross-section ellipse
+    commands.push(shapes.drawEllipse(cx, sec.y, sec.r, ry, color, false));
+    
+    // Connect to next section's edges
+    if (i < sorted.length - 1) {
+      const nextSec = sorted[i + 1];
+      // Left contour
+      commands.push(shapes.drawLine(cx - sec.r, sec.y, cx - nextSec.r, nextSec.y, color));
+      // Right contour
+      commands.push(shapes.drawLine(cx + sec.r, sec.y, cx + nextSec.r, nextSec.y, color));
+    }
+  }
+
+  return commands;
+}
+
+/**
+ * Draw the structural volume of a head using cross sections
+ */
+function drawHeadStructure(cx, cy, height, color) {
+  const commands = [];
+  
+  const topY = cy - Math.floor(height / 2);
+  const bottomY = cy + Math.floor(height / 2);
+  
+  // 1. Cranium (large sphere at the top)
+  const craniumR = Math.floor(height * 0.35);
+  const craniumY = topY + craniumR;
+  commands.push(shapes.drawCircle(cx, craniumY, craniumR, color, false));
+  
+  // Cranium cross sections (horizontal and vertical)
+  commands.push(shapes.drawEllipse(cx, craniumY, craniumR, Math.floor(craniumR * 0.4), '#03a9f4', false));
+  commands.push(shapes.drawEllipse(cx, craniumY, Math.floor(craniumR * 0.3), craniumR, '#03a9f4', false));
+  
+  // 2. Face & Jaw (narrowing down)
+  const jawR = Math.floor(craniumR * 0.6);
+  const jawY = bottomY - Math.floor(jawR * 0.5);
+  
+  // Jaw cross section
+  commands.push(shapes.drawEllipse(cx, jawY, jawR, Math.floor(jawR * 0.3), '#e91e63', false));
+  
+  // Connect Cranium to Jaw (Cheekbones/Jawline)
+  // Left side
+  commands.push(shapes.drawLine(cx - craniumR, craniumY, cx - jawR, jawY, color));
+  // Right side
+  commands.push(shapes.drawLine(cx + craniumR, craniumY, cx + jawR, jawY, color));
+  
+  // Central facial axis (Center line of the face)
+  commands.push(shapes.drawLine(cx, topY, cx, bottomY, '#4caf50'));
+
+  return commands;
+}
+
+module.exports = {
+  drawLoftedForm,
+  drawHeadStructure
+};

package/domains/art-tree/cross_section_tools.js

@@ -0,0 +1,51 @@
+const { z } = require('zod');
+const { registerTool, sendCommand } = require('../../core/server');
+const csLessons = require('./cross_section_lessons');
+
+const hexColor = z.string().regex(/^#[0-9a-fA-F]{6}$/).describe('Hex color e.g. #ff0000');
+
+/**
+ * Register all cross-section tools on the MCP server.
+ * @param {McpServer} server
+ */
+function register(server) {
+  registerTool(server, 'art_tree_lesson_cs_bottle',
+    'Lesson: Cross-sections - Bottle Analysis (Base, body, shoulder, neck, mouth)',
+    { canvasSize: z.number().int().min(16).max(64).default(32), color: hexColor.default('#2196f3') },
+    async (p) => {
+      const commands = csLessons.lessonBottleSections(p.canvasSize, p.color);
+      await Promise.all(commands.map(cmd => sendCommand(cmd)));
+      return { content: [{ type: 'text', text: `✓ Bottle Cross-sections lesson completed` }] };
+    });
+
+  registerTool(server, 'art_tree_lesson_cs_glass',
+    'Lesson: Cross-sections - Glass Analysis (Base, mid, mouth)',
+    { canvasSize: z.number().int().min(16).max(64).default(32), color: hexColor.default('#9c27b0') },
+    async (p) => {
+      const commands = csLessons.lessonGlassSections(p.canvasSize, p.color);
+      await Promise.all(commands.map(cmd => sendCommand(cmd)));
+      return { content: [{ type: 'text', text: `✓ Glass Cross-sections lesson completed` }] };
+    });
+
+  registerTool(server, 'art_tree_lesson_cs_head',
+    'Lesson: Cross-sections - Head Analysis (Cranium, face, jaw)',
+    { canvasSize: z.number().int().min(16).max(64).default(32), color: hexColor.default('#ff9800') },
+    async (p) => {
+      const commands = csLessons.lessonHeadSections(p.canvasSize, p.color);
+      await Promise.all(commands.map(cmd => sendCommand(cmd)));
+      return { content: [{ type: 'text', text: `✓ Head Cross-sections lesson completed` }] };
+    });
+
+  registerTool(server, 'art_tree_lesson_cs_catalog',
+    'Get the catalog of all available Cross-section lessons',
+    {},
+    () => {
+      const catalog = csLessons.getCrossSectionLessonCatalog();
+      const text = catalog.map(l =>
+        `  • ${l.id}: ${l.name} — ${l.description}`
+      ).join('\n');
+      return { content: [{ type: 'text', text: `📚 Cross-section Lessons:\n\n${text}` }] };
+    });
+}
+
+module.exports = { register };

package/domains/art-tree/curve_lessons.js

@@ -0,0 +1,138 @@
+const shapes = require('./shapes');
+const curveShapes = require('./curve_shapes');
+
+/**
+ * Lesson 1: Curve Types (C, S, Convex, Concave)
+ */
+function lessonCurveTypes(canvasSize = 32, color = '#2196f3') {
+  const margin = Math.floor(canvasSize * 0.1);
+  const commands = [];
+  
+  const w = Math.floor(canvasSize / 2) - margin * 2;
+  const h = Math.floor(canvasSize / 2) - margin * 2;
+
+  // C Curve (Top Left)
+  const cP0 = { x: margin + w, y: margin };
+  const cP1 = { x: margin - w, y: margin + Math.floor(h/2) }; // Pulls curve left
+  const cP2 = { x: margin + w, y: margin + h };
+  commands.push(...curveShapes.drawQuadraticCurve(cP0, cP1, cP2, color));
+
+  // S Curve (Top Right)
+  const sP0 = { x: canvasSize - margin, y: margin };
+  const sP1 = { x: canvasSize - margin - w*2, y: margin };
+  const sP2 = { x: canvasSize - margin + w, y: margin + h };
+  const sP3 = { x: canvasSize - margin - w, y: margin + h };
+  commands.push(...curveShapes.drawCubicCurve(sP0, sP1, sP2, sP3, '#e91e63'));
+
+  // Convex (Bottom Left, viewed from bottom)
+  const cvxP0 = { x: margin, y: canvasSize - margin };
+  const cvxP1 = { x: margin + Math.floor(w/2), y: canvasSize - margin - h };
+  const cvxP2 = { x: margin + w, y: canvasSize - margin };
+  commands.push(...curveShapes.drawQuadraticCurve(cvxP0, cvxP1, cvxP2, '#4caf50'));
+
+  // Concave (Bottom Right, viewed from bottom)
+  const cnvP0 = { x: canvasSize - margin - w, y: canvasSize - margin - Math.floor(h/2) };
+  const cnvP1 = { x: canvasSize - margin - Math.floor(w/2), y: canvasSize - margin + h };
+  const cnvP2 = { x: canvasSize - margin, y: canvasSize - margin - Math.floor(h/2) };
+  commands.push(...curveShapes.drawQuadraticCurve(cnvP0, cnvP1, cnvP2, '#ff9800'));
+
+  return commands;
+}
+
+/**
+ * Lesson 2: Curve Topology (Closed, Open, Symmetrical, Asymmetrical)
+ */
+function lessonCurveTopology(canvasSize = 32, color = '#9c27b0') {
+  const mid = Math.floor(canvasSize / 2);
+  const q = Math.floor(canvasSize / 4);
+  const commands = [];
+
+  // Closed Curve (Circle-like using Bezier for demonstration)
+  // Since we already have drawCircle, we just draw a circle to represent a closed curve
+  commands.push(shapes.drawCircle(q, q, Math.floor(q*0.8), color, false));
+  
+  // Open Curve (Quadratic)
+  commands.push(...curveShapes.drawQuadraticCurve(
+    { x: canvasSize - q*1.5, y: q },
+    { x: canvasSize - q*0.5, y: q - q/2 },
+    { x: canvasSize - q*0.5, y: q + q/2 },
+    '#3f51b5'
+  ));
+
+  // Symmetrical Curve (Parabola-like)
+  commands.push(...curveShapes.drawQuadraticCurve(
+    { x: q*0.5, y: canvasSize - q*0.5 },
+    { x: q, y: canvasSize - q*1.5 },
+    { x: q*1.5, y: canvasSize - q*0.5 },
+    '#00bcd4'
+  ));
+
+  // Asymmetrical Curve
+  commands.push(...curveShapes.drawQuadraticCurve(
+    { x: canvasSize - q*1.5, y: canvasSize - q*0.5 },
+    { x: canvasSize - q*0.2, y: canvasSize - q*1.8 }, // Pull point is skewed
+    { x: canvasSize - q*0.5, y: canvasSize - q*0.5 },
+    '#ff5722'
+  ));
+
+  return commands;
+}
+
+/**
+ * Lesson 3: Curve Properties (Start, Direction, Curvature, Inflection, Transition)
+ */
+function lessonCurveProperties(canvasSize = 32, color = '#607d8b') {
+  const margin = Math.floor(canvasSize * 0.1);
+  const commands = [];
+
+  // 1. Start point and Direction (Top Left Curve)
+  const p0 = { x: margin, y: margin * 2 };
+  const p1 = { x: margin + canvasSize*0.3, y: margin };
+  const p2 = { x: margin + canvasSize*0.3, y: margin + canvasSize*0.3 };
+  commands.push(...curveShapes.drawQuadraticCurve(p0, p1, p2, color));
+  commands.push(curveShapes.drawStartMarker(p0.x, p0.y, '#00ff00')); // Green dot at start
+  commands.push(...curveShapes.drawDirectionArrow(p0, p1, p2, null, '#ff0000')); // Red arrow
+
+  // 2. Curvature comparison (Bottom Left)
+  // Strong vs Weak curve with same endpoints
+  const bp0 = { x: margin, y: canvasSize - margin };
+  const bp2 = { x: margin + canvasSize*0.4, y: canvasSize - margin };
+  // Weak curve
+  commands.push(...curveShapes.drawQuadraticCurve(bp0, { x: margin + canvasSize*0.2, y: canvasSize - margin - canvasSize*0.1 }, bp2, '#8bc34a'));
+  // Strong curve
+  commands.push(...curveShapes.drawQuadraticCurve(bp0, { x: margin + canvasSize*0.2, y: canvasSize - margin - canvasSize*0.4 }, bp2, '#388e3c'));
+
+  // 3. Inflection point (Top Right S Curve)
+  const sP0 = { x: canvasSize - margin - canvasSize*0.3, y: margin };
+  const sP1 = { x: canvasSize - margin, y: margin };
+  const sP2 = { x: canvasSize - margin - canvasSize*0.4, y: margin + canvasSize*0.3 };
+  const sP3 = { x: canvasSize - margin, y: margin + canvasSize*0.3 };
+  commands.push(...curveShapes.drawCubicCurve(sP0, sP1, sP2, sP3, '#03a9f4'));
+  // Inflection point roughly at t=0.5
+  const inflection = curveShapes.cubicBezier(sP0, sP1, sP2, sP3, 0.5);
+  commands.push(curveShapes.drawInflectionMarker(inflection.x, inflection.y, '#ff9800'));
+
+  // 4. Transition (Bottom Right - line transitioning to curve)
+  const startLine = { x: canvasSize - margin - canvasSize*0.3, y: canvasSize - margin - canvasSize*0.2 };
+  const transPt = { x: canvasSize - margin - canvasSize*0.1, y: canvasSize - margin - canvasSize*0.2 };
+  commands.push(shapes.drawLine(startLine.x, startLine.y, transPt.x, transPt.y, '#9e9e9e'));
+  // Curve starting tangentially
+  commands.push(...curveShapes.drawQuadraticCurve(transPt, { x: canvasSize - margin, y: canvasSize - margin - canvasSize*0.2 }, { x: canvasSize - margin, y: canvasSize - margin }, '#795548'));
+
+  return commands;
+}
+
+function getCurveLessonCatalog() {
+  return [
+    { id: 'curve_types', name: 'Curve Types', description: 'C, S, Convex, and Concave curves', fn: lessonCurveTypes },
+    { id: 'curve_topology', name: 'Curve Topology', description: 'Closed, Open, Symmetrical, Asymmetrical curves', fn: lessonCurveTopology },
+    { id: 'curve_properties', name: 'Curve Properties', description: 'Start point, Direction, Curvature, Inflection, and Transitions', fn: lessonCurveProperties },
+  ];
+}
+
+module.exports = {
+  lessonCurveTypes,
+  lessonCurveTopology,
+  lessonCurveProperties,
+  getCurveLessonCatalog
+};

package/domains/art-tree/curve_shapes.js

@@ -0,0 +1,90 @@
+const shapes = require('./shapes');
+
+/**
+ * Draw a marker at the start of a curve
+ */
+function drawStartMarker(x, y, color = '#00ff00') {
+  return shapes.drawCircle(x, y, 2, color, true);
+}
+
+/**
+ * Draw an inflection point marker
+ */
+function drawInflectionMarker(x, y, color = '#ff0000') {
+  return shapes.drawCircle(x, y, 2, color, true);
+}
+
+/**
+ * Calculate quadratic bezier point
+ */
+function quadraticBezier(p0, p1, p2, t) {
+  const x = Math.round((1 - t) * (1 - t) * p0.x + 2 * (1 - t) * t * p1.x + t * t * p2.x);
+  const y = Math.round((1 - t) * (1 - t) * p0.y + 2 * (1 - t) * t * p1.y + t * t * p2.y);
+  return { x, y };
+}
+
+/**
+ * Draw a quadratic bezier curve as a polyline
+ */
+function drawQuadraticCurve(p0, p1, p2, color, segments = 20) {
+  const points = [];
+  for (let i = 0; i <= segments; i++) {
+    const t = i / segments;
+    points.push(quadraticBezier(p0, p1, p2, t));
+  }
+  return shapes.drawPolyline(points, color);
+}
+
+/**
+ * Calculate cubic bezier point
+ */
+function cubicBezier(p0, p1, p2, p3, t) {
+  const x = Math.round(Math.pow(1 - t, 3) * p0.x + 3 * Math.pow(1 - t, 2) * t * p1.x + 3 * (1 - t) * t * t * p2.x + t * t * t * p3.x);
+  const y = Math.round(Math.pow(1 - t, 3) * p0.y + 3 * Math.pow(1 - t, 2) * t * p1.y + 3 * (1 - t) * t * t * p2.y + t * t * t * p3.y);
+  return { x, y };
+}
+
+/**
+ * Draw a cubic bezier curve as a polyline
+ */
+function drawCubicCurve(p0, p1, p2, p3, color, segments = 30) {
+  const points = [];
+  for (let i = 0; i <= segments; i++) {
+    const t = i / segments;
+    points.push(cubicBezier(p0, p1, p2, p3, t));
+  }
+  return shapes.drawPolyline(points, color);
+}
+
+/**
+ * Draw a direction arrow roughly along the curve at t=0.5
+ */
+function drawDirectionArrow(p0, p1, p2, p3 = null, color = '#ff0000') {
+  const commands = [];
+  const t = 0.5;
+  const pt = p3 ? cubicBezier(p0, p1, p2, p3, t) : quadraticBezier(p0, p1, p2, t);
+  const ptNext = p3 ? cubicBezier(p0, p1, p2, p3, t + 0.1) : quadraticBezier(p0, p1, p2, t + 0.1);
+  
+  // Calculate angle
+  const angle = Math.atan2(ptNext.y - pt.y, ptNext.x - pt.x);
+  
+  // Draw arrow head
+  const arrowLen = 4;
+  const a1 = angle + Math.PI * 0.8;
+  const a2 = angle - Math.PI * 0.8;
+  
+  commands.push(shapes.drawLine(pt.x, pt.y, Math.round(pt.x + arrowLen * Math.cos(a1)), Math.round(pt.y + arrowLen * Math.sin(a1)), color));
+  commands.push(shapes.drawLine(pt.x, pt.y, Math.round(pt.x + arrowLen * Math.cos(a2)), Math.round(pt.y + arrowLen * Math.sin(a2)), color));
+  
+  return commands;
+}
+
+module.exports = {
+  drawStartMarker,
+  drawInflectionMarker,
+  quadraticBezier,
+  drawQuadraticCurve,
+  cubicBezier,
+  drawCubicCurve,
+  drawDirectionArrow
+};

package/domains/art-tree/curve_tools.js

@@ -0,0 +1,51 @@
+const { z } = require('zod');
+const { registerTool, sendCommand } = require('../../core/server');
+const curveLessons = require('./curve_lessons');
+
+const hexColor = z.string().regex(/^#[0-9a-fA-F]{6}$/).describe('Hex color e.g. #ff0000');
+
+/**
+ * Register all advanced curve tools on the MCP server.
+ * @param {McpServer} server
+ */
+function register(server) {
+  registerTool(server, 'art_tree_lesson_curve_types',
+    'Lesson: Advanced Curves - Types (C, S, Convex, Concave)',
+    { canvasSize: z.number().int().min(16).max(64).default(32), color: hexColor.default('#2196f3') },
+    async (p) => {
+      const commands = curveLessons.lessonCurveTypes(p.canvasSize, p.color);
+      await Promise.all(commands.map(cmd => sendCommand(cmd)));
+      return { content: [{ type: 'text', text: `✓ Curve Types lesson completed` }] };
+    });
+
+  registerTool(server, 'art_tree_lesson_curve_topology',
+    'Lesson: Advanced Curves - Topology (Closed, Open, Symmetrical, Asymmetrical)',
+    { canvasSize: z.number().int().min(16).max(64).default(32), color: hexColor.default('#9c27b0') },
+    async (p) => {
+      const commands = curveLessons.lessonCurveTopology(p.canvasSize, p.color);
+      await Promise.all(commands.map(cmd => sendCommand(cmd)));
+      return { content: [{ type: 'text', text: `✓ Curve Topology lesson completed` }] };
+    });
+
+  registerTool(server, 'art_tree_lesson_curve_properties',
+    'Lesson: Advanced Curves - Properties (Start, Direction, Curvature, Inflection, Transitions)',
+    { canvasSize: z.number().int().min(16).max(64).default(32), color: hexColor.default('#607d8b') },
+    async (p) => {
+      const commands = curveLessons.lessonCurveProperties(p.canvasSize, p.color);
+      await Promise.all(commands.map(cmd => sendCommand(cmd)));
+      return { content: [{ type: 'text', text: `✓ Curve Properties lesson completed` }] };
+    });
+
+  registerTool(server, 'art_tree_lesson_curve_catalog',
+    'Get the catalog of all available Advanced Curve lessons',
+    {},
+    () => {
+      const catalog = curveLessons.getCurveLessonCatalog();
+      const text = catalog.map(l =>
+        `  • ${l.id}: ${l.name} — ${l.description}`
+      ).join('\n');
+      return { content: [{ type: 'text', text: `📚 Advanced Curve Lessons:\n\n${text}` }] };
+    });
+}
+
+module.exports = { register };