@pixel-normal-edit/mcp 2.0.10 → 2.2.0

package/domains/art-tree/lessons/basic/circles.js

@@ -0,0 +1,26 @@
+/**
+ * Auto-extracted from lessons.js
+ */
+const shapes = require('../../shapes');
+
+/**
+ * Lesson 3: Circles — Learning curves and symmetry.
+ * @param {number} canvasSize - Canvas dimension
+ * @param {string} color - Primary color
+ * @returns {Array<Object>} Array of command payloads
+ */
+function lessonCircles(canvasSize = 32, color = '#e91e63') {
+  const mid = Math.floor(canvasSize / 2);
+  const r1 = Math.floor(canvasSize * 0.15);
+  const r2 = Math.floor(canvasSize * 0.3);
+  return [
+    // Small circle (outline)
+    shapes.drawCircle(mid, mid, r1, color, false),
+    // Large circle (filled)
+    shapes.drawCircle(mid, mid, r2, '#2196f3', true),
+    // Small filled circle offset
+    shapes.drawCircle(mid + r1, mid - r1, Math.floor(r1 / 2), '#ff9800', true),
+  ];
+}
+
+module.exports = { lessonCircles };

package/domains/art-tree/lessons/basic/composition.js

@@ -0,0 +1,34 @@
+/**
+ * Auto-extracted from lessons.js
+ */
+const shapes = require('../../shapes');
+
+/**
+ * Lesson 7: Composition — Combining basic shapes to create simple objects.
+ * @param {number} canvasSize - Canvas dimension
+ * @returns {Array<Object>} Array of command payloads
+ */
+function lessonComposition(canvasSize = 32) {
+  const mid = Math.floor(canvasSize / 2);
+  const q1 = Math.floor(canvasSize * 0.25);
+  const q3 = Math.floor(canvasSize * 0.75);
+  const small = Math.floor(canvasSize * 0.1);
+  return [
+    // House: square body
+    shapes.drawSquare(q1, mid, q3 - q1, '#8d6e63', true),
+    // House: triangle roof
+    shapes.drawTriangle([
+      { x: q1 - 1, y: mid },
+      { x: mid, y: q1 },
+      { x: q3 + 1, y: mid },
+    ], '#d32f2f', true),
+    // Sun: circle
+    shapes.drawCircle(canvasSize - small - 2, small + 2, small, '#ffc107', true),
+    // Tree: rectangle trunk
+    shapes.drawRectangle(q1 + small, canvasSize - small - 2, Math.floor(small / 2), small, '#5d4037', true),
+    // Tree: circle top
+    shapes.drawCircle(q1 + Math.floor(small / 4), canvasSize - small - 4, Math.floor(small / 2), '#388e3c', true),
+  ];
+}
+
+module.exports = { lessonComposition };

package/domains/art-tree/lessons/basic/curves.js

@@ -0,0 +1,31 @@
+/**
+ * Auto-extracted from lessons.js
+ */
+const shapes = require('../../shapes');
+
+/**
+ * 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;
+}
+
+module.exports = { lessonCurves };

package/domains/art-tree/lessons/basic/ellipses.js

@@ -0,0 +1,26 @@
+/**
+ * Auto-extracted from lessons.js
+ */
+const shapes = require('../../shapes');
+
+/**
+ * Lesson 4: Ellipses — Understanding oval shapes and proportions.
+ * @param {number} canvasSize - Canvas dimension
+ * @param {string} color - Primary color
+ * @returns {Array<Object>} Array of command payloads
+ */
+function lessonEllipses(canvasSize = 32, color = '#9c27b0') {
+  const mid = Math.floor(canvasSize / 2);
+  const rx = Math.floor(canvasSize * 0.3);
+  const ry = Math.floor(canvasSize * 0.15);
+  return [
+    // Horizontal ellipse (outline)
+    shapes.drawEllipse(mid, mid, rx, ry, color, false),
+    // Vertical ellipse (filled)
+    shapes.drawEllipse(mid, mid, ry, rx, '#4caf50', true),
+    // Small circle-like ellipse
+    shapes.drawEllipse(mid + rx, mid - ry, Math.floor(rx / 3), Math.floor(ry / 2), '#ff5722', true),
+  ];
+}
+
+module.exports = { lessonEllipses };

package/domains/art-tree/lessons/basic/freehand.js

@@ -0,0 +1,19 @@
+/**
+ * Auto-extracted from lessons.js
+ */
+const shapes = require('../../shapes');
+
+/**
+ * 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);
+}
+
+module.exports = { lessonFreehand };

package/domains/art-tree/lessons/basic/index.js

@@ -0,0 +1,36 @@
+#!/usr/bin/env node
+/**
+ * lessons/basic/index.js — Art Tree: Basic Lessons Index
+ *
+ * Exports all basic shape lesson functions and catalog.
+ */
+
+const lines = require('./lines');
+const squares = require('./squares');
+const circles = require('./circles');
+const ellipses = require('./ellipses');
+const triangles = require('./triangles');
+const polygons = require('./polygons');
+const composition = require('./composition');
+const freehand = require('./freehand');
+const proportions = require('./proportions');
+const curves = require('./curves');
+const spiral = require('./spiral');
+const strokes = require('./strokes');
+const parallelIntersecting = require('./parallel-intersecting');
+
+module.exports = {
+  ...lines,
+  ...squares,
+  ...circles,
+  ...ellipses,
+  ...triangles,
+  ...polygons,
+  ...composition,
+  ...freehand,
+  ...proportions,
+  ...curves,
+  ...spiral,
+  ...strokes,
+  ...parallelIntersecting,
+};

package/domains/art-tree/lessons/basic/lines.js

@@ -0,0 +1,38 @@
+/**
+ * Auto-extracted from lessons.js
+ */
+const shapes = require('../../shapes');
+
+/**
+ * lessons.js — Art Tree: Basic Shapes Lessons
+ *
+ * Layer: Lesson API (built on top of Shape API)
+ *
+ * Provides structured lessons that guide learners through
+ * drawing basic geometric shapes step by step.
+ * Each lesson returns a sequence of command payloads.
+ */
+
+/**
+ * Lesson 1: Lines — Introduction to drawing straight lines.
+ * Teaches horizontal, vertical, and diagonal lines.
+ * @param {number} canvasSize - Canvas dimension (assumes square)
+ * @param {string} color - Primary color for the lesson
+ * @returns {Array<Object>} Array of command payloads
+ */
+function lessonLines(canvasSize = 32, color = '#ff0000') {
+  const mid = Math.floor(canvasSize / 2);
+  const margin = Math.floor(canvasSize * 0.15);
+  return [
+    // Horizontal line
+    shapes.drawLine(margin, mid, canvasSize - margin, mid, color),
+    // Vertical line
+    shapes.drawLine(mid, margin, mid, canvasSize - margin, '#0000ff'),
+    // Diagonal (top-left to bottom-right)
+    shapes.drawLine(margin, margin, canvasSize - margin, canvasSize - margin, '#00aa00'),
+    // Diagonal (top-right to bottom-left)
+    shapes.drawLine(canvasSize - margin, margin, margin, canvasSize - margin, '#ff8800'),
+  ];
+}
+
+module.exports = { lessonLines };

package/domains/art-tree/lessons/basic/parallel-and-intersecting.js

@@ -0,0 +1,22 @@
+/**
+ * Auto-extracted from lessons.js
+ */
+const shapes = require('../../shapes');
+
+/**
+ * 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')
+  ];
+}
+
+module.exports = { lessonParallelAndIntersecting };

package/domains/art-tree/lessons/basic/polygons.js

@@ -0,0 +1,25 @@
+/**
+ * Auto-extracted from lessons.js
+ */
+const shapes = require('../../shapes');
+
+/**
+ * Lesson 6: Polygons — Multi-sided shapes.
+ * @param {number} canvasSize - Canvas dimension
+ * @param {string} color - Primary color
+ * @returns {Array<Object>} Array of command payloads
+ */
+function lessonPolygons(canvasSize = 32, color = '#607d8b') {
+  const mid = Math.floor(canvasSize / 2);
+  const r = Math.floor(canvasSize * 0.35);
+  return [
+    // Pentagon
+    shapes.drawRegularPolygon(mid, mid, 5, r, '#4caf50', false),
+    // Hexagon (filled)
+    shapes.drawRegularPolygon(mid, mid, 6, Math.floor(r * 0.7), '#ff9800', true),
+    // Octagon
+    shapes.drawRegularPolygon(mid, mid, 8, Math.floor(r * 0.5), '#9c27b0', false),
+  ];
+}
+
+module.exports = { lessonPolygons };

package/domains/art-tree/lessons/basic/proportions-and-angles.js

@@ -0,0 +1,20 @@
+/**
+ * Auto-extracted from lessons.js
+ */
+const shapes = require('../../shapes');
+
+/**
+ * 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')
+  ];
+}
+
+module.exports = { lessonProportionsAndAngles };

package/domains/art-tree/lessons/basic/spiral.js

@@ -0,0 +1,21 @@
+/**
+ * Auto-extracted from lessons.js
+ */
+const shapes = require('../../shapes');
+
+/**
+ * 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);
+}
+
+module.exports = { lessonSpiral };

package/domains/art-tree/lessons/basic/squares.js

@@ -0,0 +1,28 @@
+/**
+ * Auto-extracted from lessons.js
+ */
+const shapes = require('../../shapes');
+
+/**
+ * Lesson 2: Squares & Rectangles — Understanding right angles and proportions.
+ * @param {number} canvasSize - Canvas dimension
+ * @param {string} color - Primary color
+ * @returns {Array<Object>} Array of command payloads
+ */
+function lessonSquares(canvasSize = 32, color = '#1565c0') {
+  const margin = Math.floor(canvasSize * 0.1);
+  const small = Math.floor(canvasSize * 0.2);
+  const large = Math.floor(canvasSize * 0.35);
+  return [
+    // Small square (outline)
+    shapes.drawSquare(margin, margin, small, color, false),
+    // Large square (filled)
+    shapes.drawSquare(canvasSize - margin - large, margin, large, '#ff7043', true),
+    // Rectangle (horizontal)
+    shapes.drawRectangle(margin, canvasSize - margin - small, large + small, small, '#4caf50', false),
+    // Rectangle (vertical, filled)
+    shapes.drawRectangle(canvasSize - margin - small, canvasSize - margin - large, small, large, '#9c27b0', true),
+  ];
+}
+
+module.exports = { lessonSquares };

package/domains/art-tree/lessons/basic/strokes.js

@@ -0,0 +1,23 @@
+/**
+ * Auto-extracted from lessons.js
+ */
+const shapes = require('../../shapes');
+
+/**
+ * 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'),
+  ];
+}
+
+module.exports = { lessonStrokes };

package/domains/art-tree/lessons/basic/triangles.js

@@ -0,0 +1,30 @@
+/**
+ * Auto-extracted from lessons.js
+ */
+const shapes = require('../../shapes');
+
+/**
+ * Lesson 5: Triangles — Three-point shapes and stability.
+ * @param {number} canvasSize - Canvas dimension
+ * @param {string} color - Primary color
+ * @returns {Array<Object>} Array of command payloads
+ */
+function lessonTriangles(canvasSize = 32, color = '#ff5722') {
+  const mid = Math.floor(canvasSize / 2);
+  const size = Math.floor(canvasSize * 0.4);
+  const margin = Math.floor(canvasSize * 0.1);
+  return [
+    // Equilateral triangle (outline)
+    shapes.drawEquilateralTriangle(mid, mid, size, color, false),
+    // Right triangle (filled)
+    shapes.drawTriangle([
+      { x: margin, y: canvasSize - margin },
+      { x: margin, y: margin },
+      { x: Math.floor(canvasSize * 0.35), y: canvasSize - margin },
+    ], '#3f51b5', true),
+    // Inverted triangle
+    shapes.drawEquilateralTriangle(mid, mid, Math.floor(size * 0.6), '#009688', true),
+  ];
+}
+
+module.exports = { lessonTriangles };

package/domains/art-tree/lessons/cross-sections/bottle-sections.js

@@ -0,0 +1,26 @@
+/**
+ * Auto-extracted from cross_section_lessons.js
+ */
+const shapes = require('../../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);
+}
+
+module.exports = { lessonBottleSections };

package/domains/art-tree/lessons/cross-sections/glass-sections.js

@@ -0,0 +1,24 @@
+/**
+ * Auto-extracted from cross_section_lessons.js
+ */
+const shapes = require('../../shapes');
+
+/**
+ * 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);
+}
+
+module.exports = { lessonGlassSections };

package/domains/art-tree/lessons/cross-sections/head-sections.js

@@ -0,0 +1,17 @@
+/**
+ * Auto-extracted from cross_section_lessons.js
+ */
+const shapes = require('../../shapes');
+
+/**
+ * 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);
+}
+
+module.exports = { lessonHeadSections };

package/domains/art-tree/lessons/curves/curve-properties.js

@@ -0,0 +1,50 @@
+/**
+ * Auto-extracted from curve_lessons.js
+ */
+const shapes = require('../../shapes');
+
+/**
+ * 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;
+}
+
+module.exports = { lessonCurveProperties };

package/domains/art-tree/lessons/curves/curve-topology.js

@@ -0,0 +1,45 @@
+/**
+ * Auto-extracted from curve_lessons.js
+ */
+const shapes = require('../../shapes');
+
+/**
+ * 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;
+}
+
+module.exports = { lessonCurveTopology };

package/domains/art-tree/lessons/curves/curve-types.js

@@ -0,0 +1,44 @@
+/**
+ * Auto-extracted from curve_lessons.js
+ */
+const shapes = require('../../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;
+}
+
+module.exports = { lessonCurveTypes };

package/domains/art-tree/lessons/ellipses/coaxial-ellipses.js

@@ -0,0 +1,29 @@
+/**
+ * Auto-extracted from ellipse_lessons.js
+ */
+const shapes = require('../../shapes');
+
+/**
+ * Lesson: Coaxial Ellipses (Multiple ellipses on the same axis)
+ */
+function lessonCoaxialEllipses(canvasSize = 32, color = '#795548') {
+  const commands = [];
+  const cx = Math.floor(canvasSize / 2);
+  const rx = Math.floor(canvasSize * 0.3);
+  
+  // Central axis line
+  commands.push(shapes.drawLine(cx, Math.floor(canvasSize * 0.1), cx, canvasSize - Math.floor(canvasSize * 0.1), '#bdbdbd'));
+  
+  // Top ellipse (narrower, viewed from steeper angle)
+  commands.push(shapes.drawEllipse(cx, Math.floor(canvasSize * 0.2), rx, Math.floor(rx * 0.2), color, false));
+  
+  // Middle ellipse
+  commands.push(shapes.drawEllipse(cx, Math.floor(canvasSize * 0.5), rx, Math.floor(rx * 0.3), color, false));
+  
+  // Bottom ellipse (wider, viewed from less steep angle)
+  commands.push(shapes.drawEllipse(cx, canvasSize - Math.floor(canvasSize * 0.2), rx, Math.floor(rx * 0.4), color, false));
+
+  return commands;
+}
+
+module.exports = { lessonCoaxialEllipses };

package/domains/art-tree/lessons/ellipses/ellipse-anatomy.js

@@ -0,0 +1,26 @@
+/**
+ * Auto-extracted from ellipse_lessons.js
+ */
+const shapes = require('../../shapes');
+
+/**
+ * Lesson: Ellipse Anatomy (Symmetry, Major/Minor axes, Center)
+ */
+function lessonEllipseAnatomy(canvasSize = 32, color = '#00bcd4') {
+  const commands = [];
+  const cx = Math.floor(canvasSize / 2);
+  const cy = Math.floor(canvasSize / 2);
+  const rx = Math.floor(canvasSize * 0.35);
+  const ry = Math.floor(canvasSize * 0.2);
+  const angle = Math.PI / 6; // 30 degrees tilt to show axes clearly
+
+  // Draw ellipse
+  commands.push(...ellipseShapes.drawRotatedEllipse(cx, cy, rx, ry, angle, color));
+  
+  // Draw anatomy (axes and center)
+  commands.push(...ellipseShapes.drawEllipseAxes(cx, cy, rx, ry, angle));
+
+  return commands;
+}
+
+module.exports = { lessonEllipseAnatomy };