@pixel-normal-edit/mcp 2.1.0 → 2.2.0

package/domains/art-tree/lessons.js

@@ -1,305 +0,0 @@
-#!/usr/bin/env node
-/**
- * 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.
- */
-const shapes = require('./shapes');
-
-/**
- * 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'),
-  ];
-}
-
-/**
- * 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),
-  ];
-}
-
-/**
- * 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),
-  ];
-}
-
-/**
- * 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),
-  ];
-}
-
-/**
- * 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),
-  ];
-}
-
-/**
- * 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),
-  ];
-}
-
-/**
- * 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),
-  ];
-}
-
-/**
- * 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: '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 },
-  ];
-}
-
-module.exports = {
-  lessonLines,
-  lessonSquares,
-  lessonCircles,
-  lessonEllipses,
-  lessonTriangles,
-  lessonPolygons,
-  lessonComposition,
-  lessonFreehand,
-  lessonProportionsAndAngles,
-  lessonCurves,
-  lessonSpiral,
-  lessonStrokes,
-  lessonParallelAndIntersecting,
-  getLessonCatalog,
-};

package/domains/art-tree/light_lessons.js

@@ -1,92 +0,0 @@
-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/material_lessons.js

@@ -1,71 +0,0 @@
-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/perspective_lessons.js

@@ -1,138 +0,0 @@
-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/sky_lessons_1.js

@@ -1,82 +0,0 @@
-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
-};