@pixel-normal-edit/mcp 2.1.0 → 2.2.0

package/domains/art-tree/index.js

@@ -1,59 +1,59 @@
-#!/usr/bin/env node
-/**
- * domains/art-tree/index.js — Art Tree Module Aggregator
- *
- * Aggregates and exports all Art Tree module components.
- * To add new features to this module, create a new file and add it here.
- *
- * Module namespace: art_tree_* (all tools prefixed with art_tree_)
- */
-const shapes = require('./shapes');
-const lessons = require('./lessons');
-const tools = require('./tools');
-const advTools = require('./advanced_tools');
-const curveTools = require('./curve_tools');
-const ellipseTools = require('./ellipse_tools');
-const tools3d = require('./3d_tools');
-const structureTools = require('./structure_tools');
-const csTools = require('./cross_section_tools');
-const transformTools = require('./transform_tools');
-const surfaceTools = require('./surface_tools');
-const perspTools = require('./perspective_tools');
-const hiddenTools = require('./hidden_tools');
-const lightTools = require('./light_tools');
-const materialTools = require('./material_tools');
-const analysisTools = require('./analysis_tools');
-const layerTools = require('./layer_tools');
-const skyTools = require('./sky_tools');
-const vocabTools = require('./vocab_tools');
-
-/**
- * Register all Art Tree MCP tools on the server
- * @param {McpServer} server
- */
-function registerAll(server) {
-  tools.register(server);
-  advTools.register(server);
-  curveTools.register(server);
-  ellipseTools.register(server);
-  tools3d.register(server);
-  structureTools.register(server);
-  csTools.register(server);
-  transformTools.register(server);
-  surfaceTools.register(server);
-  perspTools.register(server);
-  hiddenTools.register(server);
-  lightTools.register(server);
-  materialTools.register(server);
-  analysisTools.register(server);
-  layerTools.register(server);
-  skyTools.register(server);
-  vocabTools.register(server);
-}
-
-module.exports = {
-  shapes,
-  lessons,
-  tools,
-  registerAll,
+#!/usr/bin/env node
+/**
+ * domains/art-tree/index.js — Art Tree Module Aggregator
+ *
+ * Aggregates and exports all Art Tree module components.
+ * To add new features to this module, create a new file and add it here.
+ *
+ * Module namespace: art_tree_* (all tools prefixed with art_tree_)
+ */
+const shapes = require('./shapes');
+const lessons = require('./lessons');
+const tools = require('./tools');
+const advTools = require('./advanced_tools');
+const curveTools = require('./curve_tools');
+const ellipseTools = require('./ellipse_tools');
+const tools3d = require('./3d_tools');
+const structureTools = require('./structure_tools');
+const csTools = require('./cross_section_tools');
+const transformTools = require('./transform_tools');
+const surfaceTools = require('./surface_tools');
+const perspTools = require('./perspective_tools');
+const hiddenTools = require('./hidden_tools');
+const lightTools = require('./light_tools');
+const materialTools = require('./material_tools');
+const analysisTools = require('./analysis_tools');
+const layerTools = require('./layer_tools');
+const skyTools = require('./sky_tools');
+const vocabTools = require('./vocab_tools');
+
+/**
+ * Register all Art Tree MCP tools on the server
+ * @param {McpServer} server
+ */
+function registerAll(server) {
+  tools.register(server);
+  advTools.register(server);
+  curveTools.register(server);
+  ellipseTools.register(server);
+  tools3d.register(server);
+  structureTools.register(server);
+  csTools.register(server);
+  transformTools.register(server);
+  surfaceTools.register(server);
+  perspTools.register(server);
+  hiddenTools.register(server);
+  lightTools.register(server);
+  materialTools.register(server);
+  analysisTools.register(server);
+  layerTools.register(server);
+  skyTools.register(server);
+  vocabTools.register(server);
+}
+
+module.exports = {
+  shapes,
+  lessons,
+  tools,
+  registerAll,
 };

package/domains/art-tree/lessons/3d/box-properties.js

@@ -0,0 +1,38 @@
+/**
+ * Auto-extracted from 3d_lessons.js
+ */
+const shapes = require('../../shapes');
+const advShapes = require('../../shapes/advanced');
+
+/**
+ * Lesson: Box Properties (Width, Height, Depth, Planes, Edges)
+ */
+function lessonBoxProperties(canvasSize = 32, color = '#2196f3') {
+  const commands = [];
+  const cx = Math.floor(canvasSize / 2);
+  const cy = Math.floor(canvasSize / 2);
+  const w = Math.floor(canvasSize * 0.4);
+  const h = Math.floor(canvasSize * 0.4);
+  const d = Math.floor(canvasSize * 0.3);
+
+  // Draw wireframe box
+  commands.push(...shapes3d.drawWireframeBox(cx, cy, w, h, d, color));
+  
+  // Highlight dimensions
+  const fX = cx - Math.floor(w/2);
+  const fY = cy - Math.floor(h/2);
+  
+  // Width
+  commands.push(...advShapes.drawDistance(fX, fY + h + 2, fX + w, fY + h + 2, '#4caf50'));
+  // Height
+  commands.push(...advShapes.drawDistance(fX - 2, fY, fX - 2, fY + h, '#ff9800'));
+  
+  // Depth (approximate along the oblique edge)
+  const dx = Math.floor(d * 0.7);
+  const dy = Math.floor(d * 0.5);
+  commands.push(...advShapes.drawDistance(fX + w + 2, fY + h, fX + w + 2 + dx, fY + h - dy, '#e91e63'));
+
+  return commands;
+}
+
+module.exports = { lessonBoxProperties };

package/domains/art-tree/lessons/3d/cone-properties.js

@@ -0,0 +1,31 @@
+/**
+ * Auto-extracted from 3d_lessons.js
+ */
+const shapes = require('../../shapes');
+const advShapes = require('../../shapes/advanced');
+
+/**
+ * Lesson: Cone Properties (Apex, Base, Axis)
+ */
+function lessonConeProperties(canvasSize = 32, color = '#ff5722') {
+  const commands = [];
+  const cx = Math.floor(canvasSize / 2);
+  const cy = Math.floor(canvasSize / 2);
+  const r = Math.floor(canvasSize * 0.35);
+  const h = Math.floor(canvasSize * 0.6);
+
+  // Draw cone volume
+  commands.push(...shapes3d.drawConeVolume(cx, cy, r, h, color));
+  
+  // Highlight Height
+  const apexY = cy - Math.floor(h/2);
+  const baseY = cy + Math.floor(h/2);
+  commands.push(...advShapes.drawDistance(cx + r + 4, apexY, cx + r + 4, baseY, '#4caf50'));
+  
+  // Highlight Radius (base)
+  commands.push(...advShapes.drawDistance(cx, baseY, cx + r, baseY, '#ff9800'));
+
+  return commands;
+}
+
+module.exports = { lessonConeProperties };

package/domains/art-tree/lessons/3d/cylinder-properties.js

@@ -0,0 +1,29 @@
+/**
+ * Auto-extracted from 3d_lessons.js
+ */
+const shapes = require('../../shapes');
+const advShapes = require('../../shapes/advanced');
+
+/**
+ * Lesson: Cylinder Properties (Central axis, Bases, Perspective change)
+ */
+function lessonCylinderProperties(canvasSize = 32, color = '#00bcd4') {
+  const commands = [];
+  const cx = Math.floor(canvasSize / 2);
+  const cy = Math.floor(canvasSize / 2);
+  const r = Math.floor(canvasSize * 0.3);
+  const h = Math.floor(canvasSize * 0.6);
+
+  // Draw cylinder volume
+  commands.push(...shapes3d.drawCylinderVolume(cx, cy, r, h, color));
+  
+  // Highlight Height
+  commands.push(...advShapes.drawDistance(cx + r + 4, cy - Math.floor(h/2), cx + r + 4, cy + Math.floor(h/2), '#4caf50'));
+
+  // Highlight Radius (top base)
+  commands.push(...advShapes.drawDistance(cx, cy - Math.floor(h/2), cx + r, cy - Math.floor(h/2), '#ff9800'));
+
+  return commands;
+}
+
+module.exports = { lessonCylinderProperties };

package/domains/art-tree/lessons/3d/sphere-properties.js

@@ -0,0 +1,25 @@
+/**
+ * Auto-extracted from 3d_lessons.js
+ */
+const shapes = require('../../shapes');
+const advShapes = require('../../shapes/advanced');
+
+/**
+ * Lesson: Sphere Properties (Center, Radius, Cross contours, Axis)
+ */
+function lessonSphereProperties(canvasSize = 32, color = '#9c27b0') {
+  const commands = [];
+  const cx = Math.floor(canvasSize / 2);
+  const cy = Math.floor(canvasSize / 2);
+  const r = Math.floor(canvasSize * 0.35);
+
+  // Draw sphere with volume lines
+  commands.push(...shapes3d.drawSphereVolume(cx, cy, r, color));
+  
+  // Highlight radius
+  commands.push(...advShapes.drawDistance(cx, cy, cx + r, cy, '#ff9800'));
+
+  return commands;
+}
+
+module.exports = { lessonSphereProperties };

package/domains/art-tree/lessons/advanced/angles.js

@@ -0,0 +1,30 @@
+/**
+ * Auto-extracted from advanced_lessons.js
+ */
+const shapes = require('../../shapes');
+const advShapes = require('../../shapes/advanced');
+
+/**
+ * Lesson: Angles
+ */
+function lessonAngles(canvasSize = 32, color = '#ff5722') {
+  const mid = Math.floor(canvasSize / 2);
+  const w = Math.floor(canvasSize * 0.6);
+  const h = Math.floor(canvasSize * 0.3);
+  const margin = Math.floor(canvasSize * 0.2);
+  
+  const commands = [];
+  // Trapezoid (shows acute and obtuse angles)
+  commands.push(advShapes.drawTrapezoid(margin, margin, Math.floor(w/2), w, h, color, false));
+  
+  // Right Triangle (shows 90 degree angle)
+  commands.push(shapes.drawTriangle([
+    { x: margin, y: canvasSize - margin },
+    { x: margin, y: mid + margin },
+    { x: margin + w, y: canvasSize - margin }
+  ], '#3f51b5', false));
+  
+  return commands;
+}
+
+module.exports = { lessonAngles };

package/domains/art-tree/lessons/advanced/distances.js

@@ -0,0 +1,26 @@
+/**
+ * Auto-extracted from advanced_lessons.js
+ */
+const shapes = require('../../shapes');
+const advShapes = require('../../shapes/advanced');
+
+/**
+ * Lesson: Distances
+ */
+function lessonDistances(canvasSize = 32, color = '#00bcd4') {
+  const margin = Math.floor(canvasSize * 0.2);
+  const commands = [];
+  
+  // Points
+  commands.push(shapes.drawCircle(margin, margin, 1, color, true));
+  commands.push(shapes.drawCircle(canvasSize - margin, margin, 1, color, true));
+  commands.push(shapes.drawCircle(margin, canvasSize - margin, 1, color, true));
+  
+  // Distances between them
+  commands.push(...advShapes.drawDistance(margin, margin, canvasSize - margin, margin));
+  commands.push(...advShapes.drawDistance(margin, margin, margin, canvasSize - margin));
+  
+  return commands;
+}
+
+module.exports = { lessonDistances };

package/domains/art-tree/lessons/advanced/shape-ratios.js

@@ -0,0 +1,25 @@
+/**
+ * Auto-extracted from advanced_lessons.js
+ */
+const shapes = require('../../shapes');
+const advShapes = require('../../shapes/advanced');
+
+/**
+ * Lesson: Shape Ratios
+ */
+function lessonShapeRatios(canvasSize = 32, color = '#2196f3') {
+  const margin = Math.floor(canvasSize * 0.1);
+  const w1 = Math.floor(canvasSize * 0.2);
+  const h1 = w1; // 1:1
+  const w2 = Math.floor(canvasSize * 0.2);
+  const h2 = Math.floor(canvasSize * 0.4); // 1:2
+  
+  return [
+    shapes.drawRectangle(margin, margin, w1, h1, color, false),
+    shapes.drawRectangle(canvasSize - margin - w2, margin, w2, h2, '#4caf50', false),
+    ...advShapes.drawDistance(margin, margin + h1 + 2, margin + w1, margin + h1 + 2, '#888'),
+    ...advShapes.drawDistance(canvasSize - margin - w2, margin + h2 + 2, canvasSize - margin, margin + h2 + 2, '#888')
+  ];
+}
+
+module.exports = { lessonShapeRatios };

package/domains/art-tree/lessons/advanced/shape-relationships.js

@@ -0,0 +1,28 @@
+/**
+ * Auto-extracted from advanced_lessons.js
+ */
+const shapes = require('../../shapes');
+const advShapes = require('../../shapes/advanced');
+
+/**
+ * Lesson: Shape Relationships
+ */
+function lessonShapeRelationships(canvasSize = 32, color = '#607d8b') {
+  const mid = Math.floor(canvasSize / 2);
+  const r = Math.floor(canvasSize * 0.2);
+  const commands = [];
+  
+  // Overlapping circles
+  commands.push(shapes.drawCircle(mid - Math.floor(r/2), mid, r, color, false));
+  commands.push(shapes.drawCircle(mid + Math.floor(r/2), mid, r, '#e91e63', false));
+  
+  // Nested squares (top left)
+  const margin = Math.floor(canvasSize * 0.1);
+  const size = Math.floor(canvasSize * 0.25);
+  commands.push(shapes.drawSquare(margin, margin, size, '#4caf50', false));
+  commands.push(shapes.drawSquare(margin + 2, margin + 2, size - 4, '#8bc34a', false));
+  
+  return commands;
+}
+
+module.exports = { lessonShapeRelationships };

package/domains/art-tree/lessons/advanced/symmetry-and-axis.js

@@ -0,0 +1,26 @@
+/**
+ * Auto-extracted from advanced_lessons.js
+ */
+const shapes = require('../../shapes');
+const advShapes = require('../../shapes/advanced');
+
+/**
+ * Lesson: Symmetry & Axes
+ */
+function lessonSymmetryAndAxis(canvasSize = 32, color = '#9c27b0') {
+  const mid = Math.floor(canvasSize / 2);
+  const w = Math.floor(canvasSize * 0.5);
+  const h = Math.floor(canvasSize * 0.5);
+  const commands = [];
+  
+  // Draw Rhombus
+  commands.push(advShapes.drawRhombus(mid, mid, w, h, color, false));
+  // Vertical axis
+  commands.push(advShapes.drawAxis(mid, Math.floor(canvasSize * 0.1), mid, canvasSize - Math.floor(canvasSize * 0.1)));
+  // Horizontal axis
+  commands.push(advShapes.drawAxis(Math.floor(canvasSize * 0.1), mid, canvasSize - Math.floor(canvasSize * 0.1), mid));
+  
+  return commands;
+}
+
+module.exports = { lessonSymmetryAndAxis };

package/domains/art-tree/{analysis_lessons.js → lessons/analysis/object-analysis.js}

@@ -1,4 +1,7 @@
-const analysisShapes = require('./analysis_shapes');
+/**
+ * Auto-extracted from analysis_lessons.js
+ */
+const shapes = require('../../shapes');
 
 /**
  * Lesson: Object Analysis (Capstone)
@@ -15,18 +18,4 @@ function lessonObjectAnalysis(canvasSize = 32, step = 1, color = '#2196f3') {
   return analysisShapes.drawTeapotAnalysis(cx, cy, canvasSize, validStep, color);
 }
 
-function getAnalysisLessonCatalog() {
-  return [
-    { 
-      id: 'analysis_step', 
-      name: '10-Step Object Analysis', 
-      description: 'Break down a Teapot from Silhouette (1) to Lighting (10). Supply step=1..10', 
-      fn: lessonObjectAnalysis 
-    }
-  ];
-}
-
-module.exports = {
-  lessonObjectAnalysis,
-  getAnalysisLessonCatalog
-};
+module.exports = { lessonObjectAnalysis };

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 };