@pixel-normal-edit/mcp 2.0.6 → 2.0.8

package/domains/art-tree/lessons.js

@@ -165,19 +165,125 @@ function lessonComposition(canvasSize = 32) {
   ];
 }
 
+/**
+ * Lesson 8: Freehand — Practice freehand drawing with simulated hand tremor.
+ */
+function lessonFreehand(canvasSize = 32, color = '#795548') {
+  const margin = Math.floor(canvasSize * 0.1);
+  const points = [];
+  let y = Math.floor(canvasSize / 2);
+  for (let x = margin; x < canvasSize - margin; x += 2) {
+    points.push({ x, y: y + Math.floor(Math.random() * 3) - 1 });
+  }
+  return shapes.drawPolyline(points, color);
+}
+
+/**
+ * Lesson 9: Proportions and Angles — Practice maintaining proportions and angles.
+ */
+function lessonProportionsAndAngles(canvasSize = 32, color = '#3f51b5') {
+  const mid = Math.floor(canvasSize / 2);
+  const size1 = Math.floor(canvasSize * 0.4);
+  const size2 = Math.floor(size1 / 2);
+  return [
+    shapes.drawSquare(mid - Math.floor(size1/2), mid - Math.floor(size1/2), size1, color, false),
+    shapes.drawSquare(mid - Math.floor(size2/2), mid - Math.floor(size2/2), size2, '#e91e63', false),
+    shapes.drawLine(mid, mid, mid + size1, mid - size1, '#009688')
+  ];
+}
+
+/**
+ * Lesson 10: Curves — C-curves and S-curves.
+ */
+function lessonCurves(canvasSize = 32, color = '#9c27b0') {
+  const commands = [];
+  const mid = Math.floor(canvasSize / 2);
+  const r = Math.floor(canvasSize * 0.15);
+  // C curve
+  const cPoints = [];
+  for (let i = -Math.PI/2; i <= Math.PI/2; i += 0.2) {
+    cPoints.push({ x: Math.round(mid - r - r * Math.cos(i)), y: Math.round(mid / 2 + r * Math.sin(i)) });
+  }
+  commands.push(...shapes.drawPolyline(cPoints, color));
+  // S curve
+  const sPoints = [];
+  for (let i = -Math.PI/2; i <= Math.PI*1.5; i += 0.2) {
+    const isTop = i < Math.PI/2;
+    const cy = isTop ? (mid + Math.floor(canvasSize*0.1)) : (mid + Math.floor(canvasSize*0.1) + r*2);
+    const signX = isTop ? -1 : 1;
+    sPoints.push({ x: Math.round(mid + r + signX * r * Math.cos(i)), y: Math.round(cy + r * Math.sin(i)) });
+  }
+  commands.push(...shapes.drawPolyline(sPoints, '#e91e63'));
+  return commands;
+}
+
+/**
+ * Lesson 11: Spiral — Drawing spiral curves.
+ */
+function lessonSpiral(canvasSize = 32, color = '#ff9800') {
+  const mid = Math.floor(canvasSize / 2);
+  const points = [];
+  const maxRadius = Math.floor(canvasSize * 0.4);
+  const loops = 3;
+  for (let angle = 0; angle < Math.PI * 2 * loops; angle += 0.3) {
+    const r = (angle / (Math.PI * 2 * loops)) * maxRadius;
+    points.push({ x: Math.round(mid + r * Math.cos(angle)), y: Math.round(mid + r * Math.sin(angle)) });
+  }
+  return shapes.drawPolyline(points, color);
+}
+
+/**
+ * Lesson 12: Strokes — Long strokes, short strokes, thick and thin lines.
+ */
+function lessonStrokes(canvasSize = 32, color = '#2196f3') {
+  const margin = Math.floor(canvasSize * 0.1);
+  const y1 = Math.floor(canvasSize * 0.3);
+  const y2 = Math.floor(canvasSize * 0.5);
+  const y3 = Math.floor(canvasSize * 0.7);
+  return [
+    shapes.drawLine(margin, y1, canvasSize - margin, y1, color),
+    shapes.drawLine(margin, y2, Math.floor(canvasSize / 2), y2, '#4caf50'),
+    shapes.drawLine(margin, y3, canvasSize - margin, y3, '#f44336'),
+    shapes.drawLine(margin, y3 + 1, canvasSize - margin, y3 + 1, '#f44336'),
+    shapes.drawLine(margin, y3 + 2, canvasSize - margin, y3 + 2, '#f44336'),
+  ];
+}
+
+/**
+ * Lesson 13: Parallel & Intersecting Lines — Drawing parallel and intersecting lines.
+ */
+function lessonParallelAndIntersecting(canvasSize = 32, color = '#00bcd4') {
+  const margin = Math.floor(canvasSize * 0.1);
+  const mid = Math.floor(canvasSize / 2);
+  const offset = 4;
+  return [
+    shapes.drawLine(margin, margin, canvasSize - margin, margin, color),
+    shapes.drawLine(margin, margin + offset, canvasSize - margin, margin + offset, color),
+    shapes.drawLine(margin, margin + offset * 2, canvasSize - margin, margin + offset * 2, color),
+    shapes.drawLine(mid - offset*2, mid, mid + offset*2, canvasSize - margin, '#ff5722'),
+    shapes.drawLine(mid + offset*2, mid, mid - offset*2, canvasSize - margin, '#ff5722')
+  ];
+}
+
 /**
  * Get all available lessons with metadata.
  * @returns {Array<{id: string, name: string, description: string, fn: Function}>}
  */
 function getLessonCatalog() {
   return [
-    { id: 'lines', name: 'Đường thẳng', description: 'Vẽ đường thẳng ngang, dọc và chéo', fn: lessonLines },
-    { id: 'squares', name: 'Hình vuông & Hình chữ nhật', description: 'Hiểu về góc vuông và tỷ lệ', fn: lessonSquares },
-    { id: 'circles', name: 'Hình tròn', description: 'Làm quen với đường cong và đối xứng', fn: lessonCircles },
-    { id: 'ellipses', name: 'Hình elip', description: 'Hiểu về hình bầu dục và tỷ lệ', fn: lessonEllipses },
-    { id: 'triangles', name: 'Hình tam giác', description: 'Hình ba cạnh và sự ổn định', fn: lessonTriangles },
-    { id: 'polygons', name: 'Đa giác', description: 'Hình nhiều cạnh', fn: lessonPolygons },
-    { id: 'composition', name: 'Tổng hợp', description: 'Kết hợp các hình cơ bản tạo vật thể đơn giản', fn: lessonComposition },
+    { id: 'lines', name: 'Lines', description: 'Draw horizontal, vertical and diagonal lines', fn: lessonLines },
+    { id: 'squares', name: 'Squares & Rectangles', description: 'Understand right angles and proportions', fn: lessonSquares },
+    { id: 'circles', name: 'Circles', description: 'Learn curves and symmetry', fn: lessonCircles },
+    { id: 'ellipses', name: 'Ellipses', description: 'Understand oval shapes and proportions', fn: lessonEllipses },
+    { id: 'triangles', name: 'Triangles', description: 'Three-point shapes and stability', fn: lessonTriangles },
+    { id: 'polygons', name: 'Polygons', description: 'Multi-sided shapes', fn: lessonPolygons },
+    { id: 'composition', name: 'Composition', description: 'Combine basic shapes to create simple objects', fn: lessonComposition },
+    { id: 'freehand', name: 'Freehand Drawing', description: 'Practice freehand drawing without rulers', fn: lessonFreehand },
+    { id: 'proportions', name: 'Proportions & Angles', description: 'Practice maintaining proportions and angles', fn: lessonProportionsAndAngles },
+    { id: 'curves', name: 'Curves', description: 'C-curves and S-curves', fn: lessonCurves },
+    { id: 'spiral', name: 'Spiral', description: 'Drawing spiral curves', fn: lessonSpiral },
+    { id: 'strokes', name: 'Stroke Types', description: 'Long strokes, short strokes, thick and thin lines', fn: lessonStrokes },
+    { id: 'parallel_intersecting', name: 'Parallel & Intersecting', description: 'Draw parallel and intersecting lines', fn: lessonParallelAndIntersecting },
   ];
 }
 
@@ -189,5 +295,11 @@ module.exports = {
   lessonTriangles,
   lessonPolygons,
   lessonComposition,
+  lessonFreehand,
+  lessonProportionsAndAngles,
+  lessonCurves,
+  lessonSpiral,
+  lessonStrokes,
+  lessonParallelAndIntersecting,
   getLessonCatalog,
 };

package/domains/art-tree/light_lessons.js

@@ -0,0 +1,92 @@
+const shapes = require('./shapes');
+const lightShapes = require('./light_shapes');
+
+/**
+ * Lesson: 6 Zones of Light (Sphere)
+ * Highlight, Light, Halftone, Core shadow, Reflected light, Cast shadow.
+ */
+function lessonLightZones(canvasSize = 32) {
+  const commands = [];
+  const cx = Math.floor(canvasSize / 2);
+  const cy = Math.floor(canvasSize / 2);
+  const r = Math.floor(canvasSize * 0.25);
+  
+  // Light from top-left (approx -45 degrees or -135 degrees mathematically)
+  const lightAngle = -Math.PI * 0.75; 
+
+  // Draw light source
+  const lx = cx + Math.floor(r * 2 * Math.cos(lightAngle));
+  const ly = cy + Math.floor(r * 2 * Math.sin(lightAngle));
+  commands.push(...lightShapes.drawLightSource(lx, ly, Math.floor(canvasSize * 0.05)));
+
+  // Draw shaded sphere
+  commands.push(...lightShapes.drawShadedSphere(cx, cy, r, lightAngle));
+
+  return commands;
+}
+
+/**
+ * Lesson: Light Direction & Intensity (Light direction and plane values)
+ * Shows a box with planes facing/turning away from light.
+ */
+function lessonLightDirection(canvasSize = 32) {
+  const commands = [];
+  const cx = Math.floor(canvasSize / 2);
+  const cy = Math.floor(canvasSize / 2);
+  const w = Math.floor(canvasSize * 0.25);
+  const h = Math.floor(canvasSize * 0.25);
+
+  // Light from top-left
+  const lightAngle = -Math.PI * 0.8; 
+  
+  const lx = cx - Math.floor(canvasSize * 0.35);
+  const ly = cy - Math.floor(canvasSize * 0.35);
+  commands.push(...lightShapes.drawLightSource(lx, ly, Math.floor(canvasSize * 0.05)));
+
+  // Draw shaded box
+  commands.push(...lightShapes.drawShadedBox(cx, cy, w, h, lightAngle));
+
+  return commands;
+}
+
+/**
+ * Lesson: Contact Shadow (Point of contact shadow)
+ * The darkest area where an object touches the ground.
+ */
+function lessonContactShadow(canvasSize = 32) {
+  const commands = [];
+  const cx = Math.floor(canvasSize / 2);
+  const cy = Math.floor(canvasSize / 2);
+  const r = Math.floor(canvasSize * 0.3);
+
+  // Ground line
+  commands.push(shapes.drawLine(0, cy + r, canvasSize, cy + r, '#9e9e9e'));
+
+  // Sphere outline
+  commands.push(shapes.drawCircle(cx, cy, r, '#bdbdbd', false));
+
+  // Cast shadow (faint)
+  commands.push(shapes.drawEllipse(cx + Math.floor(r*0.5), cy + r, Math.floor(r*1.2), Math.floor(r*0.2), '#757575', true));
+
+  // CONTACT SHADOW (Pitch black, right at the touching point)
+  // Draw a very small, very dark ellipse directly under the center
+  commands.push(shapes.drawEllipse(cx, cy + r, Math.floor(r * 0.4), 2, '#000000', true));
+  commands.push(shapes.drawEllipse(cx, cy + r, Math.floor(r * 0.2), 1, '#000000', true));
+
+  return commands;
+}
+
+function getLightLessonCatalog() {
+  return [
+    { id: 'light_zones', name: '6 Zones of Light', description: 'Highlight to Cast shadow on a sphere', fn: lessonLightZones },
+    { id: 'light_dir', name: 'Light Direction', description: 'Planes facing vs turning away from light', fn: lessonLightDirection },
+    { id: 'light_contact', name: 'Contact Shadow', description: 'The darkest point where object touches ground', fn: lessonContactShadow },
+  ];
+}
+
+module.exports = {
+  lessonLightZones,
+  lessonLightDirection,
+  lessonContactShadow,
+  getLightLessonCatalog
+};

package/domains/art-tree/light_shapes.js

@@ -0,0 +1,136 @@
+const shapes = require('./shapes');
+
+function drawLightSource(cx, cy, r) {
+  const commands = [];
+  const color = '#ffeb3b'; // Yellow sun
+  commands.push(shapes.drawCircle(cx, cy, r, color, true));
+  
+  // Rays
+  const rayL = Math.floor(r * 1.5);
+  for (let i = 0; i < 8; i++) {
+    const a = (i / 8) * 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 + (r + rayL) * Math.cos(a));
+    const y2 = Math.round(cy + (r + rayL) * Math.sin(a));
+    commands.push(shapes.drawLine(x1, y1, x2, y2, color));
+  }
+  return commands;
+}
+
+function drawShadedSphere(cx, cy, r, lightAngle) {
+  const commands = [];
+  
+  // We simulate shading using overlapping crescent shapes or offset circles
+  // Since we have limited primitives, we'll draw concentric offset circles
+  // from dark to light towards the light source.
+
+  const offX = Math.cos(lightAngle);
+  const offY = Math.sin(lightAngle);
+
+  // 1. Cast Shadow on the ground
+  // Drawn first so it's behind the sphere
+  // Shift cast shadow away from light
+  const castR = Math.floor(r * 1.2);
+  const castRy = Math.floor(r * 0.3);
+  const castX = cx - Math.floor(offX * r * 0.8);
+  const castY = cy + r - Math.floor(castRy/2);
+  commands.push(shapes.drawEllipse(castX, castY, castR, castRy, '#424242', true));
+
+  // 2. Base Sphere (Reflected Light zone color)
+  // The very edge away from light gets some bounce light
+  commands.push(shapes.drawCircle(cx, cy, r, '#78909c', true));
+
+  // 3. Core Shadow (main shadow zone)
+  // Offset slightly away from light
+  const coreR = Math.floor(r * 0.9);
+  const coreX = cx - Math.floor(offX * r * 0.1);
+  const coreY = cy - Math.floor(offY * r * 0.1);
+  commands.push(shapes.drawCircle(coreX, coreY, coreR, '#263238', true));
+
+  // 4. Halftone (mid-tone zone)
+  const halfR = Math.floor(r * 0.75);
+  const halfX = cx + Math.floor(offX * r * 0.1);
+  const halfY = cy + Math.floor(offY * r * 0.1);
+  commands.push(shapes.drawCircle(halfX, halfY, halfR, '#546e7a', true));
+
+  // 5. Light zone
+  const lightR = Math.floor(r * 0.5);
+  const lightX = cx + Math.floor(offX * r * 0.3);
+  const lightY = cy + Math.floor(offY * r * 0.3);
+  commands.push(shapes.drawCircle(lightX, lightY, lightR, '#90a4ae', true));
+
+  // 6. Highlight (bright spot)
+  const highR = Math.floor(r * 0.15);
+  const highX = cx + Math.floor(offX * r * 0.5);
+  const highY = cy + Math.floor(offY * r * 0.5);
+  commands.push(shapes.drawCircle(highX, highY, highR, '#ffffff', true));
+
+  return commands;
+}
+
+function drawShadedBox(cx, cy, w, h, lightAngle) {
+  const commands = [];
+  const d = Math.floor(w * 0.6);
+  const dx = Math.floor(d * 0.7);
+  const dy = Math.floor(d * 0.5);
+  
+  const fX = cx - Math.floor(w/2);
+  const fY = cy + Math.floor(h/2);
+  const bX = fX + dx;
+  const bY = fY - dy;
+
+  // Assume light is from Top-Left or Top-Right
+  const isLightLeft = Math.cos(lightAngle) < 0;
+
+  // Determine values (colors) for planes based on light
+  // Top is usually Light (facing up towards light source)
+  const topColor = '#cfd8dc';
+  // Front and Side depend on left/right light
+  const frontColor = isLightLeft ? '#90a4ae' : '#455a64'; // If light is left, front gets some light. If right, front is darker.
+  const sideColor = isLightLeft ? '#455a64' : '#90a4ae';
+
+  // Cast Shadow
+  const castX = isLightLeft ? bX + w : fX - w;
+  const castY = fY;
+  // A simple polygon for cast shadow
+  const shadowPts = [
+    {x: fX, y: fY},
+    {x: fX + w, y: fY},
+    {x: castX, y: castY - dy},
+    {x: castX - w, y: castY - dy}
+  ];
+  commands.push(shapes.drawPolyline(shadowPts, '#424242'));
+
+  // Draw solid planes
+  // Note: Since we don't have a fillPolygon tool natively exposed that supports all shapes easily,
+  // we will draw wireframes with heavy lines or crosshatching to represent values.
+  // Actually, we can just use drawRectangle for front.
+  
+  // Front face (solid)
+  commands.push(shapes.drawRectangle(fX, fY - h, w, h, frontColor, true));
+  
+  // Side face (Right) (wireframe/hatch for now, or just outline)
+  // Let's use outline with thick color
+  const rightSidePts = [
+    {x: fX+w, y: fY-h}, {x: bX+w, y: bY-h}, {x: bX+w, y: bY}, {x: fX+w, y: fY}
+  ];
+  commands.push(shapes.drawPolyline(rightSidePts, sideColor));
+  // Add some hatch lines to simulate fill
+  commands.push(shapes.drawLine(fX+w, fY-Math.floor(h/2), bX+w, bY-Math.floor(h/2), sideColor));
+
+  // Top face
+  const topPts = [
+    {x: fX, y: fY-h}, {x: bX, y: bY-h}, {x: bX+w, y: bY-h}, {x: fX+w, y: fY-h}
+  ];
+  commands.push(shapes.drawPolyline(topPts, topColor));
+  commands.push(shapes.drawLine(fX+Math.floor(w/2), fY-h, bX+Math.floor(w/2), bY-h, topColor));
+
+  return commands;
+}
+
+module.exports = {
+  drawLightSource,
+  drawShadedSphere,
+  drawShadedBox
+};

package/domains/art-tree/light_tools.js

@@ -0,0 +1,49 @@
+const { z } = require('zod');
+const { registerTool, sendCommand } = require('../../core/server');
+const lightLessons = require('./light_lessons');
+
+/**
+ * Register all lighting & shading tools on the MCP server.
+ * @param {McpServer} server
+ */
+function register(server) {
+  registerTool(server, 'art_tree_lesson_light_zones',
+    'Lesson: Lighting - 6 Zones of Light and Shadow on a Sphere',
+    { canvasSize: z.number().int().min(16).max(64).default(32) },
+    async (p) => {
+      const commands = lightLessons.lessonLightZones(p.canvasSize);
+      await Promise.all(commands.map(cmd => sendCommand(cmd)));
+      return { content: [{ type: 'text', text: `✓ 6 Zones of Light lesson completed` }] };
+    });
+
+  registerTool(server, 'art_tree_lesson_light_dir',
+    'Lesson: Lighting - Light Direction and Plane values on a Box',
+    { canvasSize: z.number().int().min(16).max(64).default(32) },
+    async (p) => {
+      const commands = lightLessons.lessonLightDirection(p.canvasSize);
+      await Promise.all(commands.map(cmd => sendCommand(cmd)));
+      return { content: [{ type: 'text', text: `✓ Light Direction lesson completed` }] };
+    });
+
+  registerTool(server, 'art_tree_lesson_light_contact',
+    'Lesson: Lighting - Contact Shadow (Darkest point of intersection)',
+    { canvasSize: z.number().int().min(16).max(64).default(32) },
+    async (p) => {
+      const commands = lightLessons.lessonContactShadow(p.canvasSize);
+      await Promise.all(commands.map(cmd => sendCommand(cmd)));
+      return { content: [{ type: 'text', text: `✓ Contact Shadow lesson completed` }] };
+    });
+
+  registerTool(server, 'art_tree_lesson_light_catalog',
+    'Get the catalog of all available Lighting lessons',
+    {},
+    () => {
+      const catalog = lightLessons.getLightLessonCatalog();
+      const text = catalog.map(l =>
+        `  • ${l.id}: ${l.name} — ${l.description}`
+      ).join('\n');
+      return { content: [{ type: 'text', text: `📚 Lighting Lessons:\n\n${text}` }] };
+    });
+}
+
+module.exports = { register };

package/domains/art-tree/material_lessons.js

@@ -0,0 +1,71 @@
+const materialShapes = require('./material_shapes');
+
+/**
+ * Lesson: Shiny vs Matte (Metal vs Plastic/Rubber)
+ * Compares high contrast sharp highlights vs low contrast diffused highlights.
+ */
+function lessonMaterialShiny(canvasSize = 32) {
+  const commands = [];
+  const cx1 = Math.floor(canvasSize * 0.3);
+  const cx2 = Math.floor(canvasSize * 0.7);
+  const cy = Math.floor(canvasSize / 2);
+  const r = Math.floor(canvasSize * 0.2);
+
+  // 1. Metal Sphere (Left)
+  commands.push(...materialShapes.drawMetalSphere(cx1, cy, r));
+
+  // 2. Matte/Plastic Sphere (Right)
+  commands.push(...materialShapes.drawMatteSphere(cx2, cy, r, '#e65100'));
+
+  return commands;
+}
+
+/**
+ * Lesson: Transparent (Glass)
+ * Demonstrates Fresnel effect, sharp reflections, and light transmission.
+ */
+function lessonMaterialGlass(canvasSize = 32) {
+  const commands = [];
+  const cx = Math.floor(canvasSize / 2);
+  const cy = Math.floor(canvasSize / 2);
+  const r = Math.floor(canvasSize * 0.35);
+
+  commands.push(...materialShapes.drawGlassSphere(cx, cy, r));
+
+  return commands;
+}
+
+/**
+ * Lesson: Texture (Wood vs Stone)
+ * Compares organic lines vs rough cracks.
+ */
+function lessonMaterialTexture(canvasSize = 32) {
+  const commands = [];
+  const cx1 = Math.floor(canvasSize * 0.3);
+  const cx2 = Math.floor(canvasSize * 0.7);
+  const cy = Math.floor(canvasSize / 2);
+  const r = Math.floor(canvasSize * 0.2);
+
+  // 1. Wood Sphere (Left)
+  commands.push(...materialShapes.drawTexturedSphere(cx1, cy, r, 'wood'));
+
+  // 2. Stone Sphere (Right)
+  commands.push(...materialShapes.drawTexturedSphere(cx2, cy, r, 'stone'));
+
+  return commands;
+}
+
+function getMaterialLessonCatalog() {
+  return [
+    { id: 'material_shiny', name: 'Metal vs Matte', description: 'Sharp highlights (Metal) vs Soft highlights (Plastic)', fn: lessonMaterialShiny },
+    { id: 'material_glass', name: 'Glass & Transparency', description: 'Fresnel effect and transmitted light', fn: lessonMaterialGlass },
+    { id: 'material_texture', name: 'Texture: Wood vs Stone', description: 'Grain lines vs cracks on a 3D form', fn: lessonMaterialTexture },
+  ];
+}
+
+module.exports = {
+  lessonMaterialShiny,
+  lessonMaterialGlass,
+  lessonMaterialTexture,
+  getMaterialLessonCatalog
+};

package/domains/art-tree/material_shapes.js

@@ -0,0 +1,130 @@
+const shapes = require('./shapes');
+
+function drawMetalSphere(cx, cy, r) {
+  const commands = [];
+  
+  // Base sphere (darkest shadow/environment reflection)
+  commands.push(shapes.drawCircle(cx, cy, r, '#263238', true));
+  
+  // High contrast core shadow
+  const coreR = Math.floor(r * 0.9);
+  commands.push(shapes.drawCircle(cx, cy + Math.floor(r*0.1), coreR, '#1a1a1a', true));
+
+  // Environment reflection (Ground bounce)
+  const envR = Math.floor(r * 0.7);
+  commands.push(shapes.drawCircle(cx, cy + Math.floor(r*0.3), envR, '#546e7a', true));
+
+  // Sharp light zone
+  const lightR = Math.floor(r * 0.6);
+  commands.push(shapes.drawCircle(cx - Math.floor(r*0.2), cy - Math.floor(r*0.2), lightR, '#cfd8dc', true));
+
+  // VERY sharp highlight (Tiny and pure white)
+  const highR = Math.floor(r * 0.1);
+  commands.push(shapes.drawCircle(cx - Math.floor(r*0.4), cy - Math.floor(r*0.4), highR, '#ffffff', true));
+
+  return commands;
+}
+
+function drawMatteSphere(cx, cy, r, colorBase) {
+  const commands = [];
+  
+  // Base sphere (shadow)
+  commands.push(shapes.drawCircle(cx, cy, r, '#795548', true)); // Dark brownish shadow
+
+  // Smooth gradation (Halftone)
+  const halfR = Math.floor(r * 0.85);
+  commands.push(shapes.drawCircle(cx - Math.floor(r*0.05), cy - Math.floor(r*0.05), halfR, colorBase, true));
+
+  // Light area
+  const lightR = Math.floor(r * 0.6);
+  commands.push(shapes.drawCircle(cx - Math.floor(r*0.15), cy - Math.floor(r*0.15), lightR, '#ffcc80', true)); // Lighter tone
+
+  // Soft highlight (Large and diffused)
+  const highR = Math.floor(r * 0.3);
+  commands.push(shapes.drawCircle(cx - Math.floor(r*0.25), cy - Math.floor(r*0.25), highR, '#ffe0b2', true));
+
+  return commands;
+}
+
+function drawGlassSphere(cx, cy, r) {
+  const commands = [];
+  
+  // Fresnel effect: Edges are brighter/more reflective than the center
+  // Base (Outline & Rim light)
+  commands.push(shapes.drawCircle(cx, cy, r, '#80deea', true));
+  
+  // Darker inner area (light passes through)
+  const innerR = Math.floor(r * 0.9);
+  commands.push(shapes.drawCircle(cx, cy, innerR, '#006064', true));
+  
+  // Transmitted light hitting the back bottom
+  const transR = Math.floor(r * 0.7);
+  commands.push(shapes.drawCircle(cx + Math.floor(r*0.1), cy + Math.floor(r*0.2), transR, '#4dd0e1', true));
+
+  // Very center is darkest (least reflection)
+  const centerR = Math.floor(r * 0.5);
+  commands.push(shapes.drawCircle(cx, cy, centerR, '#00363a', true));
+
+  // Sharp Highlights (Primary and secondary reflections)
+  const highR1 = Math.floor(r * 0.15);
+  commands.push(shapes.drawCircle(cx - Math.floor(r*0.4), cy - Math.floor(r*0.4), highR1, '#ffffff', true));
+  
+  const highR2 = Math.floor(r * 0.08);
+  commands.push(shapes.drawCircle(cx + Math.floor(r*0.3), cy + Math.floor(r*0.4), highR2, '#e0f7fa', true));
+
+  return commands;
+}
+
+function drawTexturedSphere(cx, cy, r, type) {
+  const commands = [];
+  
+  // Base sphere
+  const baseColor = type === 'wood' ? '#8d6e63' : '#9e9e9e';
+  commands.push(shapes.drawCircle(cx, cy, r, baseColor, true));
+
+  // Shadow
+  const shadowColor = type === 'wood' ? '#4e342e' : '#616161';
+  const shadowR = Math.floor(r * 0.85);
+  commands.push(shapes.drawCircle(cx + Math.floor(r*0.1), cy + Math.floor(r*0.1), shadowR, shadowColor, true));
+
+  // Texture application
+  if (type === 'wood') {
+    // Wood grain lines curving around the sphere
+    const grainColor = '#3e2723';
+    for (let i = -2; i <= 2; i++) {
+      const rx = r * 0.8;
+      const ry = r * 0.3 * Math.abs(i) + r * 0.2;
+      commands.push(shapes.drawEllipse(cx, cy + (i * Math.floor(r*0.3)), Math.floor(rx), Math.floor(ry), grainColor, false));
+    }
+  } else if (type === 'stone') {
+    // Stone cracks and rough patches
+    const crackColor = '#212121';
+    // Simplified cracks using polylines
+    commands.push(shapes.drawPolyline([
+      {x: cx - Math.floor(r*0.5), y: cy - Math.floor(r*0.5)},
+      {x: cx - Math.floor(r*0.2), y: cy - Math.floor(r*0.1)},
+      {x: cx + Math.floor(r*0.3), y: cy - Math.floor(r*0.2)},
+      {x: cx + Math.floor(r*0.6), y: cy + Math.floor(r*0.1)}
+    ], crackColor));
+    
+    commands.push(shapes.drawPolyline([
+      {x: cx - Math.floor(r*0.2), y: cy - Math.floor(r*0.1)},
+      {x: cx, y: cy + Math.floor(r*0.4)},
+      {x: cx - Math.floor(r*0.4), y: cy + Math.floor(r*0.7)}
+    ], crackColor));
+  }
+
+  // Soft Highlight over texture
+  const highColor = type === 'wood' ? '#d7ccc8' : '#e0e0e0';
+  const highR = Math.floor(r * 0.4);
+  commands.push(shapes.drawCircle(cx - Math.floor(r*0.3), cy - Math.floor(r*0.3), highR, highColor, true));
+
+  return commands;
+}
+
+module.exports = {
+  drawMetalSphere,
+  drawMatteSphere,
+  drawGlassSphere,
+  drawTexturedSphere
+};

package/domains/art-tree/material_tools.js

@@ -0,0 +1,49 @@
+const { z } = require('zod');
+const { registerTool, sendCommand } = require('../../core/server');
+const materialLessons = require('./material_lessons');
+
+/**
+ * Register all material & surface rendering tools on the MCP server.
+ * @param {McpServer} server
+ */
+function register(server) {
+  registerTool(server, 'art_tree_lesson_material_shiny',
+    'Lesson: Materials - Metal vs Matte (High contrast vs diffused highlights)',
+    { canvasSize: z.number().int().min(16).max(64).default(32) },
+    async (p) => {
+      const commands = materialLessons.lessonMaterialShiny(p.canvasSize);
+      await Promise.all(commands.map(cmd => sendCommand(cmd)));
+      return { content: [{ type: 'text', text: `✓ Metal vs Matte material lesson completed` }] };
+    });
+
+  registerTool(server, 'art_tree_lesson_material_glass',
+    'Lesson: Materials - Glass (Transparency, Fresnel effect)',
+    { canvasSize: z.number().int().min(16).max(64).default(32) },
+    async (p) => {
+      const commands = materialLessons.lessonMaterialGlass(p.canvasSize);
+      await Promise.all(commands.map(cmd => sendCommand(cmd)));
+      return { content: [{ type: 'text', text: `✓ Glass material lesson completed` }] };
+    });
+
+  registerTool(server, 'art_tree_lesson_material_texture',
+    'Lesson: Materials - Texture (Wood grain vs Stone cracks)',
+    { canvasSize: z.number().int().min(16).max(64).default(32) },
+    async (p) => {
+      const commands = materialLessons.lessonMaterialTexture(p.canvasSize);
+      await Promise.all(commands.map(cmd => sendCommand(cmd)));
+      return { content: [{ type: 'text', text: `✓ Wood vs Stone texture lesson completed` }] };
+    });
+
+  registerTool(server, 'art_tree_lesson_material_catalog',
+    'Get the catalog of all available Material lessons',
+    {},
+    () => {
+      const catalog = materialLessons.getMaterialLessonCatalog();
+      const text = catalog.map(l =>
+        `  • ${l.id}: ${l.name} — ${l.description}`
+      ).join('\n');
+      return { content: [{ type: 'text', text: `📚 Material Lessons:\n\n${text}` }] };
+    });
+}
+
+module.exports = { register };